/*
 * app.css — Asset Manager Design System
 *
 * Design: Maison Luxury — True Fashion House Digital
 * Philosophy: "Quiet Luxury, Absolute Refinement"
 * Palette: Deep warm blacks + champagne gold accent
 * Typography: Refined weight, generous tracking, couture hierarchy
 * References: Louis Vuitton digital, Hermes.com, Bottega Veneta
 *
 * Copyright (c) 2026 Charles Kwon / MEDiThings Inc.
 */

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

/* ── Root Variables ── */
:root {
   /*
    * Design Philosophy: "Quiet Luxury, Absolute Refinement"
    *
    * - Warm darkness as sanctuary — never cold, never clinical
    * - Gold as earned distinction — singular, deliberate
    * - Typography breathes like a fashion editorial
    * - Movement is felt, never performed
    * - Inspired by: Hermès noir, Bottega Veneta, Louis Vuitton digital
    */

   /* Surface layers — warm progressive elevation */
   --bg-primary: #080808;
   --bg-secondary: #121210;
   --bg-tertiary: #1c1a18;
   --bg-hover: rgba(255, 248, 240, 0.025);
   --bg-active: rgba(201, 169, 110, 0.06);

   /* Typography — warm refined contrast */
   --text-primary: #e8e4df;
   --text-secondary: #8a8580;
   --text-tertiary: #5a5550;
   --text-inverse: #080808;

   /* Accent — champagne gold, singular luxury tone */
   --accent: #c9a96e;
   --accent-hover: #d4b87a;
   --accent-light: rgba(201, 169, 110, 0.08);

   /* Borders — warm, barely perceptible */
   --border: rgba(255, 248, 240, 0.06);
   --border-light: rgba(255, 248, 240, 0.04);
   --divider: rgba(255, 248, 240, 0.03);

   /* Status — ultra-muted, whispered tints (5% bg, 50% text) */
   --status-active: #22c55e;
   --status-active-bg: rgba(34, 197, 94, 0.05);
   --status-active-text: rgba(34, 197, 94, 0.5);
   --status-stored: #eab308;
   --status-stored-bg: rgba(234, 179, 8, 0.05);
   --status-stored-text: rgba(234, 179, 8, 0.5);
   --status-repair: #ef4444;
   --status-repair-bg: rgba(239, 68, 68, 0.05);
   --status-repair-text: rgba(239, 68, 68, 0.5);
   --status-disposed: #71717a;
   --status-disposed-bg: rgba(113, 113, 122, 0.05);
   --status-disposed-text: rgba(113, 113, 122, 0.5);

   /* Shadows — barely there, depth through warmth */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.18);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.22);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.35);

   /* Spacing (4px grid, generous) */
   --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
   --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

   /* Radius — refined, slightly tighter */
   --r-sm: 8px;  --r-md: 12px; --r-lg: 12px;  --r-xl: 16px; --r-full: 100px;

   /* Transitions — imperceptible smoothness */
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
   --duration: 0.2s;

   /* ── Theming primitives (라이트/다크 전환의 축) ──
    * 색을 직접 쓰지 말고 아래 토큰을 쓸 것. [data-theme="light"] 가 이 값만 뒤집는다.
    * --accent-rgb / --tint-rgb 는 rgba(var(--x), 알파) 형태로 농도 조절해 사용. */
   --accent-rgb: 201, 169, 110;      /* 샴페인 골드 */
   --tint-rgb: 255, 248, 240;        /* 표면 위 오버레이(다크=밝게, 라이트=어둡게) */

   --glass-bg: rgba(8, 8, 8, 0.92);       /* 상단 고정 네비 */
   --glass-bg-soft: rgba(8, 8, 8, 0.5);   /* 헤더 */
   --input-bg: rgba(255, 255, 255, 0.02); /* 입력 필드 */
   --border-strong: rgba(255, 248, 240, 0.08);
   --border-stronger: rgba(255, 248, 240, 0.15);
   --tint-weak: rgba(255, 248, 240, 0.01);   /* 표 줄무늬 */
   --tint: rgba(255, 248, 240, 0.02);
   --scrim: rgba(0, 0, 0, 0.55);          /* 모달 뒤 */
   --scrim-soft: rgba(0, 0, 0, 0.45);
   --sheen: rgba(255, 255, 255, 0.10);    /* 버튼 광택 */
   --check-mark: #ffffff;
   --login-bg: #000000;

   --shadow-table: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
   --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
   --shadow-popup: 0 24px 80px rgba(0, 0, 0, 0.6);

   /* ── Semantic signal colors ──
    * 화면 곳곳(인라인 style 포함)에 하드코딩돼 있던 상태색을 토큰으로 승격.
    * 다크는 기존 iOS 계열 비비드 유지, 라이트는 흰 배경 대비 AA(4.5:1+) 값으로 교체. */
   --danger: #ff453a;
   --warn:   #ff9f0a;
   --ok:     #30d158;
   --info:   #0a84ff;
   --purple: #bf5af2;

   color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
 * LIGHT MODE — 장시간 업무용 (data-theme="light")
 *
 * 설계 원칙
 *  1) 순백(#fff) 바탕 금지 — 눈부심·잔상 유발. 따뜻한 종이톤(#f4f2ee)을 바탕으로,
 *     카드/패널을 흰색으로 띄워 다크모드와 반대 방향의 고도(elevation)를 만든다.
 *  2) 골드 액센트는 밝은 배경에서 대비 2:1로 무너진다 → 앤티크 브라스(#8a6526)로 심화.
 *     본문 대비 4.8:1 (WCAG AA 충족) 이면서 브랜드 골드 정체성 유지.
 *  3) 텍스트는 순흑 대신 웜 니어블랙(#1c1a17) — 대비를 낮추지 않으면서 눈의 피로를 줄임.
 *  4) 그림자는 검정이 아니라 잉크톤 + 낮은 알파 — 종이 위 그림자처럼 자연스럽게.
 *  5) 상태색(성공/경고/오류)은 다크모드의 50% 알파로는 흰 배경에서 읽히지 않으므로 진한 색으로 교체.
 * ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
   /* Surface — 종이 위 카드 (다크와 반대: 위로 갈수록 밝음이 아니라 흼) */
   --bg-primary: #f4f2ee;
   --bg-secondary: #ffffff;
   --bg-tertiary: #eae7e1;
   --bg-hover: rgba(28, 26, 23, 0.04);
   --bg-active: rgba(138, 101, 38, 0.08);

   /* Typography — 웜 니어블랙 */
   --text-primary: #1c1a17;
   --text-secondary: #5c564e;
   --text-tertiary: #78716a;   /* 흰 배경 4.8:1 — 흐린 문구도 AA 유지 */
   --text-inverse: #ffffff;

   /* Accent — 앤티크 브라스 (밝은 배경 대비 확보) */
   --accent: #8a6526;
   --accent-hover: #6f5019;
   --accent-light: rgba(138, 101, 38, 0.10);
   --accent-rgb: 138, 101, 38;
   --tint-rgb: 28, 26, 23;

   /* Borders — 잉크 계열 */
   --border: rgba(28, 26, 23, 0.12);
   --border-light: rgba(28, 26, 23, 0.08);
   --divider: rgba(28, 26, 23, 0.06);
   --border-strong: rgba(28, 26, 23, 0.16);
   --border-stronger: rgba(28, 26, 23, 0.28);

   /* Effects */
   --glass-bg: rgba(252, 251, 249, 0.92);
   --glass-bg-soft: rgba(252, 251, 249, 0.72);
   --input-bg: #ffffff;
   --tint-weak: rgba(28, 26, 23, 0.02);
   --tint: rgba(28, 26, 23, 0.035);
   --scrim: rgba(38, 34, 28, 0.35);
   --scrim-soft: rgba(38, 34, 28, 0.25);
   /* 광택은 8% 상한 — 이보다 진하면 액센트 버튼 위 흰 글씨 대비가 4.5:1 아래로 무너짐 */
   --sheen: rgba(255, 255, 255, 0.08);
   --check-mark: #ffffff;
   --login-bg: #eae7e1;

   /* Status — 흰 배경에서 읽히는 진한 톤 */
   --status-active-bg: rgba(34, 197, 94, 0.12);
   --status-active-text: #15803d;
   --status-stored-bg: rgba(234, 179, 8, 0.16);
   --status-stored-text: #a16207;
   --status-repair-bg: rgba(239, 68, 68, 0.10);
   --status-repair-text: #b91c1c;
   --status-disposed-bg: rgba(113, 113, 122, 0.10);
   --status-disposed-text: #52525b;

   /* Shadows — 잉크톤 저알파 */
   --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
   --shadow-md: 0 2px 8px rgba(28, 26, 23, 0.08);
   --shadow-lg: 0 4px 16px rgba(28, 26, 23, 0.10);
   --shadow-xl: 0 12px 32px rgba(28, 26, 23, 0.14);
   --shadow-table: 0 1px 3px rgba(28, 26, 23, 0.06);
   --shadow-card-hover: 0 4px 20px rgba(28, 26, 23, 0.10);
   --shadow-modal: 0 20px 60px rgba(28, 26, 23, 0.18);
   --shadow-popup: 0 24px 80px rgba(28, 26, 23, 0.22);

   /* Signal — 흰 배경 대비 검증치 (vs #fff): 5.6 / 5.2 / 5.4 / 6.2 / 6.0 : 1 */
   --danger: #c62828;
   --warn:   #a15c00;
   --ok:     #1b7a34;
   --info:   #0b5fbf;
   --purple: #7b2fb5;

   color-scheme: light;
}

/* ── Body ── */
body {
   background: var(--bg-primary);
   color: var(--text-primary);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 300;
   line-height: 1.5;
   letter-spacing: 0.01em;
}

/* ── Scrollbars — thin, golden tint ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.15); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.25); }

/* ── Typography ── */
h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 11px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── Header ── */
.header {
   background: var(--glass-bg-soft);
   backdrop-filter: saturate(120%) blur(30px);
   -webkit-backdrop-filter: saturate(120%) blur(30px);
   border-bottom: 1px solid transparent;
   padding: 0 var(--sp-6);
   display: flex; align-items: center; gap: var(--sp-3);
   position: sticky; top: 0; z-index: 20;
   height: 52px; flex-wrap: nowrap;
}
.header h1 { white-space: nowrap; font-weight: 500; letter-spacing: -0.02em; }
.header .company { font-size: 10px; color: var(--text-tertiary); font-weight: 400; margin-top: -1px; letter-spacing: 0.12em; text-transform: uppercase; }
.header-spacer { flex: 1; }

/* ── Search ── */
.search-box {
   display: flex; align-items: center;
   background: var(--input-bg); border-radius: var(--r-sm);
   padding: 8px var(--sp-4); max-width: 280px; flex: 1;
   border: 1px solid var(--border-strong);
   transition: all var(--duration) var(--ease);
}
.search-box:focus-within {
   background: var(--bg-secondary);
   border-color: rgba(var(--accent-rgb), 0.2);
   box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.search-box input {
   border: none; background: none; font-size: 14px; width: 100%; outline: none;
   color: var(--text-primary); font-weight: 300; letter-spacing: 0.01em;
   caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--text-tertiary); font-weight: 300; }

/* ── Buttons ── */
.btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   padding: 0 var(--sp-5); height: 34px; border: none; border-radius: var(--r-sm);
   font-size: 13px; font-weight: 400; cursor: pointer;
   letter-spacing: 0.01em;
   transition: all var(--duration) var(--ease);
   white-space: nowrap;
}
.btn-primary {
   background: var(--accent); color: var(--text-inverse);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { opacity: 0.85; }
.btn-ghost { background: none; color: var(--accent); border: none; }
.btn-ghost:hover { color: var(--accent-hover); }
.btn-danger { background: none; color: var(--status-repair-text); border: none; }
.btn-danger:hover { color: var(--status-repair); }
.btn-sm { padding: 0 var(--sp-4); font-size: 12px; height: 32px; }
.btn-icon {
   padding: 0 10px; height: 32px; background: none; border: 1px solid var(--border);
   border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
   display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { border-color: rgba(var(--accent-rgb), 0.15); color: var(--text-primary); }
.btn-icon.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

/* ── Cards (Container) ── */
.card {
   background: var(--bg-secondary); border-radius: var(--r-lg);
   overflow: hidden;
   transition: background var(--duration) var(--ease);
}
.card-padded { padding: var(--sp-8); }

/* ── Asset Cards (Pinterest) ── */
.cards { column-count: 4; column-gap: var(--sp-4); }
.asset-card {
   break-inside: avoid; background: var(--bg-secondary); border-radius: 12px;
   overflow: hidden; margin-bottom: var(--sp-4); cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.asset-card:hover { background: var(--bg-tertiary); }

.card-photo {
   width: 100%; aspect-ratio: 4/3; background: var(--bg-tertiary);
   display: flex; align-items: center; justify-content: center;
   color: var(--text-tertiary); overflow: hidden;
   position: relative;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 18px; }
.card-name { font-size: 16px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; color: var(--text-primary); }
.card-category { font-size: 12px; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.02em; }

/* ── Badge ── */
.badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 4px 12px; border-radius: var(--r-full);
   font-size: 12px; font-weight: 400;
   letter-spacing: 0.04em;
}
.badge-in_use { background: var(--status-active-bg); color: var(--status-active-text); }
.badge-stored { background: var(--status-stored-bg); color: var(--status-stored-text); }
.badge-repair { background: var(--status-repair-bg); color: var(--status-repair-text); }
.badge-disposed { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Layout ── */
.layout { display: flex; min-height: calc(100vh - 52px); }

/* ── Sidebar ── */
.sidebar {
   width: 240px; background: var(--bg-secondary);
   overflow-y: auto; flex-shrink: 0;
   padding-bottom: var(--sp-10);
   border-right: none;
}
.sidebar h3 { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.cat-item {
   display: flex; align-items: center; padding: 9px var(--sp-5);
   cursor: pointer; font-size: 13px; gap: var(--sp-2);
   transition: all var(--duration) var(--ease); border-radius: 0;
   color: var(--text-primary); font-weight: 300;
}
.cat-item:hover { background: var(--bg-hover); }
.cat-item.active { background: var(--accent-light); color: var(--accent); font-weight: 400; }
.cat-item .count {
   margin-left: auto; font-size: 11px; color: var(--text-tertiary);
   background: rgba(var(--tint-rgb), 0.03); padding: 2px 8px; border-radius: var(--r-full);
   font-weight: 300;
}
.cat-item.active .count { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.cat-item.depth-2 { padding-left: var(--sp-8); font-size: 13px; }
.cat-item.depth-3 { padding-left: 48px; font-size: 12px; color: var(--text-secondary); }

/* ── Status Chips ── */
.status-bar { display: flex; gap: 8px; padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.status-chip {
   padding: 5px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 400;
   cursor: pointer; border: 1px solid var(--border); background: transparent;
   transition: all var(--duration) var(--ease);
   letter-spacing: 0.02em;
}
.status-chip:hover { border-color: var(--border-strong); }
.status-chip.active { border-color: transparent; }
.status-chip[data-status="all"].active { background: var(--bg-tertiary); color: var(--text-primary); }
.status-chip[data-status="in_use"].active { background: var(--status-active-bg); color: var(--status-active-text); }
.status-chip[data-status="stored"].active { background: var(--status-stored-bg); color: var(--status-stored-text); }
.status-chip[data-status="repair"].active { background: var(--status-repair-bg); color: var(--status-repair-text); }
.status-chip[data-status="disposed"].active { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Container ── */
.container { max-width: 800px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }
.container-sm { max-width: 700px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }

/* ── Card Sections ── */
.card-padded h2 {
   font-size: 12px; color: var(--accent); margin-bottom: var(--sp-5); font-weight: 400;
   text-transform: uppercase; letter-spacing: 0.12em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.card + .card { margin-top: var(--sp-4); }

/* ── Header Actions ── */
.header-right { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }
.header-actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }

/* ── Content ── */
.content { flex: 1; padding: var(--sp-5); overflow-y: auto; }
.content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.content-header .total { font-size: 13px; color: var(--text-secondary); font-weight: 300; }

/* ── List Table ── */
.list-table {
   display: none; width: 100%; border-collapse: separate; border-spacing: 0;
   background: var(--bg-secondary); border-radius: var(--r-lg); overflow: hidden;
}
.list-table th {
   padding: var(--sp-3) var(--sp-5); text-align: left;
   font-size: 10px; font-weight: 400; color: var(--accent);
   text-transform: uppercase; letter-spacing: 0.12em;
   background: var(--bg-tertiary); cursor: pointer;
   white-space: nowrap; user-select: none;
}
.list-table th:hover { color: var(--accent); }
.list-table td {
   padding: var(--sp-3) var(--sp-5); font-size: 13px;
   font-weight: 300;
}
.list-table tr:last-child td { border-bottom: none; }
.list-table tbody tr { transition: background var(--duration) var(--ease); cursor: pointer; }
.list-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: 6px; padding: var(--sp-8) 0; }
.pagination button {
   padding: 6px 13px; border: 1px solid rgba(var(--tint-rgb), 0.04); border-radius: var(--r-sm);
   background: transparent; cursor: pointer; font-size: 12px; font-weight: 300;
   color: var(--text-tertiary);
   transition: all var(--duration) var(--ease);
}
.pagination button:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); }
.pagination button.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.15; cursor: default; }

/* ── Modal ── */
.modal-overlay {
   position: fixed; inset: 0; background: var(--scrim);
   backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
   display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: var(--sp-8); width: 90%; max-width: 440px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(var(--accent-rgb), 0.1);
   animation: modalIn 0.2s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } }
.modal h2 {
   font-size: 12px; color: var(--accent); margin-bottom: var(--sp-6); font-weight: 400;
   text-transform: uppercase; letter-spacing: 0.12em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.modal-footer { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-6); }

/* ── Form ── */
.form-group { margin-bottom: var(--sp-5); }
.form-group label {
   display: block; font-size: 10px; font-weight: 400;
   color: var(--accent); margin-bottom: 6px;
   letter-spacing: 0.12em; text-transform: uppercase;
}
.form-group label.required::after { content: ' *'; color: var(--status-repair-text); }
.form-group input, .form-group select, .form-group textarea {
   width: 100%; padding: 14px var(--sp-4);
   border: 1px solid var(--border-strong); border-radius: var(--r-sm);
   font-size: 15px; font-family: inherit; font-weight: 300;
   transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
   -webkit-appearance: none; appearance: none;
   background: var(--input-bg);
   color: var(--text-primary);
   caret-color: var(--accent);
   letter-spacing: 0.01em;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
   outline: none; border-color: rgba(var(--accent-rgb), 0.2);
   box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select option { background: var(--bg-secondary); color: var(--text-primary); }
.form-row { display: flex; gap: var(--sp-4); }

/* ── User Avatar ── */
.user-menu { position: relative; }
.user-avatar {
   width: 32px; height: 32px; border-radius: var(--r-full);
   background: var(--accent);
   color: var(--text-inverse);
   display: flex; align-items: center; justify-content: center;
   font-size: 13px; font-weight: 400; cursor: pointer;
   transition: opacity var(--duration) var(--ease);
}
.user-avatar:hover { opacity: 0.85; }

/* ── Dropdown ── */
.dropdown {
   position: absolute; right: 0; top: 44px;
   background: var(--bg-secondary); border-radius: var(--r-md);
   box-shadow: var(--shadow-xl); min-width: 210px;
   display: none; overflow: hidden; z-index: 30;
   border: 1px solid rgba(var(--accent-rgb), 0.08);
   animation: dropIn 0.2s var(--ease);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
.dropdown.show { display: block; }
.dropdown a {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 300;
   transition: background var(--duration) var(--ease);
}
.dropdown a:hover { background: var(--bg-hover); }
.dropdown hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-1) 0; }

/* ── Tree (Categories) ── */
.tree-item {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item:last-child { border-bottom: none; }
.tree-item.depth-1 { padding-left: var(--sp-5); font-weight: 400; }
.tree-item.depth-2 { padding-left: 44px; }
.tree-item.depth-3 { padding-left: 68px; font-size: 13px; color: var(--text-secondary); }
.tree-icon { width: 24px; text-align: center; margin-right: var(--sp-2); }
.tree-name { flex: 1; font-weight: 300; }
.tree-name-en { font-size: 11px; color: var(--text-tertiary); margin-left: var(--sp-2); font-weight: 300; }
.tree-code { font-size: 11px; color: var(--text-tertiary); margin-right: var(--sp-3); font-family: monospace; min-width: 56px; font-weight: 300; }
.tree-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--duration) var(--ease); }
.tree-item:hover .tree-actions { opacity: 1; }
.tree-actions button {
   background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
   padding: 4px 8px; cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
}
.tree-actions button:hover { border-color: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.tree-actions button.del:hover { border-color: rgba(239, 68, 68, 0.2); color: var(--status-repair-text); }

/* ── Language Toggle ── */
#langToggle { display: inline-flex; align-items: center; }
.lang-toggle {
   display: inline-flex; align-items: center; border: 1px solid var(--border);
   border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 300;
   height: 32px; vertical-align: middle;
}
.lang-toggle button {
   padding: 0 10px; border: none; background: none; cursor: pointer;
   color: var(--text-secondary); transition: all var(--duration) var(--ease);
   font-size: 11px; font-weight: 400; height: 100%;
}
.lang-toggle button.active { background: var(--accent); color: var(--text-inverse) !important; }
.lang-toggle button:not(.active) { background: var(--bg-tertiary); color: var(--text-secondary) !important; }
.lang-toggle button:not(.active):hover { color: var(--text-primary) !important; }

/* ── Checkbox — Gold Luxury ── */
input[type="checkbox"] {
   -webkit-appearance: none; appearance: none;
   width: 16px; height: 16px; border: 1px solid var(--border-stronger);
   border-radius: 4px; background: transparent; cursor: pointer;
   position: relative; vertical-align: middle; flex-shrink: 0;
   transition: all var(--duration) var(--ease);
}
input[type="checkbox"]:checked {
   background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
   content: '';
   position: absolute; top: 50%; left: 50%;
   width: 4px; height: 8px;
   border: solid var(--check-mark); border-width: 0 1.5px 1.5px 0;
   transform: translate(-50%, -60%) rotate(45deg);
}
input[type="checkbox"]:hover { border-color: rgba(var(--accent-rgb), 0.3); }

/* ── Status Radio Group ── */
.status-group { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.status-option { display: flex; align-items: center; gap: 6px; }
.status-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }
.status-option label { font-size: 14px; cursor: pointer; font-weight: 300; }

/* ── No Data ── */
.no-data { text-align: center; padding: 80px var(--sp-6); color: var(--text-tertiary); }
.no-data .icon { font-size: 48px; margin-bottom: var(--sp-4); opacity: 0.3; }

/* ── Back Link ── */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 300; }

/* ── Mobile Overlay ── */
.overlay { display: none; position: fixed; inset: 0; background: var(--scrim-soft); z-index: 14; backdrop-filter: blur(6px); }
.overlay.show { display: block; }
.sidebar.mobile-show {
   display: block; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 15;
   box-shadow: var(--shadow-xl);
}

/* ── Responsive ── */
@media (max-width: 1024px) { .cards { column-count: 3; } }
@media (max-width: 768px) {
   .sidebar { display: none; }
   .cards { column-count: 2; }
   .search-box { max-width: 160px; }
   .header .company { display: none; }
   .header h1 { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
   .lang-toggle button { padding: 3px 7px; font-size: 10px; }
   .tree-actions { opacity: 1; }
   .tree-name-en { display: none; }
}
@media (max-width: 480px) {
   .cards { column-count: 1; }
   .form-row { flex-direction: column; gap: 0; }
   .header h1 { font-size: 15px; }
   .header { padding: 0 var(--sp-4); gap: var(--sp-2); }
   .search-box { max-width: 120px; padding: 6px 10px; }
   .search-box input { font-size: 13px; }
   .btn-sm { padding: 5px 10px; font-size: 11px; }
}

/* ── Login Page ── */
.login-bg {
   background: var(--login-bg);
   min-height: 100vh; display: flex; align-items: center; justify-content: center;
   padding: var(--sp-6);
}
.login-card {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: 48px; width: 100%; max-width: 400px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.login-card .logo { text-align: center; margin-bottom: var(--sp-10); }
.login-card .logo h1 { font-size: 24px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.login-card .logo p { font-size: 11px; color: var(--text-tertiary); margin-top: var(--sp-2); font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.login-card .btn-login {
   width: 100%; padding: 14px; border: none; border-radius: var(--r-sm);
   background: var(--accent); color: var(--text-inverse);
   font-size: 14px; font-weight: 400; cursor: pointer; letter-spacing: 0.06em;
   transition: all var(--duration) var(--ease);
}
.login-card .btn-login:hover { background: var(--accent-hover); }
.login-card .btn-login:active { opacity: 0.85; }
.login-card .btn-login:disabled { opacity: 0.3; cursor: not-allowed; }
.error-msg {
   background: rgba(239, 68, 68, 0.05); color: var(--status-repair-text);
   border-radius: var(--r-sm); padding: 12px var(--sp-5); font-size: 13px; font-weight: 300;
   margin-bottom: var(--sp-5); display: none; text-align: center;
}
.error-msg.show { display: block; }
.remember-row {
   display: flex; align-items: center; justify-content: space-between;
   margin-bottom: var(--sp-8);
}
.remember-row label { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; color: var(--text-secondary); font-weight: 300; }
.remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.login-lang { text-align: center; margin-top: var(--sp-6); }

@media (max-width: 480px) {
   .login-card { padding: var(--sp-8) var(--sp-6); border-radius: var(--r-lg); }
}

/* ── Print ── */
@media print {
   .header, .sidebar, .pagination, .search-box, .btn, .tree-actions { display: none !important; }
   .content { padding: 0; }
   .cards { column-count: 2; }
   .card, .asset-card { box-shadow: none; border: 1px solid #ddd; }
}