/* ==========================================================
   ICV Software Console - Theme
   ธีมปกติ อ่านง่าย รองรับ Day/Night (light/dark) mode
   สลับโหมดด้วย data-theme="light" บน <html> (ค่าเริ่มต้น = dark)
   ========================================================== */

:root{
  /* พื้นหลัง/พาเนล */
  --bg:#14161b; --panel:#1c1f26; --input-bg:#22252c;
  /* ตัวหนังสือ */
  --text:#e7e9ec; --text-dim:#9aa1ac;
  /* เส้นขอบ */
  --line:#2b2f38;
  /* สี accent หลัก (ปุ่ม, ลิงก์, ไฮไลต์) */
  --accent:#9b111e; --accent-dim:#3a1418; --accent-soft:rgba(155,17,30,0.14);
  /* สถานะ (คงที่ ไม่เปลี่ยนตามธีม) */
  --status-danger:#f0555f; --green:#3bcf6f; --amber:#f0a93c;
  /* เข้ากันได้กับโค้ดเก่าที่อ้างชื่อ --red / --red-dim / --red-glow ฯลฯ */
  --red:var(--accent); --red-dim:var(--accent-dim); --red-glow:transparent;
  --status-danger-glow:transparent; --green-glow:transparent; --amber-glow:transparent;
}

[data-theme="light"]{
  --bg:#f4f5f7; --panel:#ffffff; --input-bg:#f9fafb;
  --text:#1c1f26; --text-dim:#6b7280;
  --line:#e3e5ea;
  --accent:#9b111e; --accent-dim:#f6d8da; --accent-soft:rgba(155,17,30,0.08);
  --status-danger:#dc2626; --green:#16a34a; --amber:#d97706;
}

*{box-sizing:border-box;margin:0;padding:0;}
a, a:link, a:visited, a:hover, a:active{ color: inherit; text-decoration: none; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex;
}

/* ===== sidebar ===== */
.sidebar{ width:20%; min-width:220px; background:var(--panel); border-right:1px solid var(--line); padding:28px 0; position:relative; display:flex; flex-direction:column;}
.logo-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 28px 20px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.logo{font-size:20px; font-weight:700; letter-spacing:.3px; color:var(--text);}
.brand-logo-img{ height:40px; width:auto; max-width:100px; object-fit:contain; flex-shrink:0; background:#fff; padding:4px 6px; border-radius:6px; }
.logo span{display:block;font-size:12px;color:var(--text-dim);letter-spacing:1.5px;margin-top:4px;font-weight:400;}

/* ===== Day/Night toggle ===== */
.theme-toggle-wrap{ padding: 0 28px 18px; border-bottom:1px solid var(--line); margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; }
.theme-toggle-label{ font-size:12px; letter-spacing:1px; color:var(--text-dim); }
.theme-toggle{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--input-bg);
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.theme-toggle:hover{ border-color:var(--accent); }
.theme-toggle svg{ width:19px; height:19px; stroke:var(--amber); }
.theme-toggle .icon-moon{ display:none; stroke:var(--accent); }
.theme-toggle.is-light .icon-sun{ display:none; }
.theme-toggle.is-light .icon-moon{ display:block; }

.menu{list-style:none;display:flex;flex-direction:column;gap:2px;padding:0 14px;}
.menu li a{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--text-dim);text-decoration:none;font-size:16px;border:1px solid transparent;border-radius:8px;transition:all .15s ease;}
.menu li a svg{width:18px;height:18px;stroke:var(--text-dim);transition:all .15s ease;}
.menu li a:hover, .menu li.active a{color:var(--accent);background:var(--accent-soft);}
.menu li.active a{ border-color:var(--line); font-weight:600; }
.menu li a:hover svg, .menu li.active a svg{stroke:var(--accent);}
.sidebar-footer{margin-top:auto;padding:18px 28px 0;border-top:1px solid var(--line);font-size:13px;color:var(--text-dim);letter-spacing:.3px;}

/* ===== content ===== */
.content{width:80%;padding:32px 40px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.topbar h1{font-size:22px;font-weight:700;}
.topbar h1 span{color:var(--text-dim);font-weight:400;}
.btn-add{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;letter-spacing:.2px;cursor:pointer;transition:opacity .15s ease;text-decoration:none;display:inline-block;}
.btn-add:hover{opacity:.88;}

.search{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:9px 16px;color:var(--text);font-family:inherit;font-size:15px;width:260px;}
.search:focus{outline:none;border-color:var(--accent);}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px;}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.stat-card .num{font-size:28px;font-weight:700;color:var(--accent);}
.stat-card .lbl{font-size:14px;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}

.section-title{font-size:15px;font-weight:600;letter-spacing:.3px;color:var(--text-dim);margin:8px 0 14px;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.category-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;transition:all .15s ease;display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative;}
.card-delete-btn{
  position:absolute; top:12px; right:12px; background:transparent; border:1px solid var(--line);
  border-radius:7px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
}
.card-delete-btn svg{ width:14px; height:14px; stroke:var(--text-dim); }
.card-delete-btn:hover{ border-color:var(--status-danger); }
.card-delete-btn:hover svg{ stroke:var(--status-danger); }
.category-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,0.12);}
.category-card .cat-name{font-size:18px;font-weight:600;margin-bottom:6px;color:var(--text);}
.sw-icon-name{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sw-icon-name .cat-name{ margin-bottom:0; }
.sw-icon{ width:28px; height:28px; border-radius:6px; object-fit:contain; background:var(--input-bg); border:1px solid var(--line); padding:3px; flex-shrink:0; }
.category-card .cat-count{font-size:14px;color:var(--text-dim);}
.category-card .cat-bar{margin-top:14px;height:5px;border-radius:3px;background:var(--accent-dim);position:relative;overflow:hidden;}
.category-card .cat-bar i{position:absolute;left:0;top:0;height:100%;background:var(--accent);display:block;}

.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); text-decoration:none; font-size:14px; margin-bottom:16px; }
.back-link:hover{ color:var(--accent); }
.back-link svg{ width:14px; height:14px; stroke:currentColor; }

/* ===== table ===== */
.toolbar{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap;}
.chip{padding:7px 16px;border:1px solid var(--line);border-radius:20px;font-size:14px;color:var(--text-dim);cursor:pointer;text-decoration:none;display:inline-block;}
.chip.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:15px;}
th{text-align:left;padding:12px 18px;color:var(--text-dim);font-weight:600;font-size:12px;border-bottom:1px solid var(--line);text-transform:uppercase;white-space:nowrap;}
td{padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--accent-soft);}
.tag{font-size:12px;padding:3px 10px;border-radius:10px;border:1px solid;}
.tag-cat{color:var(--status-danger);border-color:rgba(240,85,95,0.35);background:rgba(240,85,95,0.08);}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.ok{background:var(--green);}
.dot.soon{background:var(--amber);}
.dot.late{background:var(--status-danger);}
.icon-btn{background:none;border:none;cursor:pointer;padding:4px;}
.icon-btn svg{width:16px;height:16px;stroke:var(--text-dim);}
.icon-btn:hover svg{stroke:var(--accent);}

/* ===== login ===== */
.login-wrap{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-box{width:380px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:40px 36px;box-shadow:0 4px 24px rgba(0,0,0,0.15);}
.brand{text-align:center;margin-bottom:30px;}
.brand .mark{width:52px;height:52px;margin:0 auto 14px;border:1px solid var(--line);background:rgba(240,85,95,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.brand .mark svg{width:24px;height:24px;stroke:var(--status-danger);}
.brand .mark img{width:38px;height:38px;object-fit:contain;}
.brand h1{font-size:19px;font-weight:700;color:var(--text);}
.brand h1 span{color:var(--status-danger);}
.brand p{font-size:13px;color:var(--text-dim);letter-spacing:1px;margin-top:6px;}
.field{margin-bottom:18px;}
.field label{font-size:13px;color:var(--text-dim);display:block;margin-bottom:6px;}
.field input{width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:11px 14px;color:var(--text);font-family:inherit;font-size:16px;}
.field input:focus{outline:none;border-color:var(--accent);}
.btn-login{width:100%;padding:12px;margin-top:8px;background:var(--accent);border:1px solid var(--accent);border-radius:8px;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:opacity .15s ease;}
.btn-login:hover{opacity:.88;}
.ad-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-dim);text-align:center;line-height:1.7;}
.ad-note b{color:var(--text);}
.error-box{background:rgba(240,85,95,0.1);border:1px solid var(--status-danger);color:var(--status-danger);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:18px;text-align:center;}

/* ===== modal (popup) - เต็มพื้นที่ content 80% ===== */
.modal-overlay{
  position:fixed; top:0; left:20%; right:0; bottom:0;
  background:var(--bg);
  display:none; z-index:1000; overflow-y:auto;
  padding:32px 40px;
}
.modal-overlay.open{ display:block; }
.modal-box{ width:100%; max-width:none; background:transparent; border:none; padding:0; box-shadow:none; }
.modal-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.modal-top h2{ font-size:20px; font-weight:700; color:var(--text); }
.modal-top h2 span{ color:var(--text-dim); font-weight:400; }
.modal-close{ background:transparent; border:1px solid var(--line); border-radius:8px; width:34px; height:34px; cursor:pointer; color:var(--text-dim); font-size:20px; line-height:1; }
.modal-close:hover{ border-color:var(--accent); color:var(--accent); }

.modal-item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:14px; max-width:760px; }
.modal-item:last-child{ margin-bottom:0; }
.modal-item-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.modal-item-header h3{ font-size:16px; font-weight:600; color:var(--text); }
.usage-inline{ font-size:95%; color:var(--text-dim); font-weight:400; margin-left:8px; }
.modal-item-actions{ display:flex; gap:6px; }
.modal-item-actions .icon-btn{ border:1px solid var(--line); border-radius:6px; padding:6px; }
.modal-item-actions .icon-btn.edit{ border-color:var(--green); }
.modal-item-actions .icon-btn.edit svg{ stroke:var(--green); }
.modal-item-actions .icon-btn.edit:hover{ background:rgba(59,207,111,0.1); }
.modal-item-actions .icon-btn.danger{ border-color:var(--status-danger); }
.modal-item-actions .icon-btn.danger svg{ stroke:var(--status-danger); }
.modal-item-actions .icon-btn.danger:hover{ background:rgba(240,85,95,0.1); }

.field-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:5px 0; }
.field-row .flabel{ color:var(--status-danger); font-weight:600; }
.field-row .fvalue{ text-align:right; word-break:break-all; color:var(--text); }
.field-row .fvalue.mono{ font-family:'Courier New',monospace; letter-spacing:.3px; }

.modal-loading{ color:var(--text-dim); font-size:14px; text-align:center; padding:20px 0; }

/* ===== edit form page ===== */
.form-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px 30px; max-width:560px; }
.form-group{ margin-bottom:16px; }
.form-group label{ font-size:13px; color:var(--text-dim); display:block; margin-bottom:6px; }
.form-group input, .form-group select{
  width:100%; background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; color:var(--text); font-family:inherit; font-size:15px;
}
.form-group input:focus, .form-group select:focus{ outline:none; border-color:var(--accent); }
.form-actions{ display:flex; gap:12px; margin-top:22px; }
.btn-update{
  background:var(--accent); border:1px solid var(--accent); color:#fff; border-radius:8px;
  padding:11px 26px; font-size:14px; font-weight:600; cursor:pointer; transition:opacity .15s ease;
}
.btn-update:hover{ opacity:.88; }
.btn-cancel{
  background:transparent; border:1px solid var(--line); color:var(--text-dim); border-radius:8px;
  padding:11px 26px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-cancel:hover{ border-color:var(--text-dim); color:var(--text); }

/* ===== role toggle switch (User page) ===== */
.switch{ position:relative; display:inline-block; width:36px; height:19px; }
.switch input{ display:none; }
.slider-tog{ position:absolute; inset:0; background:var(--input-bg); border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:.2s; }
.slider-tog::before{ content:""; position:absolute; width:13px; height:13px; left:2px; top:2px; background:var(--text-dim); border-radius:50%; transition:.2s; }
.switch input:checked + .slider-tog{ border-color:var(--accent); background:var(--accent-soft); }
.switch input:checked + .slider-tog::before{ transform:translateX(17px); background:var(--accent); }
.switch input:disabled + .slider-tog{ opacity:.4; cursor:not-allowed; }

/* ===== software-held section inside employee card ===== */
.sw-held-list{ margin-top:10px; }
.sw-held-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; }
.sw-held-row .sw-name{ color:var(--text); }
.sw-held-row .sw-index{ color:var(--accent); font-weight:600; font-size:12px; margin-right:2px; }
.sw-held-row .sw-account{ color:var(--text-dim); font-size:12px; margin-left:6px; }
.btn-round{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-size:17px; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.btn-round.minus:hover{ border-color:var(--status-danger); color:var(--status-danger); }
.btn-round.plus{ border-color:var(--accent); color:var(--accent); }
.btn-round.plus:hover{ background:var(--accent-soft); }

.assign-form{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:none; }
.assign-form.open{ display:block; }
.assign-form select, .assign-form input{
  width:100%; background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; color:var(--text); font-family:inherit; font-size:14px; margin-bottom:8px;
}
.assign-form .assign-actions{ display:flex; gap:8px; margin-top:4px; }
.assign-form .assign-actions button{
  flex:1; padding:8px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--line);
}
.assign-form .btn-do-update{ background:var(--accent); border-color:var(--accent); color:#fff; }
.assign-form .btn-do-cancel{ background:transparent; color:var(--text-dim); }

/* ===== generic panel/grid (used by Analytic, Report) ===== */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ===== bar chart (Analytic page) ===== */
.bars{ display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:24px; }
.bars .bar{
  flex:1; background:var(--accent);
  border-radius:4px 4px 0 0; position:relative;
  min-height:2px; transition:height .3s ease;
}
.bars .bar span{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--text-dim); white-space:nowrap;
}
.bar-labels{ display:flex; gap:10px; margin-top:8px; }
.bar-labels div{ flex:1; text-align:center; font-size:12px; color:var(--text-dim); }

/* ===== password mask + eye toggle ===== */
.pw-row{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.pw-toggle{ padding:2px; }
.pw-toggle svg{ width:15px; height:15px; }

.pw-field-wrap{ display:flex; align-items:center; gap:8px; }
.pw-field-wrap input{ flex:1; }

/* ===== date input ===== */
input[type="date"]{ color-scheme: light dark; }

.date-field-wrap{ position:relative; }
.date-field-wrap input[type="date"]{ padding-right:40px; }
.date-field-wrap input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0; position:absolute; right:0; top:0; width:40px; height:100%; margin:0; cursor:pointer;
}
.date-icon-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:4px; cursor:pointer; pointer-events:none;
}
.date-icon-btn svg{ width:18px; height:18px; stroke:var(--accent); }

/* ==========================================================
   RESPONSIVE - Mobile (แฮมเบอร์เกอร์เมนู + จัดวางใหม่บนจอเล็ก)
   ========================================================== */
.mobile-menu-toggle{ display:none; }
.mobile-backdrop{ display:none; }

@media (max-width: 860px){
  body{ flex-direction:column; }

  .mobile-menu-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:1100;
    width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
    background:var(--panel); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  .mobile-menu-toggle svg{ width:20px; height:20px; stroke:var(--status-danger); }

  .mobile-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1040;
  }
  .mobile-backdrop.show{ display:block; }

  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:80%; max-width:300px;
    z-index:1050; transform:translateX(-105%); transition:transform .25s ease;
    overflow-y:auto;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,0.25); }

  .content{ width:100%; padding:74px 16px 28px; }

  .topbar{ flex-direction:column; align-items:stretch; gap:12px; margin-bottom:18px; }
  .topbar h1{ font-size:18px; }
  .topbar > div{ display:flex; flex-wrap:wrap; gap:10px; width:100%; }
  .topbar > div .btn-add, .topbar > div .admin-menu-wrap{ flex:1; }
  .topbar > div .btn-add{ text-align:center; }

  .modal-top{ flex-direction:column; align-items:stretch; gap:12px; margin-bottom:18px; }
  .modal-top h2{ font-size:18px; }
  .modal-top > div{ display:flex; flex-wrap:wrap; gap:10px; width:100%; }
  .modal-top > div .btn-add{ flex:1; text-align:center; }
  .modal-top > div .modal-close{ flex-shrink:0; }

  .stat-row{ grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
  .stat-card{ padding:14px 16px; }
  .stat-card .num{ font-size:22px; }

  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  .category-card{ padding:14px; }
  .category-card .cat-name{ font-size:15px; }

  /* ช่องค้นหา / dropdown - เต็มความกว้างเสมอบนมือถือ + ขยาย/เน้นเวลา focus */
  .toolbar{ flex-direction:column; align-items:stretch; gap:8px; }
  .search{ width:100%; font-size:16px; } /* 16px กัน iOS auto-zoom ตอน focus */
  .search:focus{ box-shadow:0 0 0 3px var(--accent-soft); transform:scale(1.01); }
  select, .form-group select{ font-size:16px; }

  .modal-overlay{ left:0; padding:74px 16px 28px; }
  .modal-item{ max-width:100%; padding:16px; }
  .field-row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .field-row .fvalue{ text-align:left; }

  .form-card, .login-box, .print-card, .print-table-wrap{ max-width:100%; padding:22px 18px; }
  .login-wrap{ padding:16px; }

  table{ font-size:13px; }
  th, td{ padding:9px 10px; }

  .grid-2{ grid-template-columns:1fr; }

  .report-tabs{ flex-wrap:wrap; }

  .form-actions{ flex-direction:column; }
  .form-actions .btn-update, .form-actions .btn-cancel{ width:100%; text-align:center; }
}

/* ===== แก้ specificity: บังคับตัวหนังสือปุ่มสีขาวเสมอ (กันโดนกฎ a:link ทับ) ===== */
a.btn-add, a.btn-update, a.btn-login{ color:#fff !important; }

/* ===== Admin menu (hamburger dropdown บน topbar หน้า User) ===== */
.admin-menu-wrap{ position:relative; }
.admin-menu-btn{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--panel);
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.admin-menu-btn:hover{ border-color:var(--accent); }
.admin-menu-btn svg{ width:18px; height:18px; stroke:var(--text); }
.admin-menu-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:240px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,0.2); z-index:200; overflow:hidden;
}
.admin-menu-dropdown.open{ display:block; }
.admin-menu-header{
  padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--text-dim);
  border-bottom:1px solid var(--line);
}
.admin-menu-dropdown a{
  display:block; padding:11px 16px; font-size:14px; color:var(--text); border-bottom:1px solid var(--line); text-decoration:none;
}
.admin-menu-dropdown a:last-child{ border-bottom:none; }
.admin-menu-dropdown a:hover{ background:var(--accent-soft); color:var(--accent); }

/* ===== Classic/New view switch (แบบ Outlook) ===== */
.view-switch{ display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:6px 8px; }
.view-switch-label{ font-size:13px; color:var(--text-dim); }
.view-switch-track{ width:34px; height:18px; border-radius:20px; background:var(--input-bg); border:1px solid var(--line); position:relative; display:inline-block; transition:background .15s ease; }
.view-switch-thumb{ position:absolute; width:13px; height:13px; left:2px; top:1px; background:var(--text-dim); border-radius:50%; transition:transform .15s ease, background .15s ease; }
.view-switch.is-new .view-switch-track{ border-color:var(--accent); background:var(--accent-soft); }
.view-switch.is-new .view-switch-thumb{ transform:translateX(16px); background:var(--accent); }

/* ===== New row-list design (expand/collapse) ===== */
.row-list{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:760px; }
.row-item{ border-bottom:1px solid var(--line); }
.row-item:last-child{ border-bottom:none; }
.row-item-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
.row-item-head:hover{ background:var(--accent-soft); }
.row-avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex-shrink:0; }
.row-info{ flex:1; min-width:0; }
.row-name{ font-weight:600; font-size:14px; margin:0; color:var(--text); }
.row-extra{ color:var(--text-dim); font-weight:400; }
.row-sub{ font-size:12px; color:var(--text-dim); margin:2px 0 0; font-family:'Courier New',monospace; }
.row-status{ display:flex; align-items:center; gap:5px; font-size:12px; white-space:nowrap; flex-shrink:0; }
.row-status svg{ stroke:currentColor; fill:currentColor; }
.row-chev{ stroke:var(--text-dim); flex-shrink:0; transition:transform .15s ease; }
.row-item[data-open="true"] .row-chev{ transform:rotate(180deg); }
.row-item-body{ display:none; padding:0 16px 14px 60px; }
.row-item[data-open="true"] .row-item-body{ display:block; }