/* =============================================
   Password Vault — app.css
   ============================================= */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
     --color-bg:                #F7F7F6;
     --color-background-primary:   #FFFFFF;
     --color-background-secondary: #F3F3F2;
     --color-border-secondary:     #E4E4E2;
     --color-border-tertiary:      #EBEBEA;
     --color-text-primary:         #1A1A19;
     --color-text-secondary:       #706F6C;
     --border-radius-sm:  4px;
     --border-radius-md:  8px;
     --border-radius-lg:  12px;
     --font-sans: 'Geist', system-ui, sans-serif;
     --font-mono: 'Geist Mono', monospace;
   }
   
   html, body {
     height: 100%;
     font-family: var(--font-sans);
     background: var(--color-bg);
     color: var(--color-text-primary);
     font-size: 14px;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
   }
   
   input, select, textarea, button {
     font-family: var(--font-sans);
     font-size: 13px;
     outline: none;
   }
   
   input, select, textarea {
     width: 100%;
     background: var(--color-background-primary);
     border: 0.5px solid var(--color-border-secondary);
     border-radius: var(--border-radius-md);
     padding: 7px 10px;
     color: var(--color-text-primary);
     transition: border-color .15s;
   }
   input:focus, select:focus, textarea:focus {
     border-color: #A8A8A5;
   }
   input::placeholder, textarea::placeholder {
     color: #AEAEAD;
   }
   
   /* ===== SHELL LAYOUT ===== */
   .shell {
     display: flex;
     height: 100vh;
     overflow: hidden;
   }
   
   /* ===== SIDEBAR ===== */
   .sidebar {
     width: 220px;
     flex-shrink: 0;
     background: var(--color-background-primary);
     border-right: 0.5px solid var(--color-border-tertiary);
     display: flex;
     flex-direction: column;
     padding: 1.25rem 0.75rem;
   }
   
   .sidebar-logo {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 0.5rem 1.25rem;
     border-bottom: 0.5px solid var(--color-border-tertiary);
     margin-bottom: 1rem;
   }
   .logo-icon {
     width: 32px; height: 32px;
     background: var(--color-text-primary);
     border-radius: var(--border-radius-md);
     display: flex; align-items: center; justify-content: center;
     color: #fff;
     font-size: 16px;
   }
   .logo-text {
     font-size: 15px;
     font-weight: 600;
     color: var(--color-text-primary);
     letter-spacing: -.2px;
   }
   
   .sidebar-nav { flex: 1; }
   .nav-item {
     display: flex; align-items: center; gap: 8px;
     padding: 8px 10px;
     border-radius: var(--border-radius-md);
     font-size: 13px;
     color: var(--color-text-secondary);
     text-decoration: none;
     transition: background .15s, color .15s;
     margin-bottom: 2px;
   }
   .nav-item i { font-size: 16px; }
   .nav-item:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
   .nav-item.active { background: var(--color-background-secondary); color: var(--color-text-primary); font-weight: 500; }
   
   .sidebar-footer {
     border-top: 0.5px solid var(--color-border-tertiary);
     padding-top: 0.75rem;
     display: flex; align-items: center; gap: 8px;
   }
   .user-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
   .user-avatar {
     width: 30px; height: 30px;
     border-radius: 50%;
     background: var(--color-text-primary);
     color: #fff;
     display: flex; align-items: center; justify-content: center;
     font-size: 12px; font-weight: 600;
     flex-shrink: 0;
   }
   .user-meta { min-width: 0; }
   .user-name  {
     font-size: 12px; font-weight: 500; color: var(--color-text-primary);
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     display: flex; align-items: center; gap: 5px;
   }
   .user-email { font-size: 10px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   
   /* Role badge di sidebar */
   .role-badge {
     display: inline-block;
     font-size: 9px;
     font-weight: 600;
     padding: 1px 5px;
     border-radius: 4px;
     letter-spacing: .3px;
     flex-shrink: 0;
   }
   .role-admin { background: #1A1A19; color: #fff; }
   .role-user  { background: #E4E4E2; color: #706F6C; }
   
   .btn-logout {
     background: none; border: none; cursor: pointer;
     color: var(--color-text-secondary);
     padding: 4px; border-radius: var(--border-radius-sm);
     font-size: 16px;
     display: flex; align-items: center;
     transition: color .15s;
   }
   .btn-logout:hover { color: #E24B4A; }
   
   /* ===== MAIN CONTENT ===== */
   .main-content {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0 1.5rem 2rem;
     min-width: 0;
   }
   
   /* ===== VAULT PAGE ===== */
   /* PENTING: hapus max-width agar tabel bisa stretch penuh */
   .vault-wrap {
     width: 100%;
     padding-top: 0;
   }
   
   .hdr {
     display: flex; align-items: center; justify-content: space-between;
     padding: 1.25rem 0 1rem;
     border-bottom: 0.5px solid var(--color-border-tertiary);
     margin-bottom: 1.25rem;
   }
   .hdr-l { display: flex; align-items: center; gap: 10px; }
   .hdr-ic {
     width: 36px; height: 36px;
     background: var(--color-background-secondary);
     border: 0.5px solid var(--color-border-secondary);
     border-radius: var(--border-radius-md);
     display: flex; align-items: center; justify-content: center;
     font-size: 18px;
   }
   .ttl { font-size: 16px; font-weight: 500; }
   .sub { font-size: 12px; color: var(--color-text-secondary); }
   
   /* ── Stats cards ── */
   .stats {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px;
     margin-bottom: 1.25rem;
   }
   .stats-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   
   .sc {
     background: var(--color-background-secondary);
     border-radius: var(--border-radius-md);
     padding: 12px 14px;
     display: flex;
     align-items: flex-start;
     gap: 12px;
   }
   .sc-icon-wrap {
     width: 34px; height: 34px;
     background: var(--color-border-secondary);
     border-radius: var(--border-radius-md);
     display: flex; align-items: center; justify-content: center;
     flex-shrink: 0;
   }
   .sc-icon-wrap.sc-green { background: #DCFCE7; }
   .sc-icon-wrap.sc-blue  { background: #DBEAFE; }
   .sc-icon-wrap.sc-purple{ background: #EDE9FE; }
   .sc-icon {
     font-size: 16px;
     color: var(--color-text-secondary);
   }
   .sc-icon-wrap.sc-green .sc-icon  { color: #15803D; }
   .sc-icon-wrap.sc-blue  .sc-icon  { color: #1D4ED8; }
   .sc-icon-wrap.sc-purple .sc-icon { color: #6D28D9; }
   .sc-body { min-width: 0; flex: 1; }
   .sl { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 3px; }
   .sv { font-size: 20px; font-weight: 500; line-height: 1.2; }
   .sv-sm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .sc-meta {
     font-size: 10px;
     color: var(--color-text-secondary);
     margin-top: 3px;
     display: flex;
     align-items: center;
     gap: 3px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .sc-meta i { font-size: 11px; }
   
   /* ── Toolbar ── */
   .toolbar { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
   .sw { position: relative; flex: 1; min-width: 180px; }
   .sw i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--color-text-secondary); pointer-events: none; }
   #sI { padding-left: 32px; }
   
   .badd {
     display: flex; align-items: center; gap: 6px;
     padding: 0 14px; height: 36px;
     background: var(--color-background-primary);
     border: 0.5px solid var(--color-border-secondary);
     border-radius: var(--border-radius-md);
     font-size: 13px; color: var(--color-text-primary);
     cursor: pointer; white-space: nowrap;
     transition: background .15s;
   }
   .badd:hover { background: var(--color-background-secondary); }
   
   /* ── TABLE — RESPONSIVE ── */
   /* Wrapper: overflow-x agar bisa scroll horizontal di layar kecil
      tapi table sendiri pakai width:100% agar stretch di layar besar */
   .tw {
     overflow-x: auto;
     border: 0.5px solid var(--color-border-tertiary);
     border-radius: var(--border-radius-lg);
     width: 100%;
   }
   
   /* table-layout:auto agar kolom menyesuaikan konten + lebar container */
   table {
     width: 100%;
     border-collapse: collapse;
     font-size: 12px;
     table-layout: auto;   /* ← kunci: auto bukan fixed */
     min-width: 900px;     /* min supaya tidak terlalu sempit */
   }
   thead tr { background: var(--color-background-secondary); }
   th {
     padding: 10px 12px;
     text-align: left; font-weight: 500; font-size: 11px;
     color: var(--color-text-secondary);
     border-bottom: 0.5px solid var(--color-border-tertiary);
     white-space: nowrap;
   }
   td {
     padding: 10px 12px;
     border-bottom: 0.5px solid var(--color-border-tertiary);
     vertical-align: middle;
   }
   tr:last-child td { border-bottom: none; }
   tr:hover td { background: var(--color-background-secondary); }
   
   /* Kolom dengan lebar tetap */
   .c-no   { width: 38px; }
   .c-act  { width: 64px; }
   /* Kolom lain biarkan auto stretch */
   
   /* ── User chip (dibuat/diupdate oleh) ── */
   .user-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 11px;
     color: var(--color-text-secondary);
     white-space: nowrap;
   }
   .user-chip-av {
     width: 20px; height: 20px;
     border-radius: 50%;
     background: var(--color-text-primary);
     color: #fff;
     display: flex; align-items: center; justify-content: center;
     font-size: 9px; font-weight: 600;
     flex-shrink: 0;
   }
   .user-chip-av.uc-blue {
     background: #1D4ED8;
   }
   
   .pc { display: flex; align-items: center; gap: 5px; }
   .pdots { font-size: 14px; letter-spacing: 2px; color: var(--color-text-secondary); font-family: var(--font-mono); }
   .ptxt  { font-family: var(--font-mono); font-size: 11px; display: none; }
   .eb { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 2px; display: flex; align-items: center; }
   .eb:hover { color: var(--color-text-primary); }
   
   /* ── Badges ── */
   .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 500; }
   .bc { background: #EEEDFE; color: #3C3489; }
   .bf { background: #EAF3DE; color: #27500A; }
   .bl { background: #E1F5EE; color: #085041; }
   .be { background: #FAEEDA; color: #633806; }
   .bo { background: #F1EFE8; color: #444441; }
   .badge-admin { background: #1A1A19; color: #fff; padding: 2px 10px; }
   .badge-user  { background: #E4E4E2; color: #706F6C; padding: 2px 10px; }
   
   /* Custom category palette */
   .bx1 { background: #E8F5EE; color: #1A5C3A; }
   .bx2 { background: #FEF3E2; color: #7A4000; }
   .bx3 { background: #EDE9FE; color: #4C1D95; }
   .bx4 { background: #FCE7F3; color: #831843; }
   .bx5 { background: #E0F2FE; color: #0C4A6E; }
   
   .dev-chip {
     display: inline-flex; align-items: center; gap: 4px;
     background: var(--color-background-secondary);
     border: 0.5px solid var(--color-border-tertiary);
     border-radius: 20px; padding: 2px 8px;
     font-size: 10px; color: var(--color-text-secondary);
     white-space: nowrap;
   }
   .dev-chip i { font-size: 11px; }
   
   .ab { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 3px; display: inline-flex; border-radius: 4px; }
   .ab:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
   .ab.dl:hover { color: #E24B4A; }
   .upd-txt { font-size: 11px; color: var(--color-text-secondary); }
   .empty { text-align: center; padding: 2rem; color: var(--color-text-secondary); font-size: 13px; }
   
   /* ── Modal ── */
   .mbg {
     display: none; position: fixed; inset: 0;
     background: rgba(0,0,0,.38); z-index: 100;
     align-items: flex-start; justify-content: center;
     padding-top: 40px;
   }
   .mbg.open { display: flex; }
   .modal {
     background: var(--color-background-primary);
     border-radius: var(--border-radius-lg);
     border: 0.5px solid var(--color-border-secondary);
     width: 100%; max-width: 468px; padding: 1.25rem;
     max-height: 90vh; overflow-y: auto;
   }
   .mhdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
   .mtitle { font-size: 15px; font-weight: 500; }
   .cbtn { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); }
   
   .fg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
   .fgi { display: flex; flex-direction: column; gap: 4px; }
   .fgi.full { grid-column: 1 / -1; }
   label { font-size: 12px; color: var(--color-text-secondary); }
   
   .piw { position: relative; }
   .piw input { padding-right: 36px; }
   .ptog {
     position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
     background: none; border: none; cursor: pointer; color: var(--color-text-secondary);
   }
   
   .br { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; }
   .bcancel {
     padding: 0 16px; height: 34px;
     background: var(--color-background-primary);
     border: 0.5px solid var(--color-border-secondary);
     border-radius: var(--border-radius-md);
     cursor: pointer; color: var(--color-text-primary);
   }
   .bsave {
     padding: 0 16px; height: 34px;
     background: var(--color-text-primary); color: var(--color-background-primary);
     border: none; border-radius: var(--border-radius-md);
     cursor: pointer; font-size: 13px; font-weight: 500;
     display: flex; align-items: center; gap: 5px;
   }
   .bsave:hover { opacity: .85; }
   
   /* ── Toast ── */
   .toast {
     position: fixed; bottom: 1.25rem; right: 1.25rem;
     background: var(--color-text-primary); color: var(--color-background-primary);
     padding: 8px 16px; border-radius: var(--border-radius-md);
     font-size: 13px; opacity: 0; transition: opacity .3s;
     pointer-events: none; z-index: 999;
   }
   .toast.show { opacity: 1; }
   
   /* ── Form helpers ── */
   .req  { color: #E24B4A; font-weight: 400; }
   .ferr { font-size: 11px; color: #E24B4A; margin-top: 3px; display: block; }
   .field-hint { color: var(--color-text-secondary); font-weight: 400; font-size: 10px; margin-left: 4px; }
   .input-disabled {
     opacity: .45 !important;
     cursor: not-allowed !important;
     background: var(--color-background-secondary) !important;
   }
   .td-no  { color: var(--color-text-secondary); }
   .td-sm  { font-size: 12px; }
   .td-xs  { font-size: 11px; }
   .pt-name { font-weight: 500; font-size: 12px; }
   .dash   { color: var(--color-text-secondary); }
   .act-wrap { display: flex; gap: 2px; }
   .eb i, .ab i { font-size: 13px; }
   
   /* =============================================
      AUTH / LOGIN PAGE
      ============================================= */
   .auth-body {
     background: var(--color-bg);
     min-height: 100vh;
   }
   
   .auth-page {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 100vh;
   }
   
   .auth-left {
     background: var(--color-text-primary);
     color: #fff;
     padding: 3rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .auth-brand { display: flex; align-items: center; gap: 10px; }
   .auth-brand-icon {
     width: 36px; height: 36px;
     background: rgba(255,255,255,.12);
     border-radius: var(--border-radius-md);
     display: flex; align-items: center; justify-content: center;
     font-size: 18px;
   }
   .auth-brand-name { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
   
   .auth-tagline { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
   .auth-tagline h1 {
     font-size: clamp(28px, 4vw, 42px);
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: -.5px;
   }
   .auth-tagline h1 span { color: #A8A8A5; }
   .auth-tagline p { font-size: 14px; color: #A8A8A5; line-height: 1.6; max-width: 340px; }
   
   .auth-features { display: flex; flex-direction: column; gap: 8px; }
   .auth-feature {
     display: flex; align-items: center; gap: 8px;
     font-size: 12px; color: #A8A8A5;
   }
   .auth-feature i { font-size: 14px; color: #7A7A78; }
   
   .auth-right {
     display: flex; align-items: center; justify-content: center;
     padding: 2rem;
   }
   .auth-card {
     width: 100%; max-width: 380px;
   }
   .auth-card-header { margin-bottom: 1.5rem; }
   .auth-card-header h2 { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; }
   .auth-card-header p  { font-size: 13px; color: var(--color-text-secondary); }
   
   .alert-error {
     background: #FEF2F2;
     border: 0.5px solid #FECACA;
     border-radius: var(--border-radius-md);
     padding: 10px 14px;
     font-size: 13px;
     color: #B91C1C;
     margin-bottom: 1rem;
     display: flex; align-items: center; gap: 8px;
   }
   
   .auth-form { display: flex; flex-direction: column; gap: 1rem; }
   .form-group { display: flex; flex-direction: column; gap: 5px; }
   .form-group label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
   
   .input-wrap { position: relative; }
   .input-icon {
     position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
     font-size: 15px; color: var(--color-text-secondary); pointer-events: none;
   }
   .input-wrap input { padding-left: 34px; height: 40px; font-size: 13px; }
   .input-eye {
     position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
     background: none; border: none; cursor: pointer;
     color: var(--color-text-secondary); font-size: 15px;
     display: flex; align-items: center;
   }
   
   .form-row-between { display: flex; align-items: center; justify-content: space-between; }
   .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; }
   .checkbox-label input[type="checkbox"] { width: auto; }
   
   .btn-login {
     height: 40px;
     background: var(--color-text-primary);
     color: #fff;
     border: none;
     border-radius: var(--border-radius-md);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     display: flex; align-items: center; justify-content: center; gap: 6px;
     transition: opacity .15s;
     margin-top: 4px;
   }
   .btn-login:hover { opacity: .85; }
   
   @media (max-width: 768px) {
     .auth-page { grid-template-columns: 1fr; }
     .auth-left { display: none; }
     .shell { flex-direction: column; }
     .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 0.5px solid var(--color-border-tertiary); }
     .main-content { padding: 0 1rem 2rem; }
     .stats-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
   }