/* ===== IDentityONE — Black & Gold Theme ===== */
:root {
  --black:       #0d0d0d;
  --black-2:     #141414;
  --black-3:     #1c1c1c;
  --black-4:     #242424;
  --black-5:     #2e2e2e;
  --gold:        #D4AF37;
  --gold-light:  #E8C84A;
  --gold-dark:   #a8891f;
  --gold-muted:  rgba(212,175,55,0.10);
  --gold-border: rgba(212,175,55,0.25);
  --white:       #f7f3ec;
  --white-dim:   rgba(247,243,236,0.70);
  --white-muted: rgba(247,243,236,0.35);
  --white-faint: rgba(247,243,236,0.06);
  --border:      rgba(212,175,55,0.22);
  --border-dim:  rgba(247,243,236,0.07);
  --red:         #c0392b;
  --green:       #27ae60;
  --blue:        #2980b9;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --shadow:      0 8px 40px rgba(0,0,0,0.6);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:   'DM Sans',system-ui,sans-serif;
  --sidebar-w:   240px;
  --transition:  0.18s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-body);
     font-weight:300;line-height:1.6;min-height:100vh;overflow-x:hidden;
     background-image:radial-gradient(ellipse 80% 50% at 20% -10%,rgba(212,175,55,0.03) 0%,transparent 60%)}

/* ===== SIDEBAR ===== */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
         background:var(--black-2);border-right:1px solid var(--border);
         display:flex;flex-direction:column;z-index:100;overflow-y:auto;
         transition:transform var(--transition);}
.sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);
              display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
.logo-mark{width:38px;height:38px;background:var(--gold);border-radius:8px;
           display:flex;align-items:center;justify-content:center;
           font-weight:700;font-size:1.1rem;color:var(--black);flex-shrink:0;}
.logo-text{font-family:var(--font-display);font-size:1.2rem;color:var(--gold);
           font-weight:600;letter-spacing:0.03em;line-height:1.1;}
.logo-sub{font-size:0.62rem;color:var(--white-muted);letter-spacing:0.08em;
          text-transform:uppercase;}
.sidebar-nav{flex:1;padding:1rem 0;}
.nav-section{padding:0.5rem 1.25rem 0.25rem;font-size:0.62rem;
             letter-spacing:0.12em;text-transform:uppercase;color:var(--white-muted);}
.nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;
          color:var(--white-dim);text-decoration:none;font-size:0.875rem;
          border-left:3px solid transparent;transition:all var(--transition);
          cursor:pointer;}
.nav-item:hover{color:var(--white);background:var(--white-faint);
                border-left-color:var(--gold-dark);}
.nav-item.active{color:var(--gold);background:var(--gold-muted);
                 border-left-color:var(--gold);}
.nav-icon{font-size:1.1rem;width:20px;text-align:center;flex-shrink:0;}
.nav-badge{margin-left:auto;background:var(--gold);color:var(--black);
           font-size:0.65rem;font-weight:700;padding:2px 7px;
           border-radius:100px;min-width:20px;text-align:center;}
.nav-badge.red{background:var(--red);color:white;}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border-dim);
                font-size:0.78rem;color:var(--white-muted);}
.sidebar-user{display:flex;align-items:center;gap:0.65rem;margin-bottom:0.75rem;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--gold-muted);
             border:1px solid var(--border);display:flex;align-items:center;
             justify-content:center;font-size:0.875rem;color:var(--gold);}
.user-name{font-size:0.82rem;color:var(--white-dim);}
.user-role{font-size:0.7rem;color:var(--white-muted);text-transform:capitalize;}

/* ===== MAIN LAYOUT ===== */
.main-wrap{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}
.topbar{background:var(--black-2);border-bottom:1px solid var(--border-dim);
        padding:0.85rem 2rem;display:flex;align-items:center;justify-content:space-between;
        position:sticky;top:0;z-index:90;}
.topbar-title{font-family:var(--font-display);font-size:1.2rem;color:var(--white);}
.topbar-right{display:flex;align-items:center;gap:0.75rem;}
.main-content{flex:1;padding:2rem;max-width:1400px;width:100%;}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.2;}
h1{font-size:clamp(1.6rem,3vw,2.2rem);}
h2{font-size:1.5rem;}h3{font-size:1.2rem;}h4{font-size:1rem;}
.text-gold{color:var(--gold);}
.text-muted{color:var(--white-muted);}
.text-dim{color:var(--white-dim);}
.text-red{color:#e74c3c;}
.text-green{color:#2ecc71;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
     padding:0.6rem 1.25rem;border-radius:var(--radius-sm);font-family:var(--font-body);
     font-size:0.855rem;font-weight:400;text-decoration:none;border:1px solid transparent;
     cursor:pointer;transition:all var(--transition);white-space:nowrap;line-height:1;}
.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:600;}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);
                box-shadow:0 4px 18px rgba(212,175,55,0.3);}
.btn-outline{background:transparent;color:var(--white-dim);border-color:var(--border-dim);}
.btn-outline:hover{border-color:var(--border);color:var(--white);background:var(--white-faint);}
.btn-outline-gold{background:transparent;color:var(--gold);border-color:var(--border);}
.btn-outline-gold:hover{background:var(--gold-muted);}
.btn-danger{background:transparent;color:#e74c3c;border-color:rgba(231,76,60,.3);}
.btn-danger:hover{background:rgba(231,76,60,.1);}
.btn-success{background:var(--green);color:white;border-color:var(--green);}
.btn-success:hover{background:#2ecc71;}
.btn-blue{background:var(--blue);color:white;border-color:var(--blue);}
.btn-sm{padding:0.35rem 0.8rem;font-size:0.8rem;}
.btn-lg{padding:0.85rem 1.75rem;font-size:1rem;}
.btn-full{width:100%;}
.btn-icon{padding:0.4rem 0.55rem;}

/* ===== FORMS ===== */
.form-group{margin-bottom:1rem;}
.form-label{display:block;font-size:0.7rem;font-weight:500;letter-spacing:0.08em;
            text-transform:uppercase;color:var(--gold);margin-bottom:0.3rem;opacity:.85;}
.form-input,.form-textarea,.form-select{width:100%;background:var(--black-3);
  border:1px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--white);
  font-family:var(--font-body);font-size:0.875rem;font-weight:300;padding:0.6rem 0.85rem;
  transition:border-color var(--transition),box-shadow var(--transition);outline:none;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--white-muted);}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(212,175,55,0.08);}
.form-textarea{resize:vertical;min-height:80px;}
.form-select{cursor:pointer;}
.form-select option{background:var(--black-3);}
.form-hint{font-size:0.73rem;color:var(--white-muted);margin-top:0.25rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;}
.form-check{display:flex;align-items:center;gap:0.55rem;cursor:pointer;}
.form-check input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;}
.form-check label{font-size:0.875rem;color:var(--white-dim);cursor:pointer;}
.form-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-dim);}
.form-section:last-child{border-bottom:none;margin-bottom:0;}

/* ===== CARDS / PANELS ===== */
.panel{background:var(--black-2);border:1px solid var(--border-dim);
       border-radius:var(--radius-lg);padding:1.5rem;
       transition:border-color var(--transition);}
.panel:hover{border-color:rgba(212,175,55,.12);}
.panel-header{display:flex;align-items:center;justify-content:space-between;
              margin-bottom:1.25rem;padding-bottom:0.9rem;
              border-bottom:1px solid var(--border-dim);}
.panel-title{font-family:var(--font-display);font-size:1.05rem;color:var(--white);}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
            gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--black-2);border:1px solid var(--border-dim);
           border-radius:var(--radius-lg);padding:1.25rem;
           display:flex;flex-direction:column;gap:0.4rem;
           transition:all var(--transition);}
.stat-card:hover{border-color:var(--border);transform:translateY(-2px);}
.stat-icon{font-size:1.4rem;margin-bottom:0.25rem;}
.stat-number{font-family:var(--font-display);font-size:2rem;
             line-height:1;color:var(--white);}
.stat-label{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--gold);opacity:.8;}
.stat-card.green .stat-number{color:#2ecc71;}
.stat-card.red   .stat-number{color:#e74c3c;}
.stat-card.blue  .stat-number{color:#5dade2;}
.stat-card.gold  .stat-number{color:var(--gold);}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:0.855rem;}
thead th{text-align:left;padding:8px 12px;font-size:0.68rem;
         text-transform:uppercase;letter-spacing:0.08em;color:var(--white-muted);
         border-bottom:1px solid var(--border-dim);font-weight:400;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border-dim);transition:background var(--transition);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--white-faint);}
tbody td{padding:10px 12px;vertical-align:middle;}
.td-name{color:var(--white);font-weight:500;}
.td-muted{color:var(--white-muted);font-size:0.8rem;}
.td-actions{display:flex;gap:0.35rem;justify-content:flex-end;}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:0.18rem 0.55rem;border-radius:100px;
       font-size:0.68rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;}
.badge-gold{background:var(--gold-muted);color:var(--gold);border:1px solid var(--border);}
.badge-green{background:rgba(39,174,96,.15);color:#2ecc71;border:1px solid rgba(39,174,96,.25);}
.badge-red{background:rgba(192,57,43,.15);color:#e74c3c;border:1px solid rgba(192,57,43,.25);}
.badge-blue{background:rgba(41,128,185,.15);color:#5dade2;border:1px solid rgba(41,128,185,.25);}
.badge-muted{background:var(--black-5);color:var(--white-muted);border:1px solid var(--border-dim);}

/* ===== PHOTO UPLOAD ===== */
.photo-upload-wrap{display:flex;gap:1.5rem;align-items:flex-start;}
.photo-preview{width:120px;height:160px;object-fit:cover;border-radius:var(--radius-sm);
               border:2px solid var(--border);background:var(--black-3);flex-shrink:0;}
.photo-preview-empty{width:120px;height:160px;border-radius:var(--radius-sm);
                     border:2px dashed var(--border);background:var(--black-3);
                     display:flex;align-items:center;justify-content:center;
                     color:var(--white-muted);font-size:2rem;flex-shrink:0;}

/* ===== PERSON CARD ===== */
.person-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:2rem;}
.person-photo{width:110px;height:145px;object-fit:cover;border-radius:var(--radius-md);
              border:2px solid var(--border);flex-shrink:0;}
.person-photo-empty{width:110px;height:145px;border-radius:var(--radius-md);
                    border:2px solid var(--border-dim);background:var(--black-3);
                    display:flex;align-items:center;justify-content:center;
                    color:var(--white-muted);font-size:2.5rem;flex-shrink:0;}
.person-info{flex:1;}
.person-name{font-family:var(--font-display);font-size:1.8rem;margin-bottom:0.3rem;}
.person-id{color:var(--gold);font-family:monospace;font-size:0.9rem;}
.person-dept{color:var(--white-dim);font-size:0.875rem;margin-top:0.2rem;}

/* ===== ID CARD PREVIEW ===== */
.id-card-preview{border-radius:var(--radius-md);overflow:hidden;
                 box-shadow:0 8px 40px rgba(0,0,0,0.7);max-width:428px;}
.id-card-preview img{width:100%;display:block;}

/* ===== FLASH MESSAGES ===== */
.flash-container{padding:1rem 2rem 0;}
.flash{display:flex;align-items:center;justify-content:space-between;
       padding:0.7rem 1rem;border-radius:var(--radius-sm);font-size:0.855rem;
       border:1px solid transparent;max-width:720px;margin-bottom:0.4rem;}
.flash-success{background:rgba(39,174,96,.12);border-color:rgba(39,174,96,.25);color:#2ecc71;}
.flash-error{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.25);color:#e74c3c;}
.flash-info{background:var(--gold-muted);border-color:var(--border);color:var(--gold);}
.flash-close{background:none;border:none;color:inherit;cursor:pointer;
             font-size:1.1rem;opacity:.6;margin-left:1rem;}

/* ===== AUTH ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
           background:var(--black);padding:2rem;}
.auth-box{width:100%;max-width:420px;background:var(--black-2);
          border:1px solid var(--border);border-radius:var(--radius-xl);
          padding:2.5rem;box-shadow:var(--shadow);}
.auth-logo{text-align:center;margin-bottom:2rem;}
.auth-logo-mark{font-size:2.5rem;color:var(--gold);display:block;
                font-family:var(--font-display);font-weight:600;letter-spacing:.05em;}
.auth-logo-sub{font-size:0.7rem;letter-spacing:.14em;color:var(--white-muted);
               text-transform:uppercase;margin-top:0.2rem;display:block;}
.auth-footer{text-align:center;margin-top:1.25rem;font-size:0.82rem;color:var(--white-muted);}

/* ===== SEARCH BAR ===== */
.search-bar{display:flex;gap:0.6rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.search-input{flex:1;min-width:220px;}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--white-muted);}
.empty-icon{font-size:3rem;margin-bottom:1rem;display:block;opacity:.25;}
.empty-state h3{color:var(--white-dim);margin-bottom:0.5rem;}

/* ===== SCAN SCREEN ===== */
.scan-wrap{max-width:600px;margin:0 auto;}
.scan-input-wrap{position:relative;margin-bottom:1.5rem;}
.scan-input{font-size:1.2rem;padding:1rem 1.25rem;letter-spacing:0.1em;
            background:var(--black-3);border:2px solid var(--border);
            border-radius:var(--radius-md);color:var(--white);width:100%;outline:none;}
.scan-input:focus{border-color:var(--gold);}
.scan-result{padding:1.5rem;border-radius:var(--radius-lg);border:1px solid transparent;
             display:none;margin-bottom:1rem;transition:all .3s;}
.scan-result.in{background:rgba(39,174,96,.12);border-color:rgba(39,174,96,.3);}
.scan-result.out{background:rgba(41,128,185,.12);border-color:rgba(41,128,185,.3);}
.scan-result.error{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.3);}
.scan-name{font-size:1.5rem;font-family:var(--font-display);margin-bottom:.25rem;}
.scan-meta{font-size:.82rem;color:var(--white-dim);}
.scan-photo{width:80px;height:105px;object-fit:cover;border-radius:var(--radius-sm);
            border:2px solid var(--border);float:right;margin-left:1rem;}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;
             margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap;}
.page-header-left h1{margin-bottom:0.2rem;}
.page-header-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}

/* ===== UTILS ===== */
.divider{border:none;border-top:1px solid var(--border-dim);margin:1.25rem 0;}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem;}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem;}
.flex{display:flex;}.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.w-full{width:100%;}
.text-center{text-align:center;}.text-right{text-align:right;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;}
.info-row{display:flex;justify-content:space-between;align-items:center;
          padding:6px 0;border-bottom:1px solid var(--border-dim);font-size:.855rem;}
.info-row:last-child{border-bottom:none;}
.info-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);opacity:.8;}
.info-value{color:var(--white-dim);}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  :root{--sidebar-w:0px;}
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);width:240px;}
  .main-wrap{margin-left:0;}
  .form-row,.form-row-3{grid-template-columns:1fr;}
}