/*
 * app.css — Asset Manager Design System
 *
 * Design: Apple HIG inspired, premium feel
 * Palette: Neutral grays + single accent blue
 * Spacing: 4px grid system
 * Radius: 8/12/16/20px progressive
 *
 * Copyright (c) 2026 Charles Kwon / MEDiThings Inc.
 */

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

/* ── Root Variables ── */
:root {
   /*
    * Design Philosophy: "Quiet Confidence"
    *
    * - Colors whisper, never shout
    * - Hierarchy through weight and space, not saturation
    * - Status is communicated through subtle tint, not neon
    * - Every pixel is intentional
    * - Inspired by: Linear, Vercel, Raycast
    */

   /* Surface layers — progressive elevation */
   --bg-primary: #09090b;
   --bg-secondary: #18181b;
   --bg-tertiary: #27272a;
   --bg-hover: rgba(255, 255, 255, 0.04);
   --bg-active: rgba(59, 130, 246, 0.08);

   /* Typography — high contrast, deliberate hierarchy */
   --text-primary: #fafafa;
   --text-secondary: #a1a1aa;
   --text-tertiary: #52525b;
   --text-inverse: #09090b;

   /* Accent — restrained blue */
   --accent: #3b82f6;
   --accent-hover: #60a5fa;
   --accent-light: rgba(59, 130, 246, 0.1);

   /* Borders — barely there */
   --border: #27272a;
   --border-light: #1f1f23;
   --divider: #18181b;

   /* Status — muted, professional tints */
   --status-active: #22c55e;
   --status-active-bg: rgba(34, 197, 94, 0.12);
   --status-active-text: #4ade80;
   --status-stored: #eab308;
   --status-stored-bg: rgba(234, 179, 8, 0.10);
   --status-stored-text: #facc15;
   --status-repair: #ef4444;
   --status-repair-bg: rgba(239, 68, 68, 0.10);
   --status-repair-text: #f87171;
   --status-disposed: #71717a;
   --status-disposed-bg: rgba(113, 113, 122, 0.12);
   --status-disposed-text: #a1a1aa;

   /* Shadows — subtle, layered depth */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
   --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4);

   /* Spacing (4px grid) */
   --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 */
   --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;  --r-xl: 20px; --r-full: 100px;

   /* Transitions */
   --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
   --duration: 0.2s;
}

/* ── Body ── */
body {
   background: var(--bg-primary);
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.47;
   letter-spacing: -0.022em;
}

/* ── Typography ── */
h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Header ── */
.header {
   background: rgba(24, 24, 27, 0.8);
   backdrop-filter: saturate(150%) blur(20px);
   -webkit-backdrop-filter: saturate(150%) blur(20px);
   border-bottom: 0.5px solid var(--border);
   padding: var(--sp-3) var(--sp-5);
   display: flex; align-items: center; gap: var(--sp-3);
   position: sticky; top: 0; z-index: 20;
   height: 52px;
}
.header h1 { white-space: nowrap; }
.header .company { font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-top: -2px; }
.header-spacer { flex: 1; }

/* ── Search ── */
.search-box {
   display: flex; align-items: center;
   background: var(--divider); border-radius: var(--r-sm);
   padding: 6px var(--sp-3); max-width: 260px; flex: 1;
   transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.search-box:focus-within {
   background: var(--bg-secondary);
   box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.search-box input {
   border: none; background: none; font-size: 14px; width: 100%; outline: none;
   color: var(--text-primary);
   caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--text-tertiary); }

/* ── Buttons ── */
.btn {
   display: inline-flex; align-items: center; gap: var(--sp-1);
   padding: 7px var(--sp-4); border: none; border-radius: var(--r-sm);
   font-size: 13px; font-weight: 500; cursor: pointer;
   transition: all var(--duration) var(--ease);
   white-space: nowrap;
}
.btn-primary {
   background: var(--accent); color: #ffffff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { opacity: 0.8; }
.btn-ghost { background: none; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-light); }
.btn-danger { background: none; color: var(--status-repair); }
.btn-danger:hover { background: rgba(255, 59, 48, 0.08); }
.btn-sm { padding: 5px var(--sp-3); font-size: 12px; }
.btn-icon {
   padding: 6px 8px; background: none; border: 1px solid var(--text-tertiary);
   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: var(--accent); color: var(--accent); }
.btn-icon.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

/* ── Cards (Container) ── */
.card {
   background: var(--bg-secondary); border-radius: var(--r-md);
   box-shadow: var(--shadow-sm); overflow: hidden;
   transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card-padded { padding: var(--sp-6); }

/* ── Asset Cards (Pinterest) ── */
.cards { column-count: 4; column-gap: var(--sp-3); }
.asset-card {
   break-inside: avoid; background: var(--bg-secondary); border-radius: var(--r-md);
   overflow: hidden; margin-bottom: var(--sp-3); cursor: pointer;
   box-shadow: var(--shadow-sm);
   transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.asset-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card-photo {
   width: 100%; aspect-ratio: 4/3; background: var(--divider);
   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: var(--sp-3) var(--sp-4) var(--sp-4); }
.card-name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; color: var(--text-primary); }
.card-category { font-size: 11px; color: var(--text-tertiary); margin-bottom: var(--sp-2); }
.card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.card-price { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.card-user { font-size: 11px; color: var(--text-tertiary); }

/* ── Badge ── */
.badge {
   display: inline-flex; align-items: center; gap: 3px;
   padding: 3px 10px; border-radius: var(--r-full);
   font-size: 11px; font-weight: 500;
   letter-spacing: 0.01em;
}
.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);
   border-right: 0.5px solid var(--border-light);
   overflow-y: auto; flex-shrink: 0;
   padding-bottom: var(--sp-10);
}
.sidebar h3 { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.cat-item {
   display: flex; align-items: center; padding: 7px var(--sp-4);
   cursor: pointer; font-size: 13px; gap: var(--sp-2);
   transition: all 0.15s var(--ease); border-radius: 0;
   color: var(--text-primary);
}
.cat-item:hover { background: var(--bg-hover); }
.cat-item.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.cat-item .count {
   margin-left: auto; font-size: 11px; color: var(--text-tertiary);
   background: var(--divider); padding: 1px 7px; border-radius: var(--r-full);
   font-weight: 500;
}
.cat-item.active .count { background: rgba(0, 113, 227, 0.12); 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: 6px; padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.status-chip {
   padding: 4px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 500;
   cursor: pointer; border: 1px solid var(--border); background: var(--bg-secondary);
   transition: all 0.15s var(--ease);
}
.status-chip:hover { border-color: var(--text-tertiary); }
.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-5) auto; padding: 0 var(--sp-4); }
.container-sm { max-width: 700px; margin: var(--sp-5) auto; padding: 0 var(--sp-4); }

/* ── Card Sections ── */
.card-padded h2 { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--sp-4); }
.card + .card { margin-top: var(--sp-4); }

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

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

/* ── List Table ── */
.list-table {
   display: none; width: 100%; border-collapse: separate; border-spacing: 0;
   background: var(--bg-secondary); border-radius: var(--r-md); overflow: hidden;
   box-shadow: var(--shadow-sm);
}
.list-table th {
   padding: var(--sp-3) var(--sp-4); text-align: left;
   font-size: 11px; font-weight: 600; color: var(--text-tertiary);
   text-transform: uppercase; letter-spacing: 0.04em;
   background: var(--bg-tertiary); cursor: pointer;
   border-bottom: 0.5px solid var(--border-light);
   white-space: nowrap; user-select: none;
}
.list-table th:hover { color: var(--accent); }
.list-table td {
   padding: var(--sp-3) var(--sp-4); font-size: 13px;
   border-bottom: 0.5px solid var(--divider);
}
.list-table tr:last-child td { border-bottom: none; }
.list-table tbody tr { transition: background 0.1s; cursor: pointer; }
.list-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: 4px; padding: var(--sp-5) 0; }
.pagination button {
   padding: 5px 11px; border: 1px solid var(--border); border-radius: 6px;
   background: var(--bg-secondary); cursor: pointer; font-size: 13px;
   transition: all 0.15s var(--ease);
}
.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination button.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.3; cursor: default; }

/* ── Modal ── */
.modal-overlay {
   position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
   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-lg);
   padding: var(--sp-6); width: 90%; max-width: 420px;
   box-shadow: var(--shadow-xl);
   animation: modalIn 0.25s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } }
.modal h2 { font-size: 17px; margin-bottom: var(--sp-5); }
.modal-footer { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }

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

/* ── 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: 600; cursor: pointer;
   transition: transform 0.15s var(--ease);
}
.user-avatar:hover { transform: scale(1.05); }

/* ── Dropdown ── */
.dropdown {
   position: absolute; right: 0; top: 40px;
   background: var(--bg-secondary); border-radius: var(--r-md);
   box-shadow: var(--shadow-xl); min-width: 200px;
   display: none; overflow: hidden; z-index: 30;
   border: 0.5px solid var(--border-light);
   animation: dropIn 0.15s var(--ease);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } }
.dropdown.show { display: block; }
.dropdown a {
   display: flex; align-items: center; padding: 10px var(--sp-4);
   color: var(--text-primary); text-decoration: none; font-size: 13px;
   transition: background 0.1s;
}
.dropdown a:hover { background: var(--bg-hover); }
.dropdown hr { border: none; border-top: 0.5px solid var(--divider); margin: var(--sp-1) 0; }

/* ── Tree (Categories) ── */
.tree-item {
   display: flex; align-items: center; padding: 10px var(--sp-4);
   border-bottom: 0.5px solid var(--divider); cursor: pointer;
   transition: background 0.1s var(--ease);
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item:last-child { border-bottom: none; }
.tree-item.depth-1 { padding-left: var(--sp-4); font-weight: 600; }
.tree-item.depth-2 { padding-left: 40px; }
.tree-item.depth-3 { padding-left: 64px; font-size: 13px; color: var(--text-secondary); }
.tree-icon { width: 24px; text-align: center; margin-right: var(--sp-2); }
.tree-name { flex: 1; }
.tree-name-en { font-size: 11px; color: var(--text-tertiary); margin-left: var(--sp-2); }
.tree-code { font-size: 11px; color: var(--text-tertiary); margin-right: var(--sp-3); font-family: monospace; min-width: 56px; }
.tree-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.tree-item:hover .tree-actions { opacity: 1; }
.tree-actions button {
   background: none; border: 1px solid var(--border); border-radius: 6px;
   padding: 3px 7px; cursor: pointer; color: var(--text-secondary);
   transition: all 0.15s;
}
.tree-actions button:hover { border-color: var(--accent); color: var(--accent); }
.tree-actions button.del:hover { border-color: var(--status-repair); color: var(--status-repair); }

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

/* ── No Data ── */
.no-data { text-align: center; padding: 60px var(--sp-5); color: var(--text-tertiary); }
.no-data .icon { font-size: 48px; margin-bottom: var(--sp-3); opacity: 0.5; }

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

/* ── Mobile Overlay ── */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 14; }
.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: 180px; }
   .header .company { display: none; }
   .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: 16px; }
   .search-box { max-width: 130px; }
}

/* ── Login Page ── */
.login-bg {
   background: var(--bg-primary);
   min-height: 100vh; display: flex; align-items: center; justify-content: center;
   padding: var(--sp-5);
}
.login-card {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: 40px; width: 100%; max-width: 380px;
   box-shadow: var(--shadow-xl);
}
.login-card .logo { text-align: center; margin-bottom: var(--sp-8); }
.login-card .logo h1 { font-size: 24px; }
.login-card .logo p { font-size: 12px; color: var(--text-tertiary); margin-top: var(--sp-1); font-weight: 500; }
.login-card .btn-login {
   width: 100%; padding: 13px; border: none; border-radius: var(--r-sm);
   background: var(--accent); color: #ffffff;
   font-size: 15px; font-weight: 600; cursor: pointer;
   transition: all var(--duration) var(--ease);
}
.login-card .btn-login:hover { background: var(--accent-hover); }
.login-card .btn-login:active { opacity: 0.8; }
.login-card .btn-login:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.error-msg {
   background: rgba(255, 59, 48, 0.08); color: var(--status-repair);
   border-radius: var(--r-sm); padding: 10px var(--sp-4); font-size: 13px;
   margin-bottom: var(--sp-4); 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-6);
}
.remember-row label { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; color: var(--text-secondary); }
.remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.lang-toggle { text-align: center; margin-top: var(--sp-5); }
.lang-toggle button { background: none; border: none; color: var(--text-tertiary); font-size: 12px; cursor: pointer; padding: 4px 8px; }
.lang-toggle button.active { color: var(--accent); font-weight: 600; }

@media (max-width: 480px) {
   .login-card { padding: var(--sp-6) var(--sp-5); 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; }
}