:root{
  --ink-950:#0b241a;
  --ink-900:#123529;
  --white:#ffffff;
  --paper:#f6faf7;
  --paper-deep:#eef6f1;
  --line:#dbe8e0;
  --line-strong:#c3d8cb;
  --ink:#123529;
  --ink-dim:#5c7267;
  --brand:#0f6e4d;
  --brand-soft:#128a5f;
  --brand-pale:#e5f4ec;
  --danger:#b8433a;
  --danger-pale:#fbe9e7;
  --dim1:#0e6e5c; --dim1-d:#0a4f42;
  --dim2:#2f9e46; --dim2-d:#1f7233;
  --dim3:#748f2e; --dim3-d:#556b1f;
  --dim4:#0f5c52; --dim4-d:#0a4038;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 480px at 50% -8%, rgba(15,110,77,0.09), transparent 62%),
    radial-gradient(ellipse 1100px 700px at 88% 8%, rgba(47,158,70,0.07), transparent 58%),
    var(--paper);
  color:var(--ink);
  font-family:'Sarabun',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Kanit',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
.letterhead-bar{height:6px;width:100%;background:linear-gradient(90deg,var(--dim1),var(--brand),var(--dim2),var(--dim3),var(--dim4));}
a{color:inherit;}
.muted{color:var(--ink-dim);}

/* ===== Top nav ===== */
.app-nav{background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(15,60,40,0.04);}
.navrow{display:flex;align-items:center;gap:24px;padding:14px 28px;flex-wrap:wrap;}
.brand{font-family:'Kanit',sans-serif;font-weight:700;font-size:16px;color:var(--ink-900);white-space:nowrap;}
.brand span{color:var(--brand);}
.navlinks{display:flex;gap:4px;flex-wrap:wrap;flex:1;}
.navlinks a{font-size:13.5px;padding:8px 12px;border-radius:8px;color:var(--ink-dim);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.navlinks a:hover{background:var(--brand-pale);color:var(--ink-900);}
.navlinks a.active{background:var(--brand);color:#fff;}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap;}
.role-badge{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;padding:3px 9px;border-radius:999px;font-weight:700;}
.role-badge.role-admin{background:#0f6e4d;color:#fff;}
.role-badge.role-editor{background:#dff0e6;color:#0f6e4d;}
.role-badge.role-viewer{background:var(--paper-deep);color:var(--ink-dim);}
.uname{color:var(--ink-900);font-weight:500;}
.logout-link{color:var(--danger);text-decoration:none;font-weight:500;}
.logout-link:hover{text-decoration:underline;}

.page-body{padding-bottom:60px;}

/* ===== Header / hero (dashboard) ===== */
.page-top{padding:44px 0 6px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--brand);text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:6px 16px;margin-bottom:20px;background:var(--brand-pale);}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);}
.title{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.18;margin:0 0 10px;color:var(--ink-900);}
.title .accent{color:var(--brand);}
.subtitle{font-size:clamp(14px,1.5vw,17px);color:var(--ink-dim);max-width:760px;margin:0 auto;}
.subtitle b{color:var(--brand);}
.stat-strip{display:flex;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap;}
.stat-pill{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 22px;min-width:120px;text-align:center;box-shadow:0 2px 10px rgba(15,60,40,0.05);}
.stat-pill b{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--brand);font-weight:700;}
.stat-pill span{display:block;font-size:12px;color:var(--ink-dim);margin-top:2px;}

.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin:36px 0 10px;align-items:stretch;}
@media (max-width:920px){.hero{grid-template-columns:1fr;}}
.stage-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px 20px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 34px rgba(15,60,40,0.07);}
.stage-label{font-size:13px;color:var(--ink-dim);margin-bottom:6px;text-align:center;}
.stage-label b{color:var(--brand);}
.cube-scene{width:100%;max-width:320px;height:280px;perspective:1100px;position:relative;margin:16px 0 4px;}
.cube{position:absolute;inset:0;width:210px;height:210px;left:50%;top:50%;margin:-105px 0 0 -105px;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(-6deg);transition:transform .75s cubic-bezier(.65,.05,.25,1);}
.face{position:absolute;width:210px;height:210px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px;text-align:center;color:#fff;border:1px solid rgba(255,255,255,0.16);box-shadow:0 10px 28px rgba(10,50,35,0.25);cursor:pointer;user-select:none;text-decoration:none;}
.face .num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;opacity:.85;}
.face .lbl{font-family:'Kanit',sans-serif;font-weight:700;font-size:16px;line-height:1.3;}
.face .sub{font-size:12px;opacity:.9;}
.face svg{width:32px;height:32px;}
.face-1{background:linear-gradient(160deg,var(--dim1),var(--dim1-d));transform:rotateY(0deg) translateZ(105px);}
.face-2{background:linear-gradient(160deg,var(--dim2),var(--dim2-d));transform:rotateY(90deg) translateZ(105px);}
.face-3{background:linear-gradient(160deg,var(--dim3),var(--dim3-d));transform:rotateY(180deg) translateZ(105px);}
.face-4{background:linear-gradient(160deg,var(--dim4),var(--dim4-d));transform:rotateY(-90deg) translateZ(105px);}
.nucleus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--brand-soft), var(--ink-900) 100%);box-shadow:0 0 0 7px var(--brand-pale),0 8px 26px rgba(10,50,35,0.35);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:5;}
.nucleus b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;line-height:1;}
.nucleus span{font-size:10px;font-weight:600;margin-top:2px;}
.cube-nav{display:flex;align-items:center;gap:14px;margin-top:12px;}
.arrow-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--white);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .2s,transform .2s,border-color .2s;}
.arrow-btn:hover{background:var(--brand-pale);border-color:var(--brand);transform:scale(1.08);}
.dots{display:flex;gap:9px;}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line-strong);border:1px solid transparent;cursor:pointer;transition:all .2s;}
.dot.active{background:var(--brand);transform:scale(1.25);box-shadow:0 0 0 4px var(--brand-pale);}

.info-col{display:flex;flex-direction:column;gap:16px;}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 6px 22px rgba(15,60,40,0.06);}
.info-card h3{font-size:15px;margin:0 0 12px;color:var(--ink-900);display:flex;align-items:center;gap:8px;}
.info-card h3::before{content:"";width:4px;height:16px;background:var(--brand);border-radius:2px;}
.rel-item{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);}
.rel-item:last-child{border-bottom:none;}
.rel-num{flex:0 0 auto;width:24px;height:24px;border-radius:6px;background:var(--brand-pale);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--brand);}
.rel-text b{display:block;font-size:13.5px;color:var(--ink-900);font-weight:600;}
.rel-text span{font-size:12.5px;color:var(--ink-dim);line-height:1.5;}
.legend-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--ink-dim);}
.legend-line{width:28px;height:0;border-top:2px solid;flex:0 0 auto;}
.l-solid{border-top-style:solid;border-color:var(--brand);}
.l-dash-p{border-top-style:dashed;border-color:var(--dim3);}
.l-dash-g{border-top-style:dashed;border-color:var(--dim2);}
.l-dash-b{border-top-style:dashed;border-color:var(--dim1);}

/* ===== Panels / headings ===== */
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:32px 0 16px;}
.panel-head h2{font-size:20px;margin:0;color:var(--ink-900);}
.panel-head .tag{font-size:12px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace;}
.sample-note{font-size:12px;color:var(--ink-dim);background:var(--brand-pale);border:1px solid var(--line-strong);border-radius:8px;padding:8px 14px;margin:14px 0;}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{text-align:right;font-family:'Kanit',sans-serif;font-weight:600;font-size:13px;color:#fff;background:var(--brand);padding:11px 14px;border-bottom:1px solid var(--brand);white-space:nowrap;}
thead th:first-child,tbody td:first-child{text-align:right;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink);text-align:right;background:var(--white);}
tbody tr:nth-child(even) td{background:var(--paper-deep);}
tbody tr:hover td{background:var(--brand-pale);}
.num-cell{font-family:'JetBrains Mono',monospace;color:var(--brand);font-weight:600;}
tfoot td{padding:11px 14px;font-weight:700;color:var(--ink-900);background:var(--paper-deep);border-top:2px solid var(--brand);font-family:'Kanit',sans-serif;}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(15,60,40,0.05);}
.table-wrap table{min-width:640px;}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}

.swatch{display:inline-flex;align-items:center;gap:8px;}
.swatch::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--brand));}
.sw1::before{--c:var(--dim1);} .sw2::before{--c:var(--dim2);} .sw3::before{--c:var(--dim3);} .sw4::before{--c:var(--dim4);}

.status-pill{font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600;}
.status-active{background:#dff0e6;color:#0f6e4d;}
.status-completed{background:var(--brand-pale);color:var(--brand);}
.status-on_hold{background:#fbe9e0;color:#a15a1f;}

/* ===== KPI cards / flow ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
@media (max-width:760px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi-card{border-radius:14px;padding:18px;border:1px solid var(--line);border-left-width:4px;background:var(--white);box-shadow:0 6px 18px rgba(15,60,40,0.05);}
.kpi-card b{display:block;font-family:'JetBrains Mono',monospace;font-size:24px;color:var(--ink-900);}
.kpi-card span{font-size:12.5px;color:var(--ink-dim);}
.flow-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-dim);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-top:6px;box-shadow:0 6px 18px rgba(15,60,40,0.05);}
.flow-row .node{font-family:'Kanit',sans-serif;font-weight:600;color:#fff;background:var(--brand);border-radius:8px;padding:6px 12px;}
.flow-row .arrow{color:var(--brand);font-weight:700;}

/* ===== Forms ===== */
.card-form{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,60,40,0.05);margin-top:6px;}
.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.form-row label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-dim);font-weight:600;min-width:140px;}
.form-row label.grow{flex:1 1 220px;}
.form-row label.w-narrow{min-width:90px;flex:0 0 90px;}
input[type=text],input[type=number],input[type=password],input[type=date],select{
  font-family:'Sarabun',sans-serif;font-size:14px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);}
.checkbox-label{flex-direction:row !important;align-items:center;gap:8px !important;}
.form-actions{display:flex;gap:8px;}
.search-form{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.search-form input[type=text]{min-width:260px;flex:1;}

.btn{font-family:'Kanit',sans-serif;font-weight:500;font-size:13.5px;padding:9px 16px;border-radius:8px;border:1px solid var(--line-strong);background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s;}
.btn:hover{background:var(--paper-deep);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-soft);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-dim);}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn-danger{background:var(--danger-pale);border-color:#f0c9c4;color:var(--danger);}
.btn-danger:hover{background:#f6d8d4;}
.btn-block{width:100%;justify-content:center;}

.pagination{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap;}
.pagination a{padding:6px 12px;border:1px solid var(--line-strong);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;text-decoration:none;color:var(--ink-dim);}
.pagination a.active{background:var(--brand);border-color:var(--brand);color:#fff;}

.kr-checklist{display:grid;grid-template-columns:1fr;gap:6px;max-height:340px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--paper);}
.kr-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;padding:6px 8px;border-radius:6px;}
.kr-check:hover{background:var(--brand-pale);}

.alert{border-radius:10px;padding:11px 16px;margin-bottom:16px;font-size:14px;}
.alert-ok{background:#dff0e6;color:#0f6e4d;border:1px solid #b7ddc7;}
.alert-error{background:var(--danger-pale);color:var(--danger);border:1px solid #f0c9c4;}

/* ===== Footer ===== */
footer{margin-top:20px;border-top:1px solid var(--line);background:var(--white);}
.foot-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;padding:22px 0;font-size:13px;color:var(--ink-dim);}
.foot-strip span.item{padding:0 16px;position:relative;}
.foot-strip span.item:not(:last-child)::after{content:"|";position:absolute;right:-2px;color:var(--line-strong);}
.foot-strip b{color:var(--brand);font-weight:600;}

/* ===== Login page ===== */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;}
.login-wrap{width:100%;max-width:420px;padding:20px;}
.login-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 30px;box-shadow:0 20px 50px rgba(15,60,40,0.12);display:flex;flex-direction:column;gap:14px;}
.login-title{font-size:22px;line-height:1.35;margin:0 0 6px;color:var(--ink-900);}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-dim);font-weight:600;}
.login-hint{font-size:11.5px;color:var(--ink-dim);line-height:1.6;margin-top:6px;}

.login-card{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 34px 30px;
    height: 400px;          /* Fixed height */
    box-shadow: 0 20px 50px rgba(15,60,40,0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Login page ===== */
.login1-body{display:flex;min-height:100vh;align-items:center;justify-content:center;}
.login1-wrap{width:100%;max-width:600px;padding:20px;}
.login1-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 30px;box-shadow:0 20px 50px rgba(15,60,40,0.12);display:flex;flex-direction:column;gap:14px;}
.login1-title{font-size:22px;line-height:1.35;margin:0 0 6px;color:var(--ink-900);}
.login1-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-dim);font-weight:600;}
.login1-hint{font-size:11.5px;color:var(--ink-dim);line-height:1.6;margin-top:6px;}

@media (prefers-reduced-motion: reduce){
  .cube{transition:none;}
}

/* ===== Charts (orders overview) ===== */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media (max-width:900px){.chart-grid{grid-template-columns:1fr;}}
.chart-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,60,40,0.05);}
.chart-card h3{margin:0 0 12px;font-size:15px;color:var(--ink-900);}
.chart-card canvas{max-height:300px;}



html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;   /* δΑθγΛιΑΥ scrollbar */
}

.login-body {
    height: 100vh;
    overflow: hidden;
}

.login-body .container-fluid {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
}


.page-top {
    padding: 10px 0;
    margin-bottom: 5px;
}

.page-top .title {
    margin: 5px 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.page-top .subtitle {
    margin: 5px 0;
}

hr {
    margin: 5px 0 10px;
}