:root {
    --sidebar-width: 285px;
    --topbar-height: 60px;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --bg: #f4f6fa;
    --card: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
}

.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: #0f172a;
    color: white;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    overflow-y: auto;
    transition: transform .25s ease;
}

.main-wrapper {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
}

.topbar {
    height: var(--topbar-height);
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 40;
}

.content {
    padding: 24px;
}

.card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 20px;
    border: 1px solid var(--border);
}

.grid-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    background: white;
    border: 1px solid var(--border);
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.responsive-table th,
.responsive-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
}

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.mobile-overlay {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

/* TABLET */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }

    .grid-kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content {
        padding: 18px;
    }

    .topbar {
        padding: 0 18px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        min-width: 280px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
        width: 100%;
        padding-bottom: 72px;
    }

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar .mobile-menu-btn {
        display: block !important;
    }

    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 45;
    }

    .mobile-overlay.active {
        display: block;
    }

    .topbar {
        height: 58px;
        padding: 0 14px;
    }

    .topbar-title {
        font-size: 16px;
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content {
        padding: 14px;
    }

    .card {
        border-radius: 14px;
        padding: 16px;
    }

    .grid-kpi,
    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border);
        z-index: 60;
        height: 64px;
    }

    .mobile-bottom-nav a {
        font-size: 11px;
        text-align: center;
        color: #334155;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
    }

    .mobile-bottom-nav a.active {
        color: var(--primary);
        font-weight: 700;
    }

    .btn,
    button,
    .button {
        width: 100%;
        justify-content: center;
    }

    .action-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .content {
        padding: 10px;
    }

    .card {
        padding: 14px;
    }

    .topbar-title {
        max-width: 140px;
    }

    .responsive-table {
        min-width: 760px;
    }

    .qr-label {
        width: 100%;
    }

    .signature-pad {
        width: 100%;
        height: 180px;
    }
}

/* Production responsive hardening */
.page-header,.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.page-header h1,.head h1{margin:0}.page-header p{margin:5px 0 0;color:var(--muted)}
.form-responsive,.panel{max-width:100%}.form-responsive label,.panel label{display:block;font-weight:600;margin:10px 0 6px}.form-responsive input,.form-responsive select,.form-responsive textarea,.panel input,.panel select,.panel textarea,.filter-bar input,.filter-bar select{width:100%;min-height:44px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff;color:var(--text)}textarea{min-height:96px;resize:vertical}.action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}.action-stack{display:grid;gap:10px}.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:0;border-radius:10px;background:var(--primary);color:#fff;text-decoration:none;cursor:pointer}.btn.secondary{background:#e2e8f0;color:#0f172a}.btn.danger{background:#b91c1c}.notice,.token-help{margin:14px 0;padding:12px 14px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e3a8a}.filter-bar{display:flex;gap:10px;margin-bottom:14px}.filter-bar input{flex:1}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.report-grid form{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:8px;align-items:end;margin-bottom:10px}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:12px;font-weight:700;text-transform:capitalize}.detail-list{display:grid;grid-template-columns:150px 1fr;gap:8px 14px}.detail-list dt{font-weight:700;color:#475569}.detail-list dd{margin:0}.timeline{display:grid;gap:12px}.timeline-item{border-left:3px solid var(--primary);padding:10px 12px;background:#f8fafc;border-radius:0 10px 10px 0}.timeline-item small{display:block;color:var(--muted);margin-top:3px}.timeline-item p{margin:7px 0 0}.public-qr-card{width:min(560px,calc(100% - 24px));margin:32px auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 45px rgba(15,23,42,.12);padding:24px}.public-qr-card h1{font-size:clamp(24px,6vw,36px);margin:12px 0 4px}.public-info{padding:12px 0}.muted{color:var(--muted)}
@media(max-width:900px){.report-grid{grid-template-columns:1fr}.detail-list{grid-template-columns:120px 1fr}.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.responsive-table{min-width:760px}}
@media(max-width:768px){.page-header,.head{display:grid;grid-template-columns:1fr}.page-header .btn,.head .btn{width:100%}.form-grid,.form-grid-3{grid-template-columns:1fr!important}.report-grid form{grid-template-columns:1fr}.action-row{display:grid;grid-template-columns:1fr;width:100%}.action-row>*{width:100%}.filter-bar{display:grid}.detail-list{grid-template-columns:1fr}.detail-list dt{margin-top:5px}.public-qr-card{margin:12px auto;padding:18px}.responsive-table{min-width:680px}button,a.btn,input,select,textarea{font-size:16px}}
@media(max-width:420px){.content{padding:10px}.card,.panel{padding:14px!important}.responsive-table{min-width:620px}.mobile-bottom-nav{height:68px;padding-bottom:env(safe-area-inset-bottom)}}