/* ============================================================
   DEW GRAPHIC DESIGN — brand layer on top of Soft UI Dashboard
   โหลดหลัง soft-ui-dashboard.min.css เสมอ
   ============================================================ */
:root{
  --dew-orange:#ff7a00;--dew-pink:#f3157a;--dew-magenta:#c51b9b;--dew-purple:#6b2cc5;
  --dew-blue:#175ed4;--dew-cyan:#12b8e8;--dew-lime:#8dcc00;
  --ink:#344767;--muted:#67748e;--card:#fff;--line:#e9ecef;
  --brand-gradient:linear-gradient(135deg,var(--dew-orange) 0%,var(--dew-pink) 25%,var(--dew-purple) 52%,var(--dew-blue) 78%,var(--dew-cyan) 100%);
}

/* ---------- Font: Prompt (รองรับไทย) ทับ Open Sans ---------- */
html,body,button,input,select,textarea,.btn,.badge,.form-control,.breadcrumb,.nav-link,h1,h2,h3,h4,h5,h6{
  font-family:'Prompt','Open Sans',sans-serif!important;
}
body{font-size:.875rem}
a{text-decoration:none}

/* ---------- แบรนด์: เปลี่ยน gradient primary ของ template เป็นสี DEW ---------- */
.bg-gradient-primary,.btn.bg-gradient-primary,.btn-primary{
  background-image:var(--brand-gradient)!important;background-size:150% 150%;border:0;
}
.btn-primary{color:#fff}
.text-gradient.text-primary,.eyebrow{
  background-image:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.btn{text-transform:none;letter-spacing:0}
.btn:not([class*="btn-"]):not([class*="bg-"]){background:#e9ecf3;color:#3a416f;box-shadow:0 3px 5px -1px rgba(0,0,0,.09)}
.btn.secondary,.btn.light{background:#e9ecf3;color:#3a416f}

/* ---------- Sidenav (โครงสร้าง template) ---------- */
.brand-img-dew{max-height:4.2rem!important;max-width:100%;width:auto!important;object-fit:contain}
.sidenav .nav-link .icon svg{width:14px;height:14px;fill:var(--dew-purple)}
.sidenav .nav-link.active .icon svg{fill:#fff}
.sidenav .nav-link{font-weight:500}
.logout-item-dew{margin-top:.5rem}
.logout-item-dew .nav-link{color:#ea0606}
.logout-item-dew .nav-link .icon svg{fill:#ea0606}
.caret-dew{font-size:.6rem;color:#8392ab;margin-left:.15rem}

/* ---------- Navbar ---------- */
.global-search-dew{width:280px}
.global-search-dew .input-group-text svg{width:15px;height:15px;fill:#67748e}
.navbar-main .nav-link svg{width:18px;height:18px;fill:#67748e}
.navbar-main .notification{position:relative;cursor:pointer}
.navbar-main .notification b{position:absolute;right:-2px;top:-2px;width:8px;height:8px;border:2px solid #fff;background:var(--dew-pink);border-radius:50%}
.user-chip-dew h6{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar-main .dropdown-menu{min-width:180px;border:0;border-radius:.75rem;box-shadow:0 8px 26px -4px rgba(20,20,20,.15),0 8px 9px -5px rgba(20,20,20,.06)}
.navbar-main .dropdown-item{font-size:.8rem;padding:.5rem .75rem}
.navbar-main .dropdown-item:hover{background:#f0f2f5}
[data-theme="dark"] .navbar-main .dropdown-menu{background:#141c2d}
[data-theme="dark"] .navbar-main .dropdown-item{color:#e6e9f2}
[data-theme="dark"] .navbar-main .dropdown-item:hover{background:#1d2740}
[data-theme="dark"] .navbar-main .dropdown-divider{border-color:#263047}
[data-theme="dark"] .logout-item-dew .nav-link .icon{background:#2a1620!important}

/* ---------- Avatar ---------- */
.avatar-img{object-fit:cover}
.avatar-fallback{display:inline-grid;place-items:center;background-image:var(--brand-gradient);color:#fff;font-weight:700}
.employee-photo,.profile-preview{object-fit:cover;border-radius:50%;box-shadow:0 .25rem .375rem -.0625rem rgba(20,20,20,.12)}
.employee-photo{width:44px;height:44px}
.profile-preview{width:76px;height:76px}
.profile-editor{display:flex!important;align-items:center;gap:16px;padding:14px;border:1px dashed #d2d6da;border-radius:.75rem;background:#f8f9fa}
.profile-editor .placeholder{display:grid;place-items:center;background-image:var(--brand-gradient);color:#fff;font-weight:700;opacity:1}

/* ---------- Card (เพจเดิมใส่เนื้อหาตรง ๆ ใน .card โดยไม่มี card-body) ---------- */
.page-body .card{padding:1.25rem 1.5rem}
.page-body .card h3{font-size:1rem;font-weight:600;color:var(--ink)}

/* ---------- KPI cards (สไตล์การ์ดตัวเลขของ Soft UI) ---------- */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.kpi{min-height:110px;display:flex;align-items:center;gap:.85rem}
.kpi-icon{flex:0 0 auto;width:48px;height:48px;border-radius:.75rem;display:grid;place-items:center;color:#fff;background-image:var(--kpi,var(--brand-gradient));font-size:20px;box-shadow:0 .25rem .375rem -.0625rem rgba(20,20,20,.12),0 .125rem .25rem -.0625rem rgba(20,20,20,.07)}
.kpi-content span{display:block;color:var(--muted);font-size:.72rem;font-weight:600}
.kpi-content b{font-size:1.5rem;line-height:1.2;color:var(--ink)}
.kpi-content small{font-size:.65rem;color:#8392ab;margin-left:.2rem}
.kpi-trend{position:absolute;right:.9rem;bottom:.6rem;font-size:.58rem;color:#8392ab}
.kpi.blue{--kpi:linear-gradient(135deg,#2152ff,#21d4fd)}
.kpi.purple{--kpi:linear-gradient(135deg,#7928ca,#d6006c)}
.kpi.orange{--kpi:linear-gradient(135deg,#f53939,#fbcf33)}
.kpi.cyan{--kpi:linear-gradient(135deg,#17c1e8,#2152ff)}
.kpi.green{--kpi:linear-gradient(135deg,#17ad37,#98ec2d)}
.kpi.red{--kpi:linear-gradient(135deg,#ea0606,#ff667c)}
/* KPI แบบย่อในหน้ารายงาน (ไม่มี kpi-content) */
.kpi:not(:has(.kpi-content)){flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;min-height:96px}
.kpi>b{font-size:1.5rem;color:var(--ink);line-height:1.2}
.kpi>span{color:var(--muted);font-size:.72rem;font-weight:600}

/* ---------- Dashboard layout ---------- */
.dashboard-grid{display:grid;grid-template-columns:1.28fr 1fr 1fr;gap:1rem;margin-top:1rem}
.dashboard-grid.bottom{grid-template-columns:.9fr 1.2fr .9fr}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.section-head h3{margin:0;font-size:1rem;font-weight:600}
.section-head p{margin:.15rem 0 0;font-size:.68rem;color:var(--muted)}
.section-link{font-size:.7rem;font-weight:600;color:var(--dew-purple)}
.sales-total{font-size:1.85rem;font-weight:700;margin-top:1rem;color:var(--ink);position:relative;z-index:1}
.sales-sub{font-size:.65rem;color:#17ad37;margin-top:.15rem}
.real-chart{height:190px;margin-top:1rem}
.real-chart svg{width:100%;height:100%;overflow:visible}
.actual-line{fill:none;stroke:url(#dewStroke);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.actual-fill{fill:url(#dewChartFill)}
.chart-labels{display:flex;justify-content:space-between;font-size:.58rem;color:#8392ab}
.chart-empty{height:205px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted);gap:6px}
.chart-empty-icon{width:55px;height:55px;border-radius:1rem;background:linear-gradient(135deg,#fff1e8,#f3edff,#eaf7ff);display:grid;place-items:center;color:var(--dew-purple);font-size:22px}
.chart-empty strong{color:var(--ink);font-size:.8rem}
.chart-empty span{font-size:.65rem}
.status-summary{display:flex;align-items:center;gap:1.5rem;margin-top:1.25rem}
.donut{width:150px;height:150px;border-radius:50%;background:var(--donut,conic-gradient(#e9ecef 0 100%));display:grid;place-items:center;position:relative}
.donut:before{content:"";width:88px;height:88px;border-radius:50%;background:var(--card)}
.donut-center{position:absolute;text-align:center;display:grid}
.donut-center b{font-size:1.4rem;color:var(--ink)}
.donut-center small{font-size:.62rem;color:var(--muted)}
.legend{flex:1;display:grid;gap:.55rem}
.legend-row{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;font-size:.7rem;color:var(--ink)}
.legend-row i{width:7px;height:7px;border-radius:50%;background:var(--dot)}
.deadline-list,.compact-list{margin-top:.75rem;display:grid}
.deadline-item,.compact-item{display:grid;grid-template-columns:1fr auto;column-gap:8px;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.7rem;position:relative;z-index:1}
.deadline-item a{font-weight:600;color:var(--dew-blue)}
.deadline-item strong,.compact-item strong{grid-column:1;color:var(--ink)}
.deadline-item small,.compact-item small{grid-column:1;color:var(--muted)}
.deadline-item time{grid-column:2;grid-row:1/4;color:var(--dew-pink);align-self:center}
.compact-item b{grid-column:2;grid-row:1/3;align-self:center;color:var(--dew-purple)}
.empty-state{text-align:center;color:#8392ab;padding:2rem .75rem;font-size:.7rem}
.revenue-banner{color:#fff;background:linear-gradient(135deg,#180f40,#25176b 55%,#173d9d)}
.revenue-banner:after{content:"";position:absolute;inset:auto -80px -120px auto;width:270px;height:270px;border-radius:50%;background:var(--brand-gradient);opacity:.35;filter:blur(10px)}
.revenue-banner h3,.revenue-banner .sales-total{color:#fff}
.revenue-banner .muted{color:rgba(255,255,255,.6)}

/* ---------- Actions bar + Forms (สไตล์ input ของ Soft UI) ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem;position:relative;z-index:1}
.actions .btn{margin-bottom:0}
.actions input,.actions select,
.field input,.field select,.field textarea{
  display:block;width:100%;padding:.5rem .75rem;font-size:.8rem;font-weight:400;line-height:1.5;color:#495057;
  background:#fff;background-clip:padding-box;appearance:none;border:1px solid #d2d6da;border-radius:.5rem;
  transition:box-shadow .15s ease,border-color .15s ease;outline:none;
}
.actions input,.actions select{width:auto}
.actions input:focus,.actions select:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--dew-purple);box-shadow:0 0 0 2px rgba(107,44,197,.18);
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;position:relative;z-index:1}
.field{display:grid;gap:.35rem;font-weight:600;font-size:.72rem;color:var(--ink)}
.field.full,.full-row{grid-column:1/-1}
.checkbox-field{display:flex;align-items:center;gap:8px}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;position:relative;z-index:1}
.table{width:100%;border-collapse:collapse;font-size:.75rem;color:var(--ink)}
.table th{padding:.75rem;text-align:left;color:#8392ab;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);white-space:nowrap;opacity:.9}
.table td{padding:.75rem;border-bottom:1px solid var(--line);vertical-align:middle;box-shadow:none}
.table tbody tr:hover,.table tr:hover td{background:#f8f9fe}
.table a{color:var(--dew-blue);font-weight:600}

/* ---------- Badges สถานะงาน ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:.4em .7em;border-radius:999px;font-size:.6rem;font-weight:700;text-transform:none}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.status-received{background:#e9efff;color:#2152ff}
.status-designing{background:#f2ebff;color:#7928ca}
.status-revision{background:#fff1e6;color:#ef7b0b}
.status-printing{background:#e7f9ff;color:#149dca}
.status-shipped{background:#e9faef;color:#17ad37}
.status-active{background:#e9faef;color:#17ad37}
.status-inactive{background:#ffe9ec;color:#ea0606}

/* ---------- สวิตช์เปิด/ปิดบัญชีผู้ใช้งาน ---------- */
.field input[type=checkbox],.actions input[type=checkbox]{width:auto}
.account-switch-dew{grid-column:1/-1;padding:.9rem 1rem;border:1px solid #d7f5e2;background:#f2fcf6;border-radius:.75rem;transition:.2s}
.account-switch-dew .switch-title-dew{font-size:.8rem;color:#17ad37}
.account-switch-dew.is-off{border-color:#ffd4da;background:#fff5f6}
.account-switch-dew.is-off .switch-title-dew{color:#ea0606}
.account-switch-dew .form-check-input{cursor:pointer;flex:0 0 auto}
.account-switch-dew .form-check-input:disabled{cursor:not-allowed}
.account-switch-dew .form-check-label{cursor:pointer}
[data-theme="dark"] .account-switch-dew{background:#12271c;border-color:#1e4630}
[data-theme="dark"] .account-switch-dew.is-off{background:#2a1418;border-color:#5a1f27}

/* ---------- Alerts ---------- */
.alert{margin:0 0 1rem;padding:.8rem 1rem;border-radius:.75rem;border:0;font-size:.8rem}
.alert.error{background-image:linear-gradient(135deg,#ea0606,#ff667c);color:#fff}
.alert.success{background-image:linear-gradient(135deg,#17ad37,#84dc14);color:#fff}
.muted{color:var(--muted)}
.timeline{display:grid;gap:.75rem}
.timeline-item{border-left:3px solid var(--dew-purple);padding:.5rem .75rem;background:#f8f9fe;border-radius:0 .75rem .75rem 0}

/* ---------- เอกสาร / ใบเสนอราคา ---------- */
.quotation-doc,.doc{max-width:920px;margin:auto;background:#fff;padding:38px;border-radius:1rem;box-shadow:0 20px 27px 0 rgba(0,0,0,.05);color:#20283a}
.quotation-head,.doc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:4px solid transparent;border-image:var(--brand-gradient) 1;padding-bottom:20px}
.quotation-brand{display:flex;align-items:center;gap:12px}
.quotation-brand img{width:245px;height:100px;object-fit:contain}
.quotation-brand div{display:none}
.quotation-title{text-align:right}
.quotation-title h1{font-size:30px;margin:0}
.quotation-title p{letter-spacing:.22em;color:var(--dew-purple)}
.quotation-meta{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin-top:25px}
.quotation-meta h3,.customer-box h3,.quotation-note h3{font-size:12px;color:var(--dew-purple)}
.quotation-meta p,.customer-box p,.quotation-note p{font-size:10px;line-height:1.8}
.quotation-meta table{width:100%;font-size:10px}
.quotation-meta th{text-align:left;color:#758096}
.customer-box{margin:20px 0;padding:14px 17px;border-radius:13px;background:linear-gradient(90deg,#fff3ed,#f8f0ff,#eef7ff)}
.quotation-table{width:100%;border-collapse:collapse;font-size:10px}
.quotation-table th{background:linear-gradient(90deg,#f3157a,#6b2cc5,#175ed4);color:#fff;padding:11px}
.quotation-table td{padding:12px;border-bottom:1px solid #e8ecf5}
.quotation-table .grand td{font-size:13px;font-weight:700;background:#f6f3ff}
.right{text-align:right}.center{text-align:center}
.quotation-sign{display:grid;grid-template-columns:1fr 1fr;gap:70px;text-align:center;margin-top:45px;font-size:10px}

/* ---------- หน้า Login / Public (โครงสร้าง sign-in ของ Soft UI) ---------- */
.auth-shell{min-height:100vh;background:#fff!important}
.public-content{min-height:100vh}
.navbar-brand-logo-dew{height:34px;width:auto;object-fit:contain}
.nav-ico-dew svg{width:15px;height:15px;fill:#344767;opacity:.6;vertical-align:-2px}
.page-header .card-plain .card-header p{color:var(--muted)}
.public-content>.alert{max-width:420px;margin:6.5rem auto -4.5rem;position:relative;z-index:20;text-align:center}
/* หน้า track สำหรับลูกค้า */
.public-content>.card{max-width:860px;margin:2.5rem auto;width:calc(100% - 2rem)}

/* ---------- Dark theme (คงฟีเจอร์เดิมของเว็บ) ---------- */
[data-theme="dark"] body,[data-theme="dark"] .bg-gray-100{background:#0c1221!important}
[data-theme="dark"]{--ink:#f4f5fb;--muted:#9da8bb;--card:#141c2d;--line:#263047}
[data-theme="dark"] .card,[data-theme="dark"] .sidenav,[data-theme="dark"] .profile-card-dew{background:#141c2d!important;color:#e6e9f2}
[data-theme="dark"] .profile-card-dew{border-color:#263047!important}
[data-theme="dark"] .sidenav .nav-link,[data-theme="dark"] .sidenav .navbar-brand,[data-theme="dark"] .brand-caption-dew strong,[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,[data-theme="dark"] .breadcrumb-item.active,[data-theme="dark"] .table{color:#e6e9f2}
[data-theme="dark"] .sidenav .nav-link.active{background:rgba(255,255,255,.08)}
[data-theme="dark"] .sidenav .nav-link .icon{background:#1d2740!important}
[data-theme="dark"] .navbar-main{background:transparent!important}
[data-theme="dark"] .breadcrumb-item a.text-dark{color:#9da8bb!important}
[data-theme="dark"] .breadcrumb-item.text-dark,[data-theme="dark"] .breadcrumb-item.active{color:#e6e9f2!important}
[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before{color:#9da8bb}
[data-theme="dark"] .navbar-main .nav-link svg{fill:#b8c2d4}
[data-theme="dark"] .kpi-content b,[data-theme="dark"] .kpi>b,[data-theme="dark"] .sales-total,[data-theme="dark"] .donut-center b,[data-theme="dark"] .section-head h3{color:#f4f5fb}
[data-theme="dark"] .table tbody tr:hover,[data-theme="dark"] .table tr:hover td{background:#192237}
[data-theme="dark"] .actions input,[data-theme="dark"] .actions select,[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,[data-theme="dark"] .form-control,[data-theme="dark"] .input-group-text{background:#111827;color:#f5f5f8;border-color:#29344b}
[data-theme="dark"] .donut:before{background:#141c2d}
[data-theme="dark"] .timeline-item{background:#192237}
[data-theme="dark"] .horizontal.dark{background-image:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent)}

/* ---------- Responsive ---------- */
@media(max-width:1500px){.grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid.bottom{grid-template-columns:1fr 1fr}.global-search-dew{width:200px}}
@media(max-width:1199px){.global-search-dew{display:none}}
@media(max-width:1100px){.dashboard-grid,.dashboard-grid.bottom{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid{grid-template-columns:1fr 1fr}.dashboard-grid,.dashboard-grid.bottom{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.quotation-doc{padding:20px}.quotation-head,.quotation-meta{grid-template-columns:1fr;display:grid}.quotation-title{text-align:left}.quotation-brand img{width:100%;height:auto}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.page-body .card{padding:1rem}}

/* ---------- Print (ใบเสนอราคา) ---------- */
@media print{
  .sidenav,.navbar-main,.footer,.no-print{display:none!important}
  .main-content{margin:0!important;width:100%!important}
  .page-body{padding:0!important}
  .quotation-doc,.doc{box-shadow:none;border-radius:0;max-width:none;padding:10mm}
  .quotation-brand img{width:210px}
  .quotation-table th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .customer-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}