*{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#0d5982;--blue-dark:#0a4a6e;--blue-light:#e8f4f9;--green:#27ae60;--red:#e74c3c;--orange:#e67e22;--grey:#f5f6fa;--border:#dde1ea;--text:#2d3748;--text-light:#718096}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--grey);color:var(--text);font-size:14px}

/* NAV */
.navbar{background:var(--blue);color:#fff;display:flex;align-items:center;padding:0 24px;height:60px;gap:20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.nav-logo{height:32px;width:auto;display:block}
.nav-divider{width:1px;height:28px;background:rgba(255,255,255,.25);flex-shrink:0}
.nav-brand{color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;opacity:.9}
.nav-links{display:flex;align-items:center;gap:2px;flex:1}
.nav-link{color:rgba(255,255,255,.85);text-decoration:none;padding:6px 12px;border-radius:6px;font-size:.875rem;transition:background .15s}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.15)}
.nav-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.875rem}
.avatar{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}

/* LAYOUT */
.container{max-width:1200px;margin:0 auto;padding:24px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.page-title{font-size:1.4rem;font-weight:700}

/* CARDS */
.card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc}
.card-body{padding:20px}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;text-align:center;transition:box-shadow .15s}
.stat-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.1)}
.stat-num{font-size:2rem;font-weight:700;color:var(--blue)}
.stat-label{font-size:.8rem;color:var(--text-light);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* TABLE */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 14px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light);border-bottom:2px solid var(--border);background:#fafbfc}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc}
.table-empty{text-align:center;padding:40px;color:var(--text-light)}

/* BADGES */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-active{background:#d4edda;color:#155724}
.badge-assigned{background:#cce5ff;color:#004085}
.badge-under_repair{background:#fff3cd;color:#856404}
.badge-disposed{background:#f8d7da;color:#721c24}
.badge-in_storage{background:#e2e3e5;color:#383d41}
.badge-admin{background:#e8d5ff;color:#4a0080}
.badge-maintainer{background:#d0f0fd;color:#004d6b}
.badge-viewer{background:#e2e3e5;color:#383d41}

/* FORMS */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.82rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.03em}
.form-control{padding:9px 12px;border:1.5px solid var(--border);border-radius:6px;font-size:.9rem;width:100%;transition:border-color .15s}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,89,130,.1)}
textarea.form-control{resize:vertical;min-height:80px}
.form-actions{display:flex;gap:12px;margin-top:20px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .15s}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warning{background:var(--orange);color:#fff}
.btn-outline{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}.btn-outline:hover{background:var(--blue);color:#fff}
.btn-sm{padding:5px 12px;font-size:.8rem}
.btn-google{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--border);color:var(--text);padding:13px 20px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;justify-content:center;transition:box-shadow .15s;margin-top:8px}
.btn-google:hover{box-shadow:0 2px 12px rgba(0,0,0,.15)}

/* ALERTS */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.875rem}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-danger{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}
.alert-info{background:#cce5ff;color:#004085;border:1px solid #b8daff}

/* SEARCH */
.search-bar{display:flex;gap:10px;margin-bottom:20px}
.search-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:.9rem}
.search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,89,130,.1)}

/* QR CODE */
.qr-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.qr-wrapper canvas,.qr-wrapper img{border:1px solid var(--border);border-radius:6px;padding:8px;background:#fff}
.qr-label{font-size:.75rem;color:var(--text-light);text-align:center}

/* SCANNER */
#scanner-container{border:2px dashed var(--border);border-radius:8px;overflow:hidden;display:none;margin-bottom:12px}
#scanner-video{width:100%;max-height:300px;display:block}
.scanner-toggle{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--blue);cursor:pointer;margin-bottom:8px;user-select:none}

/* LOGIN */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%)}
.login-card{background:#fff;border-radius:14px;padding:44px 40px;max-width:380px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.login-logo{max-width:180px;margin:0 auto 24px;display:block}
.login-card h1{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:6px}
.login-sub{color:var(--text-light);font-size:.875rem;margin-bottom:28px}
.login-divider{border:none;border-top:1px solid var(--border);margin:20px 0}

/* MISC */
.text-muted{color:var(--text-light)}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.barcode-badge{font-family:monospace;background:#f0f4f8;padding:2px 8px;border-radius:4px;font-size:.85rem;border:1px solid var(--border)}
.history-list{list-style:none}
.history-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.875rem}
.history-item:last-child{border:none}
.history-time{color:var(--text-light);white-space:nowrap;min-width:130px}

/* PRINT LABEL */
@media print {
    body{background:#fff}
    .no-print{display:none!important}
    .print-label{width:62mm;border:1px solid #ccc;border-radius:4px;padding:6mm;font-family:Arial,sans-serif;page-break-inside:avoid}
    .print-label .label-logo{width:40mm;display:block;margin:0 auto 3mm}
    .print-label .label-title{font-size:9pt;font-weight:700;text-align:center;margin-bottom:2mm}
    .print-label .label-sub{font-size:7pt;color:#555;text-align:center;margin-bottom:3mm}
    .print-label .label-qr{text-align:center;margin-bottom:3mm}
    .print-label .label-barcode{font-family:monospace;font-size:8pt;text-align:center;background:#f5f5f5;padding:2mm;border-radius:2px}
}