:root{

--bg:#0F1410;
--bg-soft:#161D17;

--card:#1A221C;

--green:#233026;

--gold:#C9A85D;

--gold-soft:rgba(201,168,93,.15);

--text:#F3E8C8;

--muted:#A7A18D;

--line:rgba(201,168,93,.18);

--blue:#315D9B;
--yellow:#D3A93C;
--red:#A8513F;
--orange:#C97A3D;

--radius:18px;

/* easing + depth tokens (Frontend Experience upgrade) */
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-soft:cubic-bezier(.4,0,.2,1);
--shadow-card:0 6px 24px rgba(0,0,0,.35);
--shadow-glow:0 10px 34px rgba(201,168,93,.20);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Kanit',sans-serif;

color:var(--text);

min-height:100vh;

overflow-x:hidden;

}

/* Fixed background as a composited layer instead of background-attachment:fixed.
   Same look, but no full-page repaint on every scroll (much smoother). */
body::before{

content:"";

position:fixed;
inset:0;
z-index:-1;

background-image:

linear-gradient(
rgba(9,11,8,0.55),
rgba(17,23,18,0.65)
),

url("assets/dark-canvas-bg01.webp");

background-repeat:no-repeat,no-repeat;
background-size:cover,cover;
background-position:center top,center;

}


/* =====================
HEADER
===================== */

.topbar{

position:sticky;
top:0;
z-index:100;

background:
rgba(12,16,12,.85);

backdrop-filter:blur(12px);

border-bottom:
1px solid var(--line);

}

.brand{

max-width:1200px;

margin:auto;

padding:18px 24px;

display:flex;

align-items:center;

gap:16px;

}

.logo{

width:64px;
height:64px;

display:flex;

align-items:center;
justify-content:center;

}

.logo img{

width:48px;

height:48px;

object-fit:contain;

}

.brand h1{

font-size:20px;
font-weight:400;

color:var(--text);

}

.brand p{

font-family:'IBM Plex Mono',monospace;

font-size:11px;

letter-spacing:2px;

color:var(--gold);

margin-top:4px;

}

/* =====================
NAVIGATION
===================== */

.nav-tabs{

display:flex;

justify-content:center;

gap:12px;

padding:20px;

flex-wrap:wrap;

}

.tab{

background:none;

border:
1px solid var(--line);

color:var(--text);

padding:12px 20px;

border-radius:12px;

cursor:pointer;

font-family:'Kanit';

transition:.25s;

}

.tab:hover{

border-color:var(--gold);

}

.tab.active{

background:
rgba(201,168,93,.12);

border-color:
var(--gold);

}

/* =====================
MAIN
===================== */

main{

max-width:1200px;

margin:auto;

padding:20px;

}

.view{

display:none;

}

.view.active{

display:block;

}

/* =====================
HERO
===================== */

.hero-card{

position:relative;

overflow:hidden;

padding:60px;

min-height:420px;

margin-bottom:24px;

border-radius:24px;


background-image:

linear-gradient(

rgba(6,12,8,.75),

rgba(6,12,8,.82)

),

url("assets/heroroster.webp");


background-size:

cover;


background-position:

center;


background-repeat:

no-repeat;



border:

1px solid rgba(201,168,93,.25);

}

/* มือถือ */

@media (max-width:768px){

.hero-card{

background-position:75% center;

}

}

.hero-card h2{

font-size:38px;

line-height:1.2;

font-weight:300;

margin-bottom:12px;

}


.hero-eyebrow{

font-family:
'IBM Plex Mono',
monospace;

font-size:12px;

letter-spacing:3px;

color:var(--gold);

margin-bottom:16px;

}



#todayDuty{

font-size:18px;

color:var(--muted);

margin-bottom:28px;

}



.hero-card{

position:relative;

overflow:hidden;

}



.hero-card::before{


content:"";


position:absolute;


top:18px;
left:18px;


width:60px;
height:60px;



border-top:
1px solid rgba(201,168,93,.35);

border-left:
1px solid rgba(201,168,93,.35);


}



.hero-card::after{


content:"";


position:absolute;


bottom:18px;
right:18px;


width:60px;
height:60px;



border-bottom:
1px solid rgba(201,168,93,.35);

border-right:
1px solid rgba(201,168,93,.35);


}

.hero-stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:16px;

}

.stat{

background:
rgba(255,255,255,.03);

padding:18px;

border-radius:14px;

text-align:center;

}

.stat span{

display:block;

font-size:28px;

font-weight:500;

color:var(--gold);

}

.stat small{

color:var(--muted);

}

/* =====================
DATE GRID
===================== */

.date-grid{

display:grid;

grid-template-columns:
repeat(6,1fr);

gap:12px;

margin-bottom:28px;

}

.date-btn{

height:56px;

background:
var(--card);

border:
1px solid var(--line);

border-radius:12px;

color:var(--text);

font-size:18px;

cursor:pointer;

transition:.25s;

}

.date-btn:hover{

border-color:var(--gold);

}

.date-btn.active{

background:
rgba(201,168,93,.12);

border-color:
var(--gold);

}


.month-grid{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:28px;

}

.month-btn{

height:48px;

padding:0 20px;

background:var(--card);

border:1px solid var(--line);

border-radius:12px;

color:var(--text);

font-size:16px;

cursor:pointer;

transition:.25s;

}

.month-btn:hover{

border-color:var(--gold);

}

.month-btn.active{

background:rgba(201,168,93,.12);

border-color:var(--gold);

}


.assistant-card{


background:

linear-gradient(

145deg,

#182018,

#111712

);


border:

1px solid var(--gold);



border-radius:

20px;



padding:24px;



margin-bottom:24px;



text-align:center;

}



.assistant-card h3{


font-size:18px;



margin-bottom:14px;



color:

var(--gold);


}



.assistant-name{


font-size:26px;



font-weight:500;



margin-bottom:8px;


}



.assistant-sub{


font-size:14px;



color:

var(--muted);


}

/* =====================
SECTION
===================== */

.section-title{

font-size:22px;

margin-bottom:18px;

font-weight:400;

}

/* =====================
TIMELINE
===================== */

.timeline-card{

background:
var(--card);

border:
1px solid var(--line);

border-radius:
18px;

padding:18px;

margin-bottom:14px;

transition:.25s;

}

.timeline-card:hover{

transform:
translateY(-3px);

border-color:
var(--gold);

}

.timeline-time{

font-family:
'IBM Plex Mono',
monospace;

font-size:14px;

color:var(--gold);

margin-bottom:10px;

}

.timeline-point{

font-size:22px;

font-weight:500;

margin-bottom:6px;

}

.timeline-name{

color:var(--muted);

}

/* =====================
TABLE
===================== */

.table-wrapper{

overflow:auto;

max-height:72vh;

border-radius:18px;

border:
1px solid var(--line);

box-shadow:var(--shadow-card);

}

table{

width:100%;

border-collapse:separate;
border-spacing:0;

min-width:900px;

}

th{

position:sticky;
top:0;
z-index:3;

background:#182018;

padding:14px;

border-bottom:
1px solid var(--line);

}

/* corner cell (รายชื่อ) stays pinned both ways */
thead th:first-child{
left:0;
z-index:5;
}

tbody td:first-child,
tbody tr td:first-child{
position:sticky;
left:0;
z-index:1;
background:var(--bg-soft);
text-align:left;
font-weight:500;
}

td{

padding:14px;

text-align:center;

border-bottom:
1px solid rgba(255,255,255,.05);

transition:background .18s var(--ease-soft);

}

tbody tr{
transition:background .18s var(--ease-soft);
}

tbody tr:hover{

background:
rgba(201,168,93,.06);

}

tbody tr:hover td:first-child{
background:#1d251e;
color:var(--gold);
}

/* =====================
CELL COLORS
===================== */

.cell-duty{

background:
rgba(49,93,155,.25);

cursor:pointer;

}

.cell-leave{

background:
rgba(211,169,60,.25);

}

.cell-sick{

background:
rgba(168,81,63,.25);

}

.cell-assist{

background:
rgba(201,122,61,.25);

}

.cell-patrol{

background:
rgba(45,212,191,.18);

color:#2dd4bf;

font-weight:600;

cursor:pointer;

}

.timeline-code{

font-size:12px;

color:var(--gold);

margin-top:6px;

font-family:
'IBM Plex Mono',
monospace;

}

.cell-leave{


background:

rgba(210,60,60,.15);


color:


#ff7b7b;


font-weight:600;


}



.cell-sick{


background:


rgba(255,210,80,.15);


color:


#ffd166;


font-weight:600;


}



.cell-absent{


background:


rgba(170,90,255,.15);


color:


#c792ff;


font-weight:600;


}

.assistant-status{

margin-top:18px;

padding-top:14px;

border-top:

1px solid rgba(255,255,255,.08);

}



.assistant-status div{

margin-top:6px;

font-size:14px;

font-weight:600;

}



.leave{

color:#ff7b7b;

}



.sick{

color:#ffd166;

}



.absent{

color:#c792ff;

}

/* =====================
MODAL
===================== */

.modal{

position:fixed;

inset:0;

display:flex;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:opacity .2s ease, visibility .2s ease;

align-items:center;

justify-content:center;

background:
rgba(0,0,0,.55);

backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);

z-index:999;

padding:20px;

}

.modal.open{

opacity:1;

visibility:visible;

pointer-events:auto;

}

.modal-content{

width:100%;
max-width:500px;

background:
var(--bg-soft);

border:
1px solid var(--gold);

border-radius:
20px;

padding:24px;

position:relative;

}

#closeModal{

position:absolute;

top:12px;
right:12px;

background:none;

border:none;

color:var(--gold);

font-size:20px;

cursor:pointer;

}

/* =====================
MOBILE
===================== */

@media(max-width:768px){

.hero-stats{

grid-template-columns:1fr;

}

.date-grid{

grid-template-columns:
repeat(3,1fr);

}

.brand h1{

font-size:16px;

}

.section-title{

font-size:18px;

}

.timeline-point{

font-size:18px;

}

.hero-card h2{

font-size:28px;

}

}

/* =====================
MOTION POLISH
เพิ่มความลื่นไหล แต่ไม่หน่วงการใช้งาน
===================== */

/* สลับแท็บ: เฟดเข้าเบา ๆ */
@keyframes viewIn{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:translateY(0); }
}

.view.active{
animation:viewIn .35s ease both;
}

/* hover glow บนการ์ด (โทนทองเดิม) */
.hero-card,
.assistant-card,
.timeline-card{
transition:transform .25s, border-color .25s, box-shadow .25s;
}

.timeline-card:hover,
.assistant-card:hover{
box-shadow:0 8px 28px rgba(201,168,93,.18);
}

/* modal: ซูมเนื้อหาเข้าตอนเปิด */
.modal-content{
transform:scale(.96);
transition:transform .2s ease;
}

.modal.open .modal-content{
transform:scale(1) translateY(0);
}

/* ======================================================================
   FRONTEND EXPERIENCE UPGRADE
   Premium military command-dashboard polish.
   Pure transform/opacity motion. Continuous FX disabled on mobile
   and for prefers-reduced-motion.
====================================================================== */

/* ---------- shared entrance ---------- */
@keyframes riseIn{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}

/* ---------- INTRO SEQUENCE ---------- */
.intro{
position:fixed;
inset:0;
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(120% 120% at 50% 40%, #11160f 0%, #070a06 70%);
overflow:hidden;
opacity:1;
transition:opacity .45s var(--ease-soft);
}
.intro.hide{
opacity:0;
pointer-events:none;
}

.intro-grid{
position:absolute;
inset:-2px;
background-image:
linear-gradient(rgba(201,168,93,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,93,.10) 1px, transparent 1px);
background-size:42px 42px;
opacity:0;
animation:introGrid 1.8s var(--ease-out) forwards;
mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}
@keyframes introGrid{
0%{ opacity:0; transform:scale(1.08); }
35%{ opacity:1; }
100%{ opacity:.6; transform:scale(1); }
}

.intro-scan{
position:absolute;
left:0;
right:0;
height:140px;
top:-140px;
background:linear-gradient(180deg, transparent, rgba(201,168,93,.18), transparent);
animation:introScan 1.7s var(--ease-soft) .25s forwards;
}
@keyframes introScan{
0%{ top:-140px; opacity:0; }
20%{ opacity:1; }
100%{ top:100%; opacity:0; }
}

.intro-inner{
position:relative;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.intro-logo{
width:84px;
height:84px;
object-fit:contain;
opacity:0;
filter:drop-shadow(0 0 18px rgba(201,168,93,.35));
animation:riseIn .7s var(--ease-out) .15s forwards;
}
.intro-title{
font-family:'IBM Plex Mono',monospace;
letter-spacing:6px;
font-size:14px;
color:var(--gold);
opacity:0;
animation:riseIn .7s var(--ease-out) .4s forwards;
}
.intro-loading{
font-family:'IBM Plex Mono',monospace;
letter-spacing:3px;
font-size:11px;
color:var(--muted);
opacity:0;
animation:riseIn .6s var(--ease-out) .7s forwards;
}
.intro-bar{
width:220px;
max-width:60vw;
height:3px;
border-radius:3px;
background:rgba(201,168,93,.15);
overflow:hidden;
opacity:0;
animation:riseIn .5s var(--ease-out) .7s forwards;
}
.intro-bar span{
display:block;
height:100%;
width:0;
border-radius:3px;
background:linear-gradient(90deg, rgba(201,168,93,.4), var(--gold));
animation:introBar 1.15s var(--ease-soft) .8s forwards;
}
@keyframes introBar{ to{ width:100%; } }

.intro-skip{
position:absolute;
bottom:26px;
right:26px;
background:rgba(255,255,255,.04);
border:1px solid var(--line);
color:var(--muted);
font-family:'IBM Plex Mono',monospace;
letter-spacing:2px;
font-size:11px;
padding:9px 16px;
border-radius:10px;
cursor:pointer;
transition:color .2s, border-color .2s, background .2s;
}
.intro-skip:hover{
color:var(--gold);
border-color:var(--gold);
background:rgba(201,168,93,.08);
}

/* ---------- HERO FX LAYERS ---------- */
.hero-fx{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
overflow:hidden;
border-radius:24px;
}
/* keep text above the fx layers */
.hero-eyebrow,
.hero-card h2,
#todayDuty,
.hero-stats{
position:relative;
z-index:2;
}

.hero-grid{
position:absolute;
inset:-10%;
background-image:
linear-gradient(rgba(201,168,93,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,93,.06) 1px, transparent 1px);
background-size:46px 46px;
mask-image:radial-gradient(circle at 30% 30%, #000, transparent 70%);
-webkit-mask-image:radial-gradient(circle at 30% 30%, #000, transparent 70%);
animation:gridDrift 26s linear infinite;
will-change:transform;
}
@keyframes gridDrift{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(46px,46px,0); }
}

.hero-radar{
position:absolute;
top:50%;
left:50%;
width:680px;
height:680px;
margin:-340px 0 0 -340px;
border-radius:50%;
background:conic-gradient(from 0deg, transparent 0deg, rgba(201,168,93,.10) 26deg, transparent 60deg);
mask-image:radial-gradient(circle, #000 0%, #000 60%, transparent 72%);
-webkit-mask-image:radial-gradient(circle, #000 0%, #000 60%, transparent 72%);
opacity:.7;
animation:radarSweep 9s linear infinite;
will-change:transform;
}
@keyframes radarSweep{ to{ transform:rotate(360deg); } }

.hero-dust{
position:absolute;
inset:0;
background-image:
radial-gradient(1.5px 1.5px at 20% 30%, rgba(243,232,200,.5), transparent),
radial-gradient(1.5px 1.5px at 70% 60%, rgba(243,232,200,.35), transparent),
radial-gradient(1px 1px at 45% 80%, rgba(243,232,200,.4), transparent),
radial-gradient(1.5px 1.5px at 85% 25%, rgba(243,232,200,.3), transparent),
radial-gradient(1px 1px at 30% 65%, rgba(243,232,200,.35), transparent);
animation:dustDrift 18s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes dustDrift{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(-14px,-22px,0); }
}

/* animated border glow on the hero */
.hero-card{
animation:riseIn .7s var(--ease-out) both;
box-shadow:var(--shadow-card);
}
.hero-card::before,
.hero-card::after{
z-index:1;
animation:cornerPulse 4.5s var(--ease-soft) infinite;
}
@keyframes cornerPulse{
0%,100%{ opacity:.5; }
50%{ opacity:1; }
}

/* ---------- STAT CARDS ---------- */
.hero-stats .stat{
border:1px solid rgba(255,255,255,.06);
transition:transform .25s var(--ease-out), border-color .25s, box-shadow .25s, background .25s;
animation:riseIn .55s var(--ease-out) both;
}
.hero-stats .stat:nth-child(1){ animation-delay:.25s; }
.hero-stats .stat:nth-child(2){ animation-delay:.33s; }
.hero-stats .stat:nth-child(3){ animation-delay:.41s; }
.hero-stats .stat:hover{
transform:translateY(-4px);
border-color:var(--gold);
background:rgba(201,168,93,.05);
box-shadow:var(--shadow-glow);
}
.stat span{
font-variant-numeric:tabular-nums;
letter-spacing:.5px;
}

/* ---------- TABS ---------- */
.tab{
position:relative;
transition:border-color .2s, background .2s, color .2s, transform .12s;
}
.tab:hover{ background:rgba(201,168,93,.05); }
.tab:active{ transform:translateY(1px); }
.tab.active{
box-shadow:0 0 0 1px var(--gold-soft), 0 6px 18px rgba(201,168,93,.12);
}

/* ---------- MONTH / DATE BUTTONS ---------- */
.month-btn,
.date-btn{
transition:transform .18s var(--ease-out), border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.month-btn:hover,
.date-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.month-btn:active,
.date-btn:active{ transform:translateY(0); }
.date-btn.active,
.month-btn.active{
box-shadow:0 0 0 1px var(--gold-soft), 0 8px 20px rgba(201,168,93,.14);
color:var(--gold);
}

/* ---------- TIMELINE STAGGER + ACCENT ---------- */
.timeline-card{
position:relative;
animation:riseIn .4s var(--ease-out) both;
box-shadow:var(--shadow-card);
overflow:hidden;
}
.timeline-card::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:3px;
background:linear-gradient(var(--gold), transparent);
opacity:0;
transition:opacity .25s;
}
.timeline-card:hover::before{ opacity:1; }
.timeline-card:hover{ transform:translateY(-4px); }
.timeline-card:nth-child(1){ animation-delay:.04s; }
.timeline-card:nth-child(2){ animation-delay:.08s; }
.timeline-card:nth-child(3){ animation-delay:.12s; }
.timeline-card:nth-child(4){ animation-delay:.16s; }
.timeline-card:nth-child(5){ animation-delay:.20s; }
.timeline-card:nth-child(6){ animation-delay:.24s; }
.timeline-card:nth-child(7){ animation-delay:.28s; }
.timeline-card:nth-child(8){ animation-delay:.32s; }

/* ---------- DUTY CELLS ---------- */
.cell-duty,
.cell-patrol,
.cell-assist,
.cell-leave,
.cell-sick,
.cell-absent{
position:relative;
}
.cell-duty:hover,
.cell-patrol:hover{
box-shadow:inset 0 0 0 1px var(--gold);
filter:brightness(1.18);
}

/* ---------- MODAL CONTENT ---------- */
.modal-content{
transform:scale(.96) translateY(8px);
box-shadow:0 24px 60px rgba(0,0,0,.5);
}
#modalBody h2{
font-weight:400;
letter-spacing:.5px;
color:var(--gold);
}
#modalBody p{
margin-top:8px;
line-height:1.6;
}
#modalBody strong{
color:var(--muted);
font-weight:400;
}
#closeModal{
width:34px;
height:34px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
transition:background .2s, color .2s, transform .15s;
}
#closeModal:hover{
background:rgba(201,168,93,.1);
transform:rotate(90deg);
}

/* ---------- MOBILE: trim continuous FX ---------- */
@media (max-width:768px){
.hero-radar,
.hero-dust{ display:none; }
.hero-grid{ animation:none; }
}

/* ---------- REDUCED MOTION: keep transitions, drop loops ---------- */
@media (prefers-reduced-motion:reduce){
.intro{ display:none; }
.hero-grid,
.hero-radar,
.hero-dust,
.hero-card::before,
.hero-card::after{ animation:none; }
}

/* ======================================================================
   PERSONNEL SEARCH (Phase B.1)
   Mobile-first quick-find overlay.
====================================================================== */

/* trigger button in the topbar */
.search-btn{
margin-left:auto;
width:46px;
height:46px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
background:rgba(201,168,93,.08);
border:1px solid var(--line);
border-radius:12px;
color:var(--gold);
cursor:pointer;
transition:transform .15s var(--ease-out), border-color .2s, background .2s, box-shadow .2s;
}
.search-btn:hover{
border-color:var(--gold);
background:rgba(201,168,93,.12);
box-shadow:var(--shadow-glow);
}
.search-btn:active{ transform:scale(.92); }

/* overlay */
.search-overlay{
position:fixed;
inset:0;
z-index:1500;
display:flex;
align-items:flex-start;
justify-content:center;
padding:64px 16px 16px;
background:rgba(6,9,6,.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .22s var(--ease-soft), visibility .22s var(--ease-soft);
}
.search-overlay.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.search-panel{
width:100%;
max-width:520px;
max-height:78vh;
display:flex;
flex-direction:column;
background:var(--bg-soft);
border:1px solid var(--gold);
border-radius:18px;
box-shadow:0 24px 60px rgba(0,0,0,.5);
padding:18px;
transform:scale(.96) translateY(-8px);
transition:transform .22s var(--ease-out);
}
.search-overlay.open .search-panel{
transform:scale(1) translateY(0);
}

.search-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}
.search-title{
font-size:17px;
color:var(--text);
}
.search-sub{
margin-top:3px;
font-size:12px;
color:var(--muted);
font-family:'IBM Plex Mono',monospace;
letter-spacing:.5px;
}
.search-close{
flex-shrink:0;
width:34px;
height:34px;
border:none;
background:none;
color:var(--gold);
font-size:18px;
cursor:pointer;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
transition:background .2s, transform .15s;
}
.search-close:hover{
background:rgba(201,168,93,.1);
transform:rotate(90deg);
}

.search-input{
width:100%;
height:52px;
padding:0 16px;
font-family:'Kanit',sans-serif;
font-size:17px;
color:var(--text);
background:var(--card);
border:1px solid var(--line);
border-radius:12px;
outline:none;
transition:border-color .2s, box-shadow .2s;
}
.search-input::placeholder{ color:var(--muted); }
.search-input:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px var(--gold-soft);
}

.search-results{
margin-top:12px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
display:flex;
flex-direction:column;
gap:8px;
}
.search-empty{
text-align:center;
color:var(--muted);
padding:28px 0;
font-size:14px;
}

.search-result{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
width:100%;
padding:14px;
background:var(--card);
border:1px solid var(--line);
border-radius:12px;
color:var(--text);
font-family:'Kanit',sans-serif;
text-align:left;
cursor:pointer;
transition:transform .14s var(--ease-out), border-color .2s, background .2s;
animation:resultIn .18s var(--ease-out) both;
}
.search-result:hover{
border-color:var(--gold);
background:rgba(201,168,93,.05);
}
.search-result:active{ transform:scale(.97); }
.search-result:focus-visible{
border-color:var(--gold);
box-shadow:0 0 0 3px var(--gold-soft);
outline:none;
}
@keyframes resultIn{
from{ opacity:0; transform:translateY(6px) scale(.98); }
to{ opacity:1; transform:translateY(0) scale(1); }
}

.sr-info{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.sr-name{
font-size:16px;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sr-time{
font-size:12px;
color:var(--muted);
font-family:'IBM Plex Mono',monospace;
}
.sr-point{
flex-shrink:0;
min-width:56px;
text-align:center;
padding:8px 12px;
border-radius:10px;
font-weight:600;
font-size:14px;
}
.cell-off{
background:rgba(255,255,255,.05);
color:var(--muted);
}

@media (max-width:768px){
.search-overlay{ padding:52px 12px 12px; }
.search-panel{ max-height:82vh; padding:16px; }
}

/* ======================================================================
   FINAL POLISH (Phase C)
   Current-duty highlight, mobile/safe-area, accessibility.
====================================================================== */

/* ---------- CURRENT DUTY HIGHLIGHT ---------- */
.timeline-live{
position:absolute;
top:14px;
right:14px;
display:none;
align-items:center;
gap:7px;
font-family:'IBM Plex Mono',monospace;
font-size:10px;
letter-spacing:1.5px;
color:var(--gold);
background:var(--gold-soft);
border:1px solid var(--line);
padding:4px 10px;
border-radius:999px;
}
.live-dot{
width:7px;
height:7px;
border-radius:50%;
background:var(--gold);
animation:livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
0%{ box-shadow:0 0 0 0 rgba(201,168,93,.45); }
70%{ box-shadow:0 0 0 7px rgba(201,168,93,0); }
100%{ box-shadow:0 0 0 0 rgba(201,168,93,0); }
}

.timeline-card.active-now{
border-color:var(--gold);
box-shadow:0 0 0 1px var(--gold), 0 12px 32px rgba(201,168,93,.22);
}
.timeline-card.active-now .timeline-live{ display:inline-flex; }
.timeline-card.active-now .timeline-time{ color:var(--gold); }
.timeline-card.active-now::before{ opacity:1; }

/* ---------- ACCESSIBILITY: keyboard focus (mouse appearance unchanged) ---------- */
.tab:focus-visible,
.date-btn:focus-visible,
.month-btn:focus-visible,
.search-btn:focus-visible,
#closeModal:focus-visible,
.search-close:focus-visible,
.search-input:focus-visible,
.td-action-btn:focus-visible,
.td-change:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}

/* kill the blue tap flash on touch — feels more native */
button,
.search-result,
.tab,
.date-btn,
.month-btn{
-webkit-tap-highlight-color:transparent;
}

/* ---------- SCROLLING: contain momentum, no body bounce ---------- */
.table-wrapper,
.search-results{
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}

/* ---------- MOBILE UX / SAFE AREA ---------- */
@media (max-width:768px){

.topbar{
padding-top:env(safe-area-inset-top);
}

main{
padding-left:max(16px, env(safe-area-inset-left));
padding-right:max(16px, env(safe-area-inset-right));
padding-bottom:calc(34px + env(safe-area-inset-bottom));
}

.brand{
padding:14px 16px;
}

.nav-tabs{
padding:12px 16px;
gap:10px;
}

/* full-width tabs = larger touch targets */
.tab{
flex:1;
text-align:center;
padding:13px 12px;
}

.hero-card{
padding:30px 22px;
min-height:330px;
border-radius:20px;
}

.hero-card h2{
font-size:26px;
}

#todayDuty{
font-size:16px;
margin-bottom:22px;
}

.section-title{
margin-bottom:14px;
}

.timeline-live{
top:12px;
right:12px;
}

/* keep close buttons comfortably tappable */
#closeModal,
.search-close{
width:40px;
height:40px;
}

}

/* ---------- REDUCED MOTION (extend): calm the live pulse ---------- */
@media (prefers-reduced-motion:reduce){
.live-dot{ animation:none; }
}

/* ======================================================================
   TODAY'S DUTY (Phase D) — personalized hero content
   Lives inside the existing hero-card; reuses its entrance + FX.
====================================================================== */

#todaysDuty{
position:relative;
z-index:2;
}

.td-name{
font-size:34px;
font-weight:300;
line-height:1.2;
margin-bottom:6px;
animation:riseIn .45s var(--ease-out) both;
}
.td-date{
font-family:'IBM Plex Mono',monospace;
font-size:13px;
letter-spacing:1px;
color:var(--muted);
margin-bottom:22px;
}

/* first-launch / welcome state */
.td-prompt{
color:var(--muted);
font-size:15px;
margin-bottom:20px;
}
.td-action-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:50px;
padding:0 28px;
font-family:'Kanit',sans-serif;
font-size:16px;
font-weight:500;
color:var(--bg);
background:var(--gold);
border:none;
border-radius:12px;
cursor:pointer;
transition:transform .15s var(--ease-out), box-shadow .2s, filter .2s;
}
.td-action-btn:hover{
filter:brightness(1.06);
box-shadow:var(--shadow-glow);
}
.td-action-btn:active{ transform:scale(.97); }

/* change-profile (secondary, top-right) */
.td-change{
position:absolute;
top:0;
right:0;
z-index:3;            /* อยู่เหนือ .td-name ไม่งั้นกล่องชื่อทับจนกดไม่ได้บนจอกว้าง */
min-height:38px;
padding:0 14px;
font-family:'IBM Plex Mono',monospace;
font-size:11px;
letter-spacing:1px;
color:var(--muted);
background:rgba(255,255,255,.04);
border:1px solid var(--line);
border-radius:10px;
cursor:pointer;
transition:color .2s, border-color .2s, background .2s, transform .12s var(--ease-out);
}
.td-change:hover{
color:var(--gold);
border-color:var(--gold);
background:rgba(201,168,93,.08);
}
.td-change:active{ transform:scale(.94); }

/* status cards */
.td-status{
position:relative;
overflow:hidden;
background:var(--card);
border:1px solid var(--line);
border-radius:16px;
padding:20px 22px;
margin-bottom:12px;
box-shadow:var(--shadow-card);
animation:riseIn .45s var(--ease-out) both;
}
.td-status:last-child{ margin-bottom:0; }
.td-status-head{
font-size:20px;
font-weight:500;
}
.td-status-sub{
margin-top:6px;
color:var(--muted);
font-size:14px;
}
.td-point{
margin-top:10px;
font-size:24px;
font-weight:500;
}
.td-time{
margin-top:4px;
font-family:'IBM Plex Mono',monospace;
font-size:15px;
color:var(--gold);
}

/* countdown (Phase E) — small number transition on each minute tick */
.td-countdown{
margin-top:10px;
font-size:14px;
color:var(--muted);
animation:countTick .3s var(--ease-out);
}
@keyframes countTick{
from{ opacity:.35; transform:translateY(-2px); }
to{ opacity:1; transform:translateY(0); }
}

/* NEXT DUTY block (Phase E) — slide in, reuses .td-status cards */
.td-next{
margin-top:18px;
padding-top:18px;
border-top:1px solid var(--line);
animation:nextIn .4s var(--ease-out) both;
}
@keyframes nextIn{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:translateY(0); }
}
.td-section-label{
font-family:'IBM Plex Mono',monospace;
font-size:11px;
letter-spacing:2px;
color:var(--gold);
margin-bottom:10px;
}
.td-none{ margin-top:0; }
/* date / date-range line at the top of each NEXT DUTY card */
.td-next-date{
font-family:'IBM Plex Mono',monospace;
font-size:12px;
letter-spacing:.5px;
color:var(--gold);
margin-bottom:8px;
}

/* role accent bar (left edge) */
.td-status::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
}
.td-onduty::before{ background:var(--blue); }
.td-assist::before{ background:var(--orange); }
.td-leave::before{ background:var(--yellow); }
.td-sick::before{ background:var(--orange); }
.td-absent::before{ background:#a05aff; }
.td-off{ border-color:rgba(120,200,120,.35); }
.td-off::before{ background:#5fbf6f; }

/* reuse Phase C active-duty highlight on the status card */
.td-status.active-now{
border-color:var(--gold);
box-shadow:0 0 0 1px var(--gold), 0 12px 32px rgba(201,168,93,.22);
}
/* badge is always rendered now; show only when active (timer toggles the class) */
.td-status .timeline-live{ display:none; }
.td-status.active-now .timeline-live{ display:inline-flex; }

@media (max-width:768px){
.td-name{ font-size:28px; }
.td-change{
position:static;
display:inline-block;
margin-bottom:16px;
}
.td-status{ padding:18px; }
.td-action-btn{ width:100%; }
}

/* ======================================================================
   PUNISHMENT OVERRIDE (Cloud) — เวรโทษเฉพาะกิจ
   ทับ timeline ของ Dashboard เฉพาะวันที่แอดมินปรับ
====================================================================== */

.punish-banner{
background:linear-gradient(180deg, rgba(168,81,63,.20), rgba(168,81,63,.06));
border:1px solid var(--red);
border-radius:var(--radius);
padding:16px 18px;
margin-bottom:16px;
}

.punish-title{
font-weight:600;
letter-spacing:.4px;
color:var(--red);
margin-bottom:8px;
}

.punish-note{
color:var(--text);
font-size:15px;
line-height:1.55;
white-space:pre-wrap;
}

.punish-by{
margin-top:10px;
font-size:13px;
color:var(--muted);
}

/* เหมือนการ์ดเวรปกติ แค่มีขอบ/โทนแดงอ่อน ๆ ให้รู้ว่าเป็นเวรโทษ */
.timeline-card.punish{
border-color:var(--red);
background:linear-gradient(180deg, rgba(168,81,63,.10), var(--card));
}

.timeline-card.punish .timeline-code{
color:var(--red);
}

/* สแตมป์ "เวรโทษเข้าแทน" ทับการ์ดเวรปกติใน MY DUTY (เวลาเดียวกันโดนเวรโทษแทน) */
.td-status.superseded{ position:relative; overflow:hidden; }
.td-status.superseded > *:not(.duty-stamp){ opacity:.35; }
.td-status.superseded .td-point,
.td-status.superseded .td-time{ text-decoration:line-through; }

.duty-stamp{
position:absolute; inset:0; z-index:3; pointer-events:none;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
text-align:center; transform:rotate(-8deg);
color:var(--red); font-weight:700; font-size:20px; letter-spacing:1px;
text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.duty-stamp span{ font-size:12px; font-weight:600; letter-spacing:2px; }
.duty-stamp::before{
content:""; position:absolute; inset:18% 8%;
border:2.5px solid var(--red); border-radius:10px; opacity:.65;
}

/* จุดแดงบนปุ่มวันที่โดนปรับ ให้สังเกตง่าย */
.date-btn.has-override{ position:relative; }
.date-btn.has-override::after{
content:"";
position:absolute;
top:5px; right:5px;
width:6px; height:6px;
border-radius:50%;
background:var(--red);
}