/* DEVESSA Files — custom theme (ควินน์ 2 ก.ย. 2569, รอบ light)
   แนว: พื้นสว่าง ~80% · indigo เป็น accent ~15% (ปุ่ม/ไฮไลต์/โฟลเดอร์เท่านั้น)
   อิง DESIGN-SYSTEM.md — Prompt font · indigo #4B0082 · burgundy #900024 · gold #C9A24B
   FileBrowser theme = light (ตั้งใน config) + ไฟล์นี้เติม accent
   ลบไฟล์นี้ = กลับ light เปล่า ๆ ของ FileBrowser ทันที */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
  --blue: #4B0082;          /* accent หลัก = indigo */
  --dark-blue: #3A0068;
  --icon-blue: #4B0082;
  --background: #F5F3F8;     /* พื้นหลังรวม เทาอมม่วงจาง */
  --surfacePrimary: #FFFFFF;
  --surfaceSecondary: #FBFAFD;
  --divider: #ECE6F2;
  --textPrimary: #2B2436;
  --textSecondary: #7A6E88;
}

body, #app, input, button, select, textarea {
  font-family: 'Prompt', -apple-system, 'Segoe UI', sans-serif !important;
}
body { background: var(--background) !important; }

/* ---------- แถบบน: ขาว accent indigo บาง ๆ ---------- */
header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #ECE6F2 !important;
  box-shadow: 0 1px 3px rgba(75, 0, 130, 0.05) !important;
  color: #2B2436 !important;
}
#search {
  background: #F5F3F8 !important;
  border: 1px solid #E4DCEC !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
#search:hover, #search.active { border-color: #4B0082 !important; background: #fff !important; }
#search input { color: #2B2436 !important; }
#search input::placeholder { color: #9A8DA8 !important; }
#search .boxes { background: #fff !important; }

/* ---------- ปุ่ม action (เพิ่ม/ลบ/แก้/ดาวน์โหลด ฯลฯ) ---------- */
.action {
  border-radius: 10px !important;
  transition: background .15s ease;
}
.action:hover { background: rgba(75, 0, 130, 0.09) !important; }
.action i { color: #6A5C7A !important; }
.action .counter { background: #4B0082 !important; color: #fff !important; }

/* ---------- แถบข้าง: ขาว, ปุ่ม active = indigo tint ---------- */
nav {
  background: #FFFFFF !important;
  border-right: 1px solid #ECE6F2 !important;
}
nav .action { border-radius: 12px !important; margin: 2px 8px; width: auto; }
nav .action .title, nav .action span { color: #4A3D58 !important; }
nav .action:hover { background: rgba(75, 0, 130, 0.07) !important; }
nav .action.active {
  background: rgba(75, 0, 130, 0.11) !important;
}
nav .action.active i, nav .action.active span { color: #4B0082 !important; }
nav .credits, nav > div:last-of-type { color: #9A8DA8 !important; }
nav .credits a { color: #7A6E88 !important; }

/* ---------- รายการไฟล์: การ์ดขาว, hover ม่วงจาง ---------- */
#listing .item {
  background: #FFFFFF !important;
  border: 1px solid #EFEAF4 !important;
  border-radius: 12px !important;
  margin: 4px 0 !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#listing .item:hover {
  background: #FBF9FD !important;
  border-color: #E0D4EC !important;
  box-shadow: 0 3px 10px rgba(75, 0, 130, 0.06) !important;
}
#listing .item[aria-selected=true] {
  background: rgba(75, 0, 130, 0.10) !important;
  border-color: rgba(75, 0, 130, 0.4) !important;
}
/* โฟลเดอร์ = ทอง (premium accent) · ไฟล์ = indigo หม่น */
#listing .item[data-dir="true"] i { color: #C9A24B !important; }
#listing .item:not([data-dir="true"]) i { color: #6E5A93 !important; }
#listing .item .name { color: #2B2436 !important; font-weight: 400; }
#listing .item .size, #listing .item .modified { color: #8B7E99 !important; font-weight: 300; }
#listing .header, #listing .header span, #listing .header p { color: #7A6E88 !important; }
#listing .header i { color: #4B0082 !important; }
#listing.list .item .name { text-overflow: ellipsis; }

/* ---------- โมดัล/การ์ด (สร้างโฟลเดอร์ ลบ เปลี่ยนชื่อ ฯลฯ) ---------- */
.card {
  background: #FFFFFF !important;
  border: 1px solid #ECE6F2 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(43, 27, 61, 0.18) !important;
  color: #2B2436 !important;
}
.card h2, .card h3, .card .card-title { color: #2B2436 !important; font-weight: 600; }
.card p, .card label { color: #6A5C7A !important; }
.card input, .card select, .card textarea {
  background: #FBFAFD !important;
  border: 1px solid #E0D4EC !important;
  border-radius: 10px !important;
  color: #2B2436 !important;
}
.card input:focus {
  border-color: #4B0082 !important;
  box-shadow: 0 0 0 3px rgba(75, 0, 130, 0.14) !important;
}

/* ปุ่มในโมดัล: ยืนยัน = indigo ทึบ · ลบ/อันตราย = burgundy · flat = indigo ตัวอักษร */
.button { border-radius: 10px !important; }
.button--flat {
  color: #4B0082 !important;
  background: transparent !important;
}
.button--flat:hover { background: rgba(75, 0, 130, 0.09) !important; }
.button--flat.button--red, .button--red { color: #900024 !important; }
.button--red:hover { background: rgba(144, 0, 36, 0.10) !important; }
.button--blue, .button.button--blue {
  background: #4B0082 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(75, 0, 130, 0.22) !important;
}
.button--blue:hover { background: #5B21A8 !important; }

/* ---------- prompt เลือกไฟล์ / progress / share ---------- */
#progress { background: linear-gradient(90deg, #4B0082, #C0577E) !important; }
.share__box, .dashboard #nav, .prompt { background: #FFFFFF !important; color: #2B2436 !important; }

/* ---------- breadcrumb ---------- */
#breadcrumbs { border-color: #ECE6F2 !important; }
#breadcrumbs a, #breadcrumbs span { color: #7A6E88 !important; border-radius: 8px; }
#breadcrumbs a:hover { background: rgba(75, 0, 130, 0.08) !important; color: #4B0082 !important; }
#breadcrumbs i { color: #4B0082 !important; }

/* ---------- scrollbar เนียน ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D9CEE6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C3B2D6; }

/* ---------- เก็บรายละเอียด ---------- */
.message { color: #7A6E88 !important; }
.helpButton { display: none; }
.dashboard { background: var(--background) !important; }