/* ============================================================
   BASE.CSS — Dùng chung cho toàn bộ trang trong "Kho lưu trữ cá nhân"
   Chứa: design token, reset, sidebar app-shell, các component lặp lại
   nhiều nơi (button, modal xác nhận, toast, toggle, ô tìm kiếm, filter
   chip, field input, empty state). Mỗi trang chỉ cần thêm 1 file CSS
   riêng (vd: notes-list.css) cho phần layout đặc thù của trang đó.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1B2430;
  --ink-soft:#5B6472;
  --paper:#EDEAE3;
  --surface:#FBFAF7;
  --line:#D8D3C8;
  --line-strong:#BDB6A6;
  --accent:#3F5D53;
  --accent-soft:#E4EAE6;
  --gold:#B8863B;
  --gold-soft:#F3E9D6;
  --danger:#9A4B3E;
  --danger-soft:#F3E4E1;
  --radius:6px;
}

/* ---------- Reset & nền tảng ---------- */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Khung ứng dụng (app shell): sidebar + main ---------- */
.app{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}

.sidebar{background:var(--surface); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column;}
.brand{font-family:'Source Serif 4', serif; font-size:17px; font-weight:600; display:flex; align-items:center; gap:7px; margin-bottom:22px;}
.brand .mark{width:7px;height:7px;background:var(--accent);border-radius:1px;}

.nav-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius); color:var(--ink-soft); font-size:13px; cursor:pointer; margin-bottom:2px;}
.nav-item svg{flex-shrink:0;}
.nav-item.active{background:var(--accent-soft); color:var(--accent); font-weight:500;}
.nav-item:hover:not(.active){background:rgba(0,0,0,0.04); color:var(--ink);}
.nav-divider{height:1px; background:var(--line); margin:12px 0;}

.sidebar-section{margin-top:20px;}
.sidebar-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft); margin:0 0 8px 2px;}
.folder-nav-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius); font-size:12.5px; color:var(--ink-soft); cursor:pointer; margin-bottom:1px;}
.folder-nav-item:hover{background:rgba(0,0,0,0.04); color:var(--ink);}
.folder-nav-item.active{background:var(--accent-soft); color:var(--accent); font-weight:500;}
.folder-dot{width:7px;height:7px;border-radius:2px; flex-shrink:0;}
.folder-nav-count{margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:10.5px;}

/* ---------- Tiêu đề trang chuẩn ---------- */
.page-title{font-family:'Source Serif 4', serif; font-size:24px; font-weight:600; margin:0 0 6px 0; display:flex; align-items:center; gap:8px;}
.page-title .mark{width:8px;height:8px;background:var(--accent);border-radius:1px;}
.page-sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 24px 0; line-height:1.6;}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.page-count{font-size:12.5px; color:var(--ink-soft); margin:0 0 20px 0;}

/* ---------- Nút bấm ---------- */
.btn{border:none; border-radius:var(--radius); padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer; font-family:'IBM Plex Sans', sans-serif; transition:background .15s ease, border-color .15s ease;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#354f46;}
.btn-primary:disabled{background:#A9B7B1; cursor:not-allowed;}
.btn-ghost{background:none; color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{background:rgba(0,0,0,0.04);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{background:#833a2f;}
.btn-danger-ghost{background:none; color:var(--danger); border:1px solid var(--danger-soft);}
.btn-danger-ghost:hover{background:var(--danger-soft);}

.btn-new{
  display:flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius); padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif; white-space:nowrap; transition:background .15s ease;
}
.btn-new:hover{background:#354f46;}

/* ---------- Ô tìm kiếm & filter chip ---------- */
.search-box{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; min-width:220px;}
.search-box svg{color:var(--ink-soft); flex-shrink:0;}
.search-box input{border:none; outline:none; background:none; font-size:13px; color:var(--ink); width:100%; font-family:'IBM Plex Sans', sans-serif;}
.search-box input::placeholder{color:var(--ink-soft);}

.filter-chip{display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:all .12s ease;}
.filter-chip:hover{border-color:var(--line-strong); color:var(--ink);}
.filter-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.toolbar-spacer{flex:1;}
.sort-select{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:8px 10px; font-size:12.5px; color:var(--ink); font-family:'IBM Plex Sans', sans-serif; cursor:pointer;}

.view-toggle{display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.view-btn{background:var(--surface); border:none; padding:8px 10px; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center;}
.view-btn.active{background:var(--accent); color:#fff;}
.view-btn:first-child{border-right:1px solid var(--line);}

/* ---------- Field input dùng trong form ---------- */
.field-row{margin-bottom:16px;}
.field-row:last-child{margin-bottom:0;}
.field-label{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); margin:0 0 7px 0;}
.field-input{width:100%; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:9px 11px; font-size:13.5px; font-family:'IBM Plex Sans', sans-serif; color:var(--ink); outline:none; transition:border-color .15s ease;}
.field-input:focus{border-color:var(--accent);}
.field-input:disabled{color:var(--ink-soft); cursor:not-allowed;}
.field-select{width:100%; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:9px 11px; font-size:13.5px; font-family:'IBM Plex Sans', sans-serif; color:var(--ink); outline:none; cursor:pointer;}
.field-hint{font-size:11px; color:var(--ink-soft); margin-top:6px;}

/* ---------- Thẻ (card) chung ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:18px;}
.card-heading{font-size:13px; font-weight:600; margin:0 0 16px 0; display:flex; align-items:center; gap:8px;}
.card-footer{display:flex; justify-content:flex-end; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}

.stat-row{display:flex; gap:12px; margin-bottom:24px;}
.stat-box{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-align:center;}
.stat-num{font-family:'Source Serif 4', serif; font-size:22px; font-weight:600;}
.stat-label{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

/* ---------- Toggle switch ---------- */
.toggle{width:36px;height:20px; background:var(--line-strong); border-radius:10px; position:relative; cursor:pointer; transition:background .15s ease; flex-shrink:0;}
.toggle.on{background:var(--accent);}
.toggle::after{content:''; position:absolute; top:2px; left:2px; width:16px;height:16px; background:#fff; border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.toggle.on::after{transform:translateX(16px);}

.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line);}
.toggle-row:last-child{border-bottom:none;}
.toggle-info{padding-right:16px;}
.toggle-label{font-size:13px; color:var(--ink);}
.toggle-desc{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

/* ---------- Icon action button nhỏ (dùng trong list item) ---------- */
.icon-action-btn{width:30px;height:30px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s ease;}
.icon-action-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.icon-action-btn.danger:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-soft);}

/* ---------- Trạng thái rỗng ---------- */
.empty-state{text-align:center; padding:70px 20px; color:var(--ink-soft);}
.empty-state svg{color:var(--line-strong); margin-bottom:14px;}
.empty-state p{margin:0 0 4px 0; font-size:14px; color:var(--ink);}
.empty-state span{font-size:12.5px;}

/* ---------- Modal xác nhận (xoá, huỷ...) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(27,36,48,0.32); display:none; align-items:center; justify-content:center; z-index:100;}
.modal-overlay.show{display:flex;}
.confirm-modal{width:380px; max-width:90vw; background:var(--surface); border-radius:8px; border:1px solid var(--line); box-shadow:0 20px 45px -12px rgba(27,36,48,0.35); padding:22px;}
.confirm-icon{width:38px;height:38px; border-radius:50%; background:var(--danger-soft); color:var(--danger); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.confirm-title{font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; margin:0 0 8px 0;}
.confirm-text{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 20px 0;}
.confirm-input{width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:9px 11px; font-size:13px; margin-bottom:18px; font-family:'IBM Plex Mono', monospace; outline:none;}
.confirm-input:focus{border-color:var(--danger);}
.confirm-actions{display:flex; gap:10px; justify-content:flex-end;}

/* ---------- Toast thông báo nhỏ ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; padding:9px 16px; border-radius:6px; font-size:12.5px;
  display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Spinner loading dùng chung ---------- */
.spinner{display:inline-block; width:12px;height:12px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:6px;}
.spinner-lg{width:26px;height:26px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 14px auto;}
@keyframes spin{to{transform:rotate(360deg);}}