/* The workspace frame is identical across tools, administration and profile editing. */
.workspace-sidebar .shell-nav-section{margin:0 0 22px}
.workspace-sidebar .shell-nav-section .menu-title{margin:0 0 8px;padding:0 12px;font:600 11px 'Noto Sans Thai',sans-serif;line-height:1.6;letter-spacing:0;color:#61758a}
.workspace-sidebar .shell-navigation{padding:4px 0 20px;scrollbar-width:thin;scrollbar-color:#c8d6e3 transparent}
.workspace-sidebar .shell-nav-section .menu-list{margin:0;gap:4px}
.workspace-sidebar .shell-nav-section .menu-item{min-height:44px;padding:10px 12px;border-radius:8px;font-size:13px}
.workspace-sidebar .shell-nav-section .menu-item>i{font-size:20px;color:#70869a}
.workspace-sidebar .shell-nav-section .menu-item.active>i{color:var(--primary)}
.workspace-sidebar .menu-item:focus-visible,.shell-admin-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.workspace-sidebar .shell-admin-section{margin-top:6px;padding-top:14px;border-top:1px solid var(--border-light)}
.shell-admin-toggle{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#52687f;cursor:pointer;list-style:none}
.shell-admin-toggle::-webkit-details-marker{display:none}
.shell-admin-toggle:hover{background:var(--primary-soft);color:var(--primary)}
.shell-admin-toggle>i:first-child{font-size:19px}
.shell-admin-toggle>i:last-child{margin-left:auto;font-size:15px;transition:transform .18s}
.shell-admin-section[open] .shell-admin-toggle>i:last-child{transform:rotate(180deg)}
.workspace-sidebar .shell-admin-section .menu-list{margin:6px 0 0;gap:3px}
.workspace-sidebar .shell-admin-section .menu-item{min-height:40px;padding:9px 12px;font-size:12px;border-radius:8px}
.workspace-sidebar .shell-admin-section .menu-item>i{font-size:18px}
:root { --sidebar-width: 248px; --header-height: 76px; --sidebar-text: #52687f; --sidebar-muted: #8797a9; --primary-soft: #edf7ff; --primary-border: #c5e3f8; --text-primary: #20364e; --text-secondary: #738399; --bg-body: #f4f8fc; --border-light: #e2ebf3; }
.shell-login { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--primary); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.shell-login[hidden] { display: none; }
.public-browse-notice { display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 24px; border: 1px solid #cce5f8; border-radius: 14px; background: #edf7ff; color: #407da6; font-size: 12px; line-height: 1.8; }
.public-browse-notice > i { font-size: 22px; flex-shrink: 0; }
.public-browse-notice > span { flex: 1; }
.public-browse-notice button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
@media(max-width:600px) { .public-browse-notice { flex-wrap: wrap; padding: 12px; } .public-browse-notice button { margin-left: 30px; } .shell-login { padding: 10px 12px; font-size: 12px; } }
body { background: var(--bg-body); }
.workspace-header, .admin-console .workspace-header { position: fixed; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); min-height: var(--header-height); padding: 0 28px; background: #fff; border-bottom: 1px solid var(--border-light); box-shadow: 0 3px 18px rgb(35 72 105 / 3%); z-index: 1000; }
.workspace-header .header-brand { display: flex; align-items: center; gap: 14px; width: auto; }
.workspace-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #223c55; }
.workspace-brand img { width: 38px; height: 42px; object-fit: contain; margin: 0; }
.workspace-brand > span { font-family: 'Inter','Noto Sans Thai',sans-serif; font-weight: 800; letter-spacing: -.5px; font-size: 19px; line-height: 1.3; }
.workspace-brand small { display: block; color: #8598ab; font-size: 8px; font-weight: 600; letter-spacing: .12em; margin-top: 4px; }
.workspace-header .header-actions { display: flex; gap: 12px; align-items: center; }
.workspace-header .lang-toggle { border: 1px solid var(--border-light); border-radius: 11px; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; color: #62768c; font-size: 12px; background: #fff; cursor: pointer; }
.workspace-header .profile-btn { display: flex; gap: 10px; align-items: center; padding: 5px 11px 5px 5px; min-height: 46px; border-radius: 12px; border: 1px solid var(--border-light); background: #f8fbfe; color: #314b65; cursor: pointer; }
.workspace-header .profile-btn img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.workspace-header .profile-info-text { align-items: flex-start; display: flex; flex-direction: column; text-align: left; gap: 3px; }
.workspace-header .profile-info-text strong { font-size: 12px; font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-header .profile-info-text small { font-size: 10px; color: var(--primary); }
.shell-account{position:relative;margin-left:auto}
.shell-account[hidden],.shell-profile-menu[hidden]{display:none!important}
.shell-profile-menu{position:absolute;right:0;top:calc(100% + 10px);width:220px;max-width:calc(100vw - 28px);padding:6px;background:#fff;border:1px solid var(--border-light);border-radius:12px;z-index:1010}
.workspace-header .shell-profile-menu button{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#314b65;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.workspace-header .shell-profile-menu button i{font-size:19px}
.workspace-header .shell-profile-menu button:hover,.workspace-header .shell-profile-menu button:focus-visible{background:var(--primary-soft);color:var(--primary)}
.workspace-header .shell-profile-menu [data-profile-action=logout]{border-top:1px solid var(--border-light);border-radius:0 0 7px 7px;margin-top:4px;color:#b42318}
.workspace-header .profile-btn:focus-visible,.workspace-header .shell-profile-menu button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.workspace-header .profile-btn[aria-expanded=true]{border-color:var(--primary);background:var(--primary-soft)}
.workspace-header .profile-btn[aria-expanded=true]>i{transform:rotate(180deg)}
.workspace-header .shell-signout { padding: 10px 12px; background: #fff; color: #8594a5; display: flex; gap: 8px; align-items: center; border: 1px solid var(--border-light); border-radius: 11px; font-size: 12px; cursor: pointer; }
.workspace-header .shell-signout:hover { color: var(--danger); background: #fff5f6; border-color: #f5ced5; }
.workspace-header .mobile-toggle { display: none; background: none; border: 0; color: #415c76; font-size: 24px; padding: 7px; cursor: pointer; }
.workspace-sidebar, .admin-console .workspace-sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; width: var(--sidebar-width); height: auto; background: var(--bg-sidebar); border-right: 1px solid var(--border-light); padding: 24px 14px 0; display: flex; flex-direction: column; gap: 0; transform: none; z-index: 900; overflow: hidden; }
.shell-navigation { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.workspace-sidebar .menu-title, .admin-console .workspace-sidebar .menu-title { color: var(--sidebar-muted); padding: 0 14px; margin: 4px 0 14px; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.workspace-sidebar .menu-list { margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.workspace-sidebar .menu-item, .admin-console .workspace-sidebar .menu-item { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; width: 100%; padding: 12px 14px; border: 0; border-radius: 11px; background: transparent; color: var(--sidebar-text); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .18s,color .18s; box-shadow: none; }
.workspace-sidebar .menu-item > i, .admin-console .workspace-sidebar .menu-item > i { font-size: 21px; color: #95a8ba; }
.workspace-sidebar .menu-item:hover, .admin-console .workspace-sidebar .menu-item:hover { background: var(--primary-soft); color: var(--primary); transform: none; }
.workspace-sidebar .menu-item.active, .admin-console .workspace-sidebar .menu-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; box-shadow: none; }
.workspace-sidebar .menu-item.active::before { display: none; }
.workspace-sidebar .menu-item.active > i, .admin-console .workspace-sidebar .menu-item.active > i { color: var(--primary); }
.nav-current-dot { margin-left: auto; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; }
.shell-sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 18px 4px; border-top: 1px solid var(--border-light); color: var(--sidebar-text); }
.shell-sidebar-footer img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.shell-sidebar-footer div { min-width: 0; flex: 1; }
.shell-sidebar-footer strong { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-sidebar-footer small { display: block; color: var(--sidebar-muted); font-size: 9px; margin-top: 4px; }
.shell-sidebar-footer > i { color: #66b493; font-size: 18px; }
.layout-wrapper { padding-left: var(--sidebar-width); margin-top: var(--header-height); height: calc(100dvh - var(--header-height)); }
.admin-console .admin-shell { height: 100dvh; }
.admin-console .main-content { margin: var(--header-height) 0 0 var(--sidebar-width); height: calc(100dvh - var(--header-height)); width: calc(100% - var(--sidebar-width)); min-width: 0; }
.admin-console .dashboard-scroll { padding: 32px; background: var(--bg-body); }
.admin-console .stat-card, .admin-console .console-card, .admin-console .chart-section, .admin-console .settings-card { box-shadow: 0 4px 20px rgb(35 72 105 / 3%); border-color: var(--border-light); }
.content-padding { max-width: 1260px; padding: 32px; }
.hero-banner { background: linear-gradient(115deg,#e7f4ff,#f4fbff); border: 1px solid #d5eafb; border-left: 1px solid #d5eafb; box-shadow: none; border-radius: 22px; padding: 30px; }
.hero-banner::after { border-color: rgb(42 150 222 / 5%); }
.hero-info h2 { color: #254b6c; font-size: 28px; font-weight: 600; }
.hero-banner p, .hero-info p { color: #6c8aa3; }
.hero-record-summary { background: rgb(255 255 255 / 75%); border: 1px solid #d8eaf8; border-radius: 16px; box-shadow: 0 4px 16px rgb(51 120 174 / 3%); }
.hero-record-summary strong { color: var(--primary); }
.hero-record-summary span { color: #6e8ba3; }
.hero-record-summary > div + div { border-left-color: #dbeaf5; }
.module-grid { gap: 16px; }
.module-card { padding: 24px; border-radius: 18px; border: 1px solid var(--border-light); box-shadow: 0 3px 12px rgb(35 72 105 / 2%); }
.module-card:hover { transform: translateY(-3px); border-color: #a8d5f3; box-shadow: 0 12px 30px rgb(34 101 151 / 8%); }
.module-card .module-icon { background: #eaf6ff; color: var(--primary); border: 1px solid #daf0ff; border-radius: 14px; }
.module-text h3 { color: #304c65; font-size: 16px; font-weight: 600; }
.module-text p { color: #8191a3; font-size: 12px; line-height: 1.9; }
.intern-bar-fill { background: linear-gradient(90deg,var(--primary),#69c3f3); }
.section-title { color: #39546e; font-size: 16px; font-weight: 600; border-bottom: 0; padding-bottom: 0; }
.widget-card { border-radius: 18px; box-shadow: 0 3px 14px rgb(35 72 105 / 3%); }
.news-sidebar-title { font-size: 14px; color: #415d76; }
.tabs { background: #e9f0f7; }
.tab-btn.active { color: var(--primary); }
.form-panel, .box-card, .time-history-card, .history-day { box-shadow: 0 4px 18px rgb(35 72 105 / 3%); }
.btn-save, .btn-primary, .export-pdf, .btn-merge { box-shadow: 0 5px 12px rgb(8 117 201 / 12%); }
.guest-notice { border-radius: 10px; font-size: 11px; }
.split-layout { padding-top: var(--header-height); }
.massive-title, .showcase-brand { font-family: 'Inter','Noto Sans Thai',Arial,sans-serif; }
.workspace-showcase { background: linear-gradient(145deg,#127cbd,#07568f); box-shadow: 0 24px 70px rgb(21 100 157 / 16%); }
.workspace-showcase h2 span { color: #c5eaff; }
.showcase-tools i, .showcase-brand small { color: #c1e6ff; }
.workspace-showcase > p, .showcase-tools small { color: #d2e9f9; }
.showcase-footer { color: #a8d1ed; }
@media (max-width: 1100px) { .content-padding { padding: 24px; } .hero-banner { gap: 20px; } }
@media (max-width: 768px) {
 :root { --header-height: 68px; }
 .workspace-header, .admin-console .workspace-header { padding: 0 14px; }
 .workspace-header .header-brand { gap: 6px; }
 .workspace-header .mobile-toggle { display: inline-flex; }
 .workspace-brand { gap: 8px; }
 .workspace-brand img { width: 28px; height: 32px; }
 .workspace-brand > span { font-size: 14px; }
 .workspace-header .workspace-brand > span { display: block; }
 .workspace-header .hide-mobile { display: none !important; }
 .workspace-brand small { display: none; }
 .workspace-header .header-actions { gap: 6px; }
 .workspace-header .profile-btn { padding: 4px; min-height: 38px; }
 .workspace-header .profile-btn img { width: 29px; height: 29px; }
 .workspace-header .lang-toggle { padding: 0 9px; height: 36px; }
 .workspace-header .shell-signout { border: 0; padding: 8px; font-size: 19px; }
 .workspace-header .shell-signout > span { display: none; }
 .workspace-sidebar, .admin-console .workspace-sidebar { width: 260px; transform: translateX(-100%); transition: transform .22s; }
 .workspace-sidebar.show, .admin-console .workspace-sidebar.show { transform: translateX(0); left: 0; }
 .layout-wrapper { padding-left: 0; }
 .admin-console .main-content { margin-left: 0; width: 100%; }
 .admin-console .dashboard-scroll { padding: 20px 16px; }
 .content-padding { padding: 22px 16px; }
 .hero-banner { padding: 24px 20px; border-radius: 18px; }
 .hero-info h2 { font-size: 23px; }
 .module-card { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 18px; }
 .module-card .module-icon { flex-shrink: 0; }
 .module-text h3 { font-size: 14px; }
 .module-text p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .module-card, .workspace-sidebar { transition: none; } }
@media print { .workspace-header, .workspace-sidebar { display: none !important; } .layout-wrapper { padding-left: 0; margin-top: 0; height: auto; } }
/* Keep the shared chrome steady during native page transitions. */
@view-transition { navigation: auto; }
.workspace-header { view-transition-name: workspace-header; }
.workspace-sidebar { view-transition-name: workspace-sidebar; }
.workspace-sidebar a[aria-disabled="true"] { cursor: default; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

.workspace-sidebar a[data-tool-disabled="true"] { opacity: .45; cursor: not-allowed; }
.admin-console .workspace-sidebar .shell-nav-section .menu-title{margin:0 0 8px;padding:0 12px;font:600 11px 'Noto Sans Thai',sans-serif;line-height:1.6;letter-spacing:0;color:#61758a}
.admin-console .workspace-sidebar .shell-nav-section .menu-list{margin:0;gap:4px}
.admin-console .workspace-sidebar .shell-nav-section .menu-item{min-height:44px;padding:10px 12px;border-radius:8px;font-size:13px}
.admin-console .workspace-sidebar .shell-admin-section .menu-item{min-height:40px;padding:9px 12px;font-size:12px;border-radius:8px}