/* --- Neo-Glass Premium Theme (Path: /Layout/main_portal_style.css) --- */
:root {
    /* พื้นหลังหลัก: แสงเหนือจางๆ (Aurora Mesh) */
    --bg-body: 
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
        linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    
    /* Active Gradient (น้ำเงิน -> ฟ้ามิ้นท์) */
    --active-gradient: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    --active-shadow: 0 8px 20px -5px rgba(6, 182, 212, 0.4);
    
    /* Text */
    --text-main: #0F172A;     
    --text-muted: #64748B;
    --text-active: #FFFFFF;

    /* Glass Vars */
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --glass-blur: blur(25px);
    --sidebar-shadow: 10px 0 40px -10px rgba(0, 0, 0, 0.05);
    
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px; /* ความกว้างตอนพับ */
    --toggle-btn-width: 25px; /* ขนาดของปุ่มลูกศรที่ยื่นออกมา */
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    background: var(--bg-body);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: 'Sarabun', sans-serif;
    margin: 0;
    min-height: 100vh;
}

.srs-wrapper { display: flex; width: 100%; min-height: 100vh; }

/* ============================================================
   🚀 SIDEBAR (Premium Curve) 
   ============================================================ */
.srs-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,249,255,0.9) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: var(--glass-border);
    
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed; top: 0; left: 0; z-index: 1000;
    
    display: flex; flex-direction: column;
    box-shadow: var(--sidebar-shadow);
    
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* กล่องหุ้มเนื้อหาด้านใน ป้องกันข้อความล้นตอนพับ */
.sidebar-content-wrapper {
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.srs-logo {
    padding: 40px 30px;
    font-size: 26px; font-weight: 900;
    background: linear-gradient(135deg, #2563EB, #0D9488);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    display: flex; align-items: center; justify-content: center; gap: 15px; letter-spacing: 1px;
}
.srs-logo i { font-size: 32px; color: #06B6D4; filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.4)); }

.sidebar-inner{min-height:0;overflow:hidden!important}.srs-nav { padding: 10px 20px; flex-grow: 1; min-height:0; overflow-y: auto!important; overscroll-behavior:contain; }

.menu-label {
    padding: 20px 15px 10px;
    font-size: 11px; font-weight: 800; color: #94A3B8; 
    letter-spacing: 2px; text-transform: uppercase;
}

.srs-nav a {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; margin-bottom: 8px;
    border-radius: 18px;
    color: var(--text-muted); font-weight: 600; font-size: 14px;
    text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    white-space: nowrap; /* ห้ามให้ข้อความตัดบรรทัด */
    position: relative; /* สำหรับ Tooltip */
}

.srs-nav a i { width: 24px; text-align: center; font-size: 18px; transition: 0.3s; }

.srs-nav a:hover {
    background: rgba(255, 255, 255, 0.8); color: #2563EB;
    transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.srs-nav a.active {
    background: var(--active-gradient); color: var(--text-active);
    box-shadow: var(--active-shadow);
    transform: translateY(-2px);
}
.srs-nav a.active i { color: #fff; }

.admin-flow-heading { color: #4773A8; }
.admin-flow-link::before {
    content: ''; position: absolute; left: 31px; top: -12px; width: 1px; height: 15px;
    background: linear-gradient(#D8E4F2, #BFD1E5); z-index: -1;
}
.admin-flow-heading + .admin-flow-link::before { display: none; }
.admin-menu-copy { display: flex; align-items: center; gap: 8px; }
.admin-menu-copy small {
    min-width: 22px; padding: 2px 4px; border-radius: 6px; text-align: center;
    color: #4773A8; background: #EAF2FC; font: 800 9px/1.4 'Inter', sans-serif;
    letter-spacing: .04em;
}
.srs-nav a.active .admin-menu-copy small { color: #0B6D84; background: rgba(255,255,255,.88); }
.admin-data-heading { margin-top: 11px; padding-top: 15px; border-top: 1px solid #E4ECF5; color: #A66B1E; }
.srs-nav a.admin-danger-link { color: #B34A56; background: rgba(255,241,242,.72); }
.srs-nav a.admin-danger-link:hover { color: #C6283D; background: #FFF1F2; }
.srs-nav a.admin-danger-link.active { color: #fff; background: linear-gradient(90deg,#DC354F,#F06464); box-shadow: 0 8px 20px -5px rgba(220,53,79,.36); }
.srs-sidebar.collapsed .admin-flow-link::before { display: none; }

.sign-out-btn {
    background: #FFF1F2; color: #E11D48; border: 1px solid #FECACA;
    padding: 15px; border-radius: 16px; font-family: 'Sarabun'; font-weight: 700;
    cursor: pointer; width: 100%; transition: 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    white-space: nowrap;
    position: relative;
}
.sign-out-btn:hover { 
    background: linear-gradient(135deg, #E11D48, #F43F5E);
    color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px -5px rgba(225, 29, 72, 0.4);
    transform: translateY(-2px);
}

/* ============================================================
   🚀 MAIN CONTENT (ตั้งค่าระยะห่างให้ชิดพอดี + เผื่อที่ให้ปุ่มยื่น)
   ============================================================ */
.srs-main { 
    /* Margin ซ้ายเท่ากับความกว้าง Sidebar เป๊ะๆ */
    margin-left: var(--sidebar-width); 
    width: calc(100% - var(--sidebar-width)); 
    flex-grow: 1; display: flex; flex-direction: column; 
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 🚀 เพิ่ม Padding ซ้ายนิดนึง เพื่อให้มีพื้นที่รับลูกศร 25px ที่ยื่นออกมาโดยไม่ทับจอ */
    padding-left: calc(var(--toggle-btn-width) + 10px); 
}

/* Top Bar (Lighter Glass + Curve) */
.srs-topbar {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.5);
    margin: 25px 35px 25px 0; /* เอา margin ซ้ายของเดิมออก เพราะเราใช้ padding-left ของแม่แล้ว */
    padding: 12px 25px; border-radius: 20px;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 20px; z-index: 900;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.admin-scope-badge {
    flex: 1; max-width: 420px; min-width: 250px; margin: 0 24px;
    display: flex; align-items: center; gap: 11px; padding: 9px 14px;
    border: 1px solid #BAE6FD; border-radius: 14px;
    background: linear-gradient(135deg, #EFF8FF, #ECFEFF); color: #155E75;
}
.admin-scope-badge[hidden] { display: none !important; }
.admin-scope-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#1677E8,#08A8B8); }
.admin-scope-badge > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.admin-scope-badge span { font-size: 9px; font-weight: 850; letter-spacing: .08em; color: #16839A; }
.admin-scope-badge b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #143A5C; }
.admin-scope-badge.warning { border-color: #F5D28B; background: linear-gradient(135deg,#FFF9E8,#FFF4E5); }
.admin-scope-badge.warning .admin-scope-icon { background: linear-gradient(135deg,#E99A22,#E67A23); }
.admin-scope-badge.warning span { color: #A96710; }.admin-scope-badge.warning b { color: #8A520C; }
.company-scope-page .company-control-capsule { display: none; }
.company-scope-page .admin-scope-badge { flex: 0 1 560px; max-width: 560px; margin-left: 0; }
.system-master-mode .company-control-capsule { border-color: #7DD3FC; box-shadow: 0 5px 18px rgba(14,165,233,.12); }
.system-master-mode .company-control-capsule.context-required { border-color: #F5C66F; background: #FFFBEB; }
.system-master-mode .company-control-capsule.context-required .status-pulse { background: #F59E0B; }

.srs-content { 
    padding: 10px 35px 35px 0; /* เอา padding ซ้ายของเดิมออก */
    flex-grow: 1; 
    min-height: calc(100vh - 140px);
}

#srs-navigation-progress {
    position: fixed; top: 0; left: 0; z-index: 30000;
    width: 0; height: 3px; opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #2563EB, #06B6D4, #8B5CF6);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
    transition: width 0.22s ease, opacity 0.18s ease;
}
#srs-navigation-progress.active { width: 72%; opacity: 1; }

.srs-content > * {
    animation: none !important;
    transition: none !important;
}
.srs-content.srs-page-booting { pointer-events: none; }

.srs-page-error {
    min-height: 320px; display: grid; place-content: center; text-align: center;
    color: #64748B; background: rgba(255,255,255,0.75); border-radius: 18px;
}
.srs-page-error i { color: #F59E0B; font-size: 30px; }

.srs-route-skeleton { padding: 20px 0; }
.srs-skeleton-line, .srs-skeleton-grid > div, .srs-skeleton-panel {
    position: relative; overflow: hidden; background: #E8EEF6; border-radius: 12px;
}
.srs-skeleton-line::after, .srs-skeleton-grid > div::after, .srs-skeleton-panel::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    animation: srs-skeleton-shimmer 1.2s infinite;
}
.srs-skeleton-line { height: 24px; margin-bottom: 12px; }
.srs-skeleton-line.wide { width: 38%; }
.srs-skeleton-line.medium { width: 24%; height: 14px; }
.srs-skeleton-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.srs-skeleton-grid > div { height: 112px; }
.srs-skeleton-panel { height: 300px; }
@keyframes srs-skeleton-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    #srs-navigation-progress { transition: none !important; }
    .srs-skeleton-line::after, .srs-skeleton-grid > div::after, .srs-skeleton-panel::after { animation: none; }
}

.user-profile { display: flex; align-items: center; gap: 15px; padding-left: 20px; border-left: 1px solid rgba(0,0,0,0.05); }
.user-info { text-align: right; line-height: 1.3; }
.user-name { font-weight: 800; font-size: 15px; color: var(--text-main); }
.user-status { 
    font-size: 10px; font-weight: 800; 
    background: linear-gradient(90deg, #059669, #06B6D4); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-transform: uppercase; letter-spacing: 0.5px; 
}

.user-avatar-box {
    width: 44px; height: 44px; background: var(--active-gradient);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; box-shadow: 0 8px 15px -3px rgba(6, 182, 212, 0.4);
}

/* ============================================================
   🚀 COLLAPSED STATE (เมื่อพับเมนู)
   ============================================================ */
.srs-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* ขยาย Main ให้กินพื้นที่คืนเมื่อพับ */
.srs-sidebar.collapsed ~ .srs-main {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* ซ่อนโลโก้และข้อความตอนพับ */
.srs-sidebar.collapsed .logo-full,
.srs-sidebar.collapsed .menu-text,
.srs-sidebar.collapsed .menu-label {
    display: none !important;
}

/* แสดงโลโก้ไอคอนแทน */
.srs-sidebar.collapsed .logo-icon { display: block !important; margin: 0 auto; }

/* จัดไอคอนให้อยู่ตรงกลางตอนพับ */
.srs-sidebar.collapsed .srs-nav a,
.srs-sidebar.collapsed .sign-out-btn {
    justify-content: center;
    padding: 15px 0;
}
.srs-sidebar.collapsed .srs-nav a i,
.srs-sidebar.collapsed .sign-out-btn i {
    margin-right: 0;
}

/* ============================================================
   🚀 TOOLTIP (สไลด์ออกมาเฉพาะปุ่มตอนพับ)
   ============================================================ */
.tooltip-text {
    position: absolute;
    left: 50px; /* ซ่อนไว้ใกล้ๆ ไอคอน */
    background: #1E293B;
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 4px 15px rgba(0,0,0,0.15);
    pointer-events: none;
    z-index: 2000;
}

.tooltip-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #1E293B transparent transparent;
}

/* สไลด์ออกเฉพาะอันที่โดน Hover (ตอน Sidebar พับอยู่เท่านั้น) */
.srs-sidebar.collapsed .srs-nav a:hover .tooltip-text,
.srs-sidebar.collapsed .sign-out-btn:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    left: 85px; /* เด้งออกมาด้านขวา */
}

/* ============================================================
   🚀 TOGGLE BUTTON (ลูกศรครึ่งวงกลม)
   ============================================================ */
.sidebar-toggle-btn {
    position: absolute;
    top: 50%;
    right: calc(var(--toggle-btn-width) * -1); /* ทะลุขอบขวาออกไป */
    transform: translateY(-50%);
    background: linear-gradient(160deg, #5f94e7 0%, #427bd2 52%, #2f68bf 100%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-left: 0;
    color: rgba(255, 255, 255, 0.94);
    width: var(--toggle-btn-width);
    height: 60px;
    border-radius: 0 30px 30px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 5px 0 16px rgba(47, 104, 191, 0.18);
    transition: width 0.24s ease, right 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
    padding-right: 4px;
}

.sidebar-toggle-btn:hover {
    background: linear-gradient(160deg, #70a3ed 0%, #4b83d7 52%, #356fc7 100%);
    width: calc(var(--toggle-btn-width) + 5px);
    right: calc((var(--toggle-btn-width) + 5px) * -1);
    box-shadow: 6px 0 20px rgba(47, 104, 191, 0.24);
}

.sidebar-toggle-btn:active {
    background: linear-gradient(160deg, #4f86da 0%, #376fc5 100%);
    box-shadow: 3px 0 10px rgba(47, 104, 191, 0.18);
}

.sidebar-toggle-btn:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.28);
    outline-offset: 2px;
}

/* ============================================================
   🚀 CONTROL CAPSULE (Company Selector)
   ============================================================ */

.company-control-capsule {
    display: flex;
    align-items: center;
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    padding: 6px 12px 6px 8px; 
    border-radius: 16px; 
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 6px rgba(148, 163, 184, 0.08);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 280px; 
    position: relative;
}

.company-control-capsule:hover {
    background: #FFFFFF;
    border-color: #BFDBFE; 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15); 
    transform: translateY(-1px);
}

.capsule-icon {
    width: 36px; height: 36px; 
    background: rgba(37, 99, 235, 0.08); 
    color: #2563EB; 
    border-radius: 10px; 
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
    transition: 0.3s;
}

.company-control-capsule:hover .capsule-icon {
    background: rgba(37, 99, 235, 0.15);
    transform: scale(1.05);
}

.status-pulse {
    position: absolute; top: -1px; right: -1px;
    width: 8px; height: 8px;
    background: #10B981;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.capsule-info {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden; 
}

.capsule-label {
    font-size: 0.65rem; 
    font-weight: 700; 
    color: #94A3B8; 
    text-transform: uppercase; 
    letter-spacing: 0.8px;
    margin-bottom: 2px;
    line-height: 1;
}

.company-selector-wrapper select {
    appearance: none; -webkit-appearance: none;
    border: none; 
    background: transparent;
    width: 100%;
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem; 
    font-weight: 600; 
    color: #334155;   
    cursor: pointer;
    padding: 0 20px 0 0;
    margin: 0;
    outline: none;
    line-height: 1.2;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
    transition: color 0.2s;
}

.company-selector-wrapper select:hover {
    color: #2563EB; 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.srs-sidebar.collapsed .sidebar-inner,.srs-sidebar.collapsed .srs-nav{overflow:visible!important}

@media(max-height:1100px){
    .srs-logo{padding-top:22px!important;padding-bottom:22px!important}
    .srs-nav{padding-top:5px;padding-bottom:5px}
    .menu-label{padding-top:12px;padding-bottom:7px}
    .srs-nav a{padding-top:10px;padding-bottom:10px;margin-bottom:5px}
    .sidebar-inner>div:last-child{padding:14px 24px 20px!important}
}

@media(max-width:1180px){
    .admin-scope-badge{max-width:300px;margin:0 12px}.admin-scope-badge span{display:none}
}
@media(max-width:900px){
    .admin-scope-badge{min-width:auto;max-width:44px;padding:7px;margin:0 8px}.admin-scope-badge>div:last-child{display:none}
    .company-control-capsule{min-width:220px}.user-info{display:none}.user-profile{padding-left:10px}
}