*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{font-family:'Noto Sans Thai','Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#f0f2f5;color:#333;display:flex;min-height:100vh;overflow-x:clip}
.sidebar{width:240px;background:#fff;border-right:1px solid #e8e8e8;height:100vh;position:fixed;top:0;left:0;z-index:1000;overflow-y:auto;transition:transform .3s ease}
.sidebar-header{padding:20px 24px;border-bottom:1px solid #f0f0f0}
.brand-name{font-size:1.6rem;font-weight:700;color:#2ED8A3}
.sidebar-nav ul{list-style:none;padding:8px 0}
.sidebar-nav .nav-item>a{display:flex;align-items:center;padding:12px 24px;color:#555;text-decoration:none;font-size:.93rem;font-weight:500;transition:all .2s;gap:12px}
.sidebar-nav .nav-item>a i:first-child{width:20px;text-align:center;color:#888;font-size:1rem}
.sidebar-nav .nav-item>a:hover,.sidebar-nav .nav-item.active>a{background:#f0faf6;color:#2ED8A3}
.sidebar-nav .nav-item>a:hover i:first-child,.sidebar-nav .nav-item.active>a i:first-child{color:#2ED8A3}
.sidebar-nav .nav-item.active>a{font-weight:600}
.submenu-arrow{margin-left:auto;font-size:.7rem;transition:transform .3s}
.nav-item.has-submenu.open>a .submenu-arrow{transform:rotate(180deg)}
.submenu{display:none;list-style:none;background:#fafafa}
.nav-item.has-submenu.open .submenu{display:block}
.submenu li a{display:block;padding:10px 24px 10px 56px;color:#777;text-decoration:none;font-size:.88rem;transition:all .2s}
.submenu li a:hover,.submenu li a.active{color:#2ED8A3;background:#f0faf6;font-weight:600}
.main-wrapper{margin-left:240px;flex:1;min-height:100vh;display:flex;flex-direction:column;min-width:0;overflow-x:clip}
.top-header{background:#fff;padding:0 24px;height:60px;display:flex;align-items:center;gap:0;border-bottom:1px solid #e8e8e8;position:sticky;top:0;z-index:500;justify-content: space-between;}
.header-left{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header-center{flex:1;display:flex;justify-content:flex-start;align-items:center;padding:0 16px;overflow:hidden;min-width:0}
.menu-toggle{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#555;padding:4px}
.page-title{font-size:1rem;font-weight:600;color:#333}
.header-right{display:flex;align-items:center;gap:20px;flex-shrink:0}
.notification-bell{position:relative;cursor:pointer;font-size:1.2rem;color:#555}
.notification-bell .badge{position:absolute;top:-8px;right:-10px;background:#FC5C65;color:#fff;font-size:.6rem;padding:2px 5px;border-radius:10px;font-weight:600}
.user-profile{display:flex;align-items:center;gap:10px;cursor:pointer;position:relative}
.user-avatar{width:36px;height:36px;border-radius:50%;background:#2ED8A3;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.95rem}
.user-name{font-weight:500;font-size:.9rem;color:#333}
.user-profile .fa-chevron-down{font-size:.7rem;color:#888;transition:transform .2s}
.user-profile.open .fa-chevron-down{transform:rotate(180deg)}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);border:1px solid #eee;min-width:220px;z-index:1500;overflow:hidden;animation:dropIn .15s ease}
.user-profile.open .user-dropdown{display:block}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.user-dropdown-header{padding:16px 18px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:12px}
.user-dropdown-header .dd-avatar{width:40px;height:40px;border-radius:50%;background:#2ED8A3;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;flex-shrink:0}
.user-dropdown-header .dd-info{display:flex;flex-direction:column}
.dd-info .dd-name{font-weight:600;font-size:.9rem;color:#333}
.dd-info .dd-role{font-size:.78rem;color:#999}
.user-dropdown-menu{padding:6px 0}
.user-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#555;text-decoration:none;font-size:.88rem;font-weight:500;transition:all .15s}
.user-dropdown-menu a:hover{background:#f0faf6;color:#2ED8A3}
.user-dropdown-menu a i{width:18px;text-align:center;color:#888;font-size:.9rem}
.user-dropdown-menu a:hover i{color:#2ED8A3}
.user-dropdown-divider{height:1px;background:#f0f0f0;margin:4px 0}
.user-dropdown-menu .logout-link{color:#e74c3c}
.user-dropdown-menu .logout-link:hover{background:#fff5f5;color:#c0392b}
.user-dropdown-menu .logout-link i{color:#e74c3c}
.dashboard-content{padding:24px;flex:1}
.filter-bar{background:#fff;border-radius:12px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);flex-wrap:wrap;gap:16px}
.restaurant-info{display:flex;align-items:center;gap:12px}
.restaurant-logo{width:48px;height:48px;border-radius:12px;background:#ff4757;display:flex;align-items:center;justify-content:center}
.logo-text{color:#fff;font-size:.7rem;font-weight:700}
.restaurant-name{font-size:1.15rem;font-weight:700;color:#333}
.filter-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.select-wrapper{position:relative}
select,.branch-select,.filter-select{padding:10px 40px 10px 16px;border:1px solid #e0e0e0;border-radius:10px;font-size:.9rem;font-family:inherit;background:#fff;color:#333;cursor:pointer;min-width:160px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' 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 14px center;background-size:12px;transition:all .2s ease;outline:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
select:hover,.branch-select:hover,.filter-select:hover{border-color:#2ED8A3;box-shadow:0 2px 8px rgba(46,216,163,.12)}
select:focus,.branch-select:focus,.filter-select:focus{border-color:#2ED8A3;box-shadow:0 0 0 3px rgba(46,216,163,.15)}
select option{padding:10px 16px;font-family:inherit;background:#fff;color:#333}
.date-range{display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;color:#333;background:#fff;cursor:pointer;white-space:nowrap;height:42px}
.date-range i{color:#888;flex-shrink:0}
.date-range input{border:none;outline:none;background:transparent;font-family:inherit;font-size:.9rem;color:#333;cursor:pointer;width:220px;padding:10px 0}
.flatpickr-calendar{font-family:'Inter',sans-serif!important;border-radius:12px!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important;border:none!important}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:#2ED8A3!important;border-color:#2ED8A3!important}
.flatpickr-day.inRange{background:rgba(46,216,163,.15)!important;border-color:transparent!important;box-shadow:-5px 0 0 rgba(46,216,163,.15),5px 0 0 rgba(46,216,163,.15)!important}
.flatpickr-day:hover{background:rgba(46,216,163,.2)!important;border-color:transparent!important}
.flatpickr-months .flatpickr-month{height:40px}
.flatpickr-current-month{font-size:.95rem!important;font-weight:600!important}
.btn-export{display:flex;align-items:center;gap:8px;padding:10px 24px;background:#2ED8A3;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s;font-family:inherit}
.btn-export:hover{background:#25c495}
.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.summary-card{padding:20px 24px}
.card-label{font-size:.85rem;color:#888;font-weight:500;margin-bottom:8px}
.card-value{font-size:1.8rem;font-weight:700}
.card-value.green{color:#2ED8A3}
.middle-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.top-selling{padding:24px}
.card-title{font-size:1.05rem;font-weight:700;color:#333;margin-bottom:16px}
.products-table{width:100%;border-collapse:collapse}
.products-table thead th{text-align:left;padding:10px 8px;font-size:.82rem;color:#888;font-weight:600;border-bottom:1px solid #eee}
.products-table tbody td{padding:12px 8px;font-size:.9rem;color:#333;border-bottom:1px solid #f5f5f5;vertical-align:middle}
.product-cell{display:flex;align-items:center;gap:10px}
.product-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0}
.rank-1{background:#2ED8A3}.rank-2{background:#3867D6}.rank-3{background:#F7B731}.rank-4{background:#a55eea}.rank-5{background:#FC5C65}
.product-img{width:50px;height:50px;border-radius:8px;background:#f8f8f8;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;overflow:hidden}
.product-name{font-weight:500;white-space:nowrap}
.right-panel{display:flex;flex-direction:column;gap:20px}
.payment-channels{padding:24px}
.payment-chart-wrapper{display:flex;align-items:center;gap:24px}
.chart-container{position:relative;width:180px;height:180px;flex-shrink:0}
.chart-center-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.chart-value{font-size:1.4rem;font-weight:700;color:#333}
.chart-legend{display:flex;flex-direction:column;gap:12px}
.legend-item{display:flex;align-items:flex-start;gap:10px}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.legend-text{display:flex;flex-direction:column}
.legend-label{font-size:.85rem;font-weight:600;color:#333}
.legend-sub{font-size:.78rem;color:#999}
.sale-channels{padding:24px}
.sale-bar-wrapper{margin-bottom:16px}
.sale-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#f0f0f0}
.bar-segment{height:100%;transition:width .5s}
.sale-channels-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.channel-item{display:flex;align-items:flex-start;gap:8px}
.channel-info{display:flex;flex-direction:column}
.channel-name{font-size:.8rem;color:#555;font-weight:500}
.channel-value{font-size:.95rem;font-weight:700;color:#333}
.channel-sub{font-size:.75rem;color:#999}
.gross-sale-chart{padding:24px;margin-bottom:20px}
.chart-wrapper{height:300px;position:relative}
/* ===== Shared Date Filter Component ===== */
.df-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.df-presets{display:flex;gap:6px;flex-wrap:wrap}
.df-btn{padding:7px 14px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:.82rem;color:#555;font-weight:500;transition:all .2s;white-space:nowrap}
.df-btn:hover{border-color:#2ED8A3;color:#2ED8A3}
.df-btn.active{background:#2ED8A3;color:#fff;border-color:#2ED8A3}
.df-range{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;cursor:pointer;min-width:200px;transition:border-color .2s}
.df-range:hover{border-color:#2ED8A3}
.df-input{border:none;outline:none;background:transparent;font-family:inherit;font-size:.85rem;color:#333;cursor:pointer;min-width:160px;width:100%}
/* Flatpickr BE year overrides */
.flatpickr-calendar{font-family:'Noto Sans Thai','Inter',sans-serif!important;border-radius:14px!important;box-shadow:0 8px 32px rgba(0,0,0,.14)!important;border:none!important;overflow:hidden}
.flatpickr-months .flatpickr-month{background:#2ED8A3;color:#fff;height:46px}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{fill:#fff;color:#fff}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#fff}
.flatpickr-current-month{font-size:1rem!important;font-weight:700!important;color:#fff!important;padding-top:10px}
.flatpickr-current-month input.cur-year{color:#000000!important;font-weight:700!important}
.flatpickr-current-month .flatpickr-monthDropdown-months{color:#000000!important;font-weight:600}
.flatpickr-weekdays{background:#f8fdf9}
span.flatpickr-weekday{font-size:.78rem;font-weight:600;color:#2ED8A3;background:#f8fdf9}
.flatpickr-day{border-radius:8px!important;font-size:.88rem}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:#2ED8A3!important;border-color:#2ED8A3!important;color:#fff!important}
.flatpickr-day.inRange{background:rgba(46,216,163,.15)!important;border-color:transparent!important;box-shadow:-5px 0 0 rgba(46,216,163,.15),5px 0 0 rgba(46,216,163,.15)!important}
.flatpickr-day:hover{background:rgba(46,216,163,.2)!important;border-color:transparent!important}
.flatpickr-day.today{border-color:#2ED8A3!important}

/* Toast Notification */
.toast-container{position:fixed;top:80px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-size:.88rem;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.15);animation:toastIn .3s ease;pointer-events:auto;min-width:240px;max-width:360px}
.toast-error{background:#fff;border-left:4px solid #e74c3c;color:#333}
.toast-success{background:#fff;border-left:4px solid #2ED8A3;color:#333}
.toast-warn{background:#fff;border-left:4px solid #F7B731;color:#333}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-error .toast-icon{color:#e74c3c}
.toast-success .toast-icon{color:#2ED8A3}
.toast-warn .toast-icon{color:#F7B731}
.toast-close{margin-left:auto;background:none;border:none;cursor:pointer;color:#aaa;font-size:.85rem;padding:2px 4px}
.toast-close:hover{color:#666}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* Custom Confirm Dialog */
.confirm-dialog-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9000;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.confirm-dialog-overlay.show{display:flex}
.confirm-dialog{background:#fff;border-radius:16px;padding:32px 28px;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:confirmIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes confirmIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.confirm-dialog-icon{width:56px;height:56px;border-radius:50%;background:#fff8e1;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.8rem}
.confirm-dialog-title{font-size:1.1rem;font-weight:700;color:#333;text-align:center;margin-bottom:8px}
.confirm-dialog-msg{font-size:.9rem;color:#666;text-align:center;line-height:1.6;margin-bottom:24px}
.confirm-dialog-actions{display:flex;gap:10px}
.confirm-dialog-actions button{flex:1;padding:11px 16px;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.confirm-btn-cancel{background:#f0f0f0;color:#555}
.confirm-btn-cancel:hover{background:#e0e0e0}
.confirm-btn-confirm{background:#e74c3c;color:#fff}
.confirm-btn-confirm:hover{background:#c0392b}

.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:999}
.sidebar-overlay.active{display:block}
@media(max-width:1024px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main-wrapper{margin-left:0}
.menu-toggle{display:block}
.summary-cards{grid-template-columns:repeat(2,1fr)}
.middle-section{grid-template-columns:1fr}
.payment-chart-wrapper{flex-direction:column;align-items:flex-start}
.sale-channels-legend{grid-template-columns:repeat(2,1fr)}
.user-name{display:none}
.header-center{flex:1;min-width:0;overflow:hidden}
.df-btn{padding:6px 10px;font-size:.78rem}
}
@media(max-width:768px){
/* Header: 2-row layout via flex-direction column */
.top-header{height:auto;flex-direction:column;padding:0;gap:0;align-items:stretch}
/* Row 1: hamburger left, avatar right */
.header-left{order:1;padding:10px 16px;display:flex;align-items:center}
.menu-toggle{display:block}
.header-right{order:1;position:absolute;top:10px;right:16px}
.header-center{order:2;width:100%;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:none;justify-content:flex-start}
/* Fix dropdown — clamp to right edge on mobile */
.user-dropdown{right:0;left:auto;max-width:calc(100vw - 32px)}
/* Date filter — single scrollable row */
.df-wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px}
.df-presets{flex-wrap:nowrap;gap:6px}
.df-btn{padding:6px 11px;font-size:.78rem;white-space:nowrap}
.df-range{min-width:unset;white-space:nowrap;padding:6px 10px}
.df-input{min-width:unset;font-size:.78rem}
.header-center::-webkit-scrollbar,.df-wrap::-webkit-scrollbar{display:none}
/* Keep header sticky even on 2-row mobile layout */
.top-header{position:sticky;top:0;z-index:100}
}
@media(max-width:600px){
/* Layout */
.dashboard-content{padding:12px}
.filter-bar{flex-direction:column;align-items:flex-start;padding:12px 16px;gap:10px;margin-bottom:12px}
.filter-controls{width:100%;flex-direction:column}
.branch-select{width:100%}
.date-range{width:100%}
.date-range input{width:100%}
.btn-export{width:100%;justify-content:center}
.page-title{font-size:.85rem}

/* Restaurant info — compact */
.restaurant-info{gap:10px}
.restaurant-logo{width:40px;height:40px;border-radius:10px}
.restaurant-name{font-size:1rem}

/* Summary cards — 2×2 grid, compact */
.summary-cards{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.summary-card{padding:14px 16px;border-left:3px solid #2ED8A3;border-radius:10px}
.card-label{font-size:.75rem;margin-bottom:4px}
.card-value{font-size:1.35rem}

/* Middle section */
.middle-section{gap:12px;margin-bottom:12px}
.top-selling{padding:16px}
.card-title{font-size:.95rem;margin-bottom:12px}

/* Products table — mobile friendly */
.products-table thead th{font-size:.75rem;padding:8px 6px}
.products-table tbody td{font-size:.82rem;padding:10px 6px}
.product-img{width:36px;height:36px;font-size:1.3rem}
.product-rank{width:20px;height:20px;font-size:.62rem}
.product-name{font-size:.82rem;white-space:normal;line-height:1.3}

/* Charts */
.payment-channels{padding:16px}
.payment-chart-wrapper{flex-direction:column;align-items:center;gap:12px}
.chart-container{width:150px;height:150px}
.chart-value{font-size:1.1rem}
.chart-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;width:100%}
.legend-item{align-items:flex-start}
.legend-label{font-size:.8rem}
.legend-sub{font-size:.72rem}
.sale-channels{padding:16px}
.sale-channels-legend{grid-template-columns:1fr 1fr}
.channel-name{font-size:.75rem}
.channel-value{font-size:.85rem}
.gross-sale-chart{padding:16px;margin-bottom:12px}
.chart-wrapper{height:200px}
}
/* ===== Theme Toggle Switch ===== */
.theme-row{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:default;user-select:none}
.theme-row .theme-icon{width:18px;text-align:center;color:#888;font-size:.9rem;flex-shrink:0}
.theme-row .theme-label{flex:1;font-size:.88rem;font-weight:500;color:#555}
.theme-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.theme-switch input{opacity:0;width:0;height:0;position:absolute}
.theme-slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;cursor:pointer}
.theme-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.theme-switch input:checked + .theme-slider{background:#2ED8A3}
.theme-switch input:checked + .theme-slider:before{transform:translateX(18px)}
.theme-row:hover{background:#f5f5f5}

/* ===== Buttons ===== */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;border:none;border-radius:10px;background:#e8f0fe;color:#4285f4;cursor:pointer;font-size:.9rem;line-height:1;padding:0;transition:all .2s;font-family:inherit;flex-shrink:0;box-sizing:border-box}
.btn-icon:hover{background:#d2e3fc;color:#1a73e8}
.btn-icon.danger{background:#fce8e8;color:#ea4335}
.btn-icon.danger:hover{background:#f8d0d0;color:#c5221f}
.btn-add{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#2ED8A3;color:#fff;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}
.btn-add:hover{background:#25c495}
.btn-save{padding:10px 28px;background:#2ED8A3;color:#fff;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}
.btn-save:hover{background:#25c495}
.btn-cancel{padding:10px 28px;background:#f0f0f0;color:#555;border:1px solid #e0e0e0;border-radius:10px;font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-cancel:hover{background:#e0e0e0}
.btn-delete{padding:10px 28px;background:#e74c3c;color:#fff;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}
.btn-delete:hover{background:#c0392b}
.btn-upload-img{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#f0faf6;color:#2ED8A3;border:1.5px solid #2ED8A3;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-upload-img:hover{background:#2ED8A3;color:#fff}

/* ===== Badges ===== */
.badge-active{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:600;background:#e8f5e9;color:#2ED8A3}
.badge-inactive{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:600;background:#f5f5f5;color:#999}

/* ===== Modals ===== */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:16px;width:90%;max-width:640px;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalIn .2s ease}
.modal-sm{max-width:440px}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #f0f0f0}
.modal-header h3{font-size:1.1rem;font-weight:700;color:#333;margin:0}
.modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:#999;font-size:1rem;cursor:pointer;transition:all .2s}
.modal-close:hover{background:#f5f5f5;color:#333}
.modal-body{padding:24px;overflow-y:auto;max-height:60vh}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #f0f0f0}

/* ===== Forms ===== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:#555;margin-bottom:6px}
.form-group .required{color:#e74c3c}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid #e0e0e0;border-radius:10px;font-size:.9rem;font-family:inherit;color:#333;background:#fff;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#2ED8A3;box-shadow:0 0 0 3px rgba(46,216,163,.1)}
.form-group textarea{resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ===== Toggle Switch ===== */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;cursor:pointer}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:#2ED8A3}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}

/* ===== Loading ===== */
.loading{text-align:center;color:#999;padding:24px;font-size:.9rem}

/* ===== Toolbar ===== */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.toolbar-left{display:flex;align-items:center;gap:12px}
.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-title{font-size:1.15rem;font-weight:700;color:#333;margin:0}
.search-box{display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border:1.5px solid #e0e0e0;border-radius:12px;height:42px;transition:all .25s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.search-box:hover{border-color:#b0b0b0;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.search-box:focus-within{border-color:#2ED8A3;background:#fff;box-shadow:0 0 0 3px rgba(46,216,163,.12)}
.search-box i{color:#aaa;font-size:.9rem;transition:color .2s}
.search-box:focus-within i{color:#2ED8A3}
.search-box input{border:none;outline:none;background:transparent;font-size:.88rem;font-family:inherit;color:#333;width:200px}
.search-box input::placeholder{color:#bbb}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:40px 20px}
.empty-state i{font-size:3rem;color:#ddd;margin-bottom:12px}
.empty-state p{color:#999;font-size:.9rem}

/* ===== Dark Mode ===== */
/* Pagination */
.pg-btn{min-width:36px;height:36px;padding:0 10px;border:1px solid #e0e0e0;background:#fff;color:#333;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.pg-btn:hover:not(.pg-disabled):not(.pg-active){background:#f0f0f0;border-color:#ccc}
.pg-btn.pg-active{background:#2ED8A3;color:#fff;border-color:#2ED8A3}
.pg-btn.pg-disabled{opacity:.4;cursor:not-allowed}
.pg-dots{color:#999;font-size:.85rem;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;user-select:none}
html.dark-mode .pg-btn{background:#1c2333;border-color:#2a2f45;color:#8b9ab1}
html.dark-mode .pg-btn:hover:not(.pg-disabled):not(.pg-active){background:#1f2937;border-color:#3a4055}
html.dark-mode .pg-btn.pg-active{background:#2ED8A3;color:#fff;border-color:#2ED8A3}
html.dark-mode .pg-dots{color:#6b7280}

html.dark-mode body{background:#0f1117;color:#d1d5db}
html.dark-mode .sidebar{background:#161b27;border-right-color:#2a2f45}
html.dark-mode .sidebar-header{border-bottom-color:#2a2f45}
html.dark-mode .sidebar-nav .nav-item>a{color:#8b9ab1}
html.dark-mode .sidebar-nav .nav-item>a:hover,html.dark-mode .sidebar-nav .nav-item.active>a{background:rgba(46,216,163,.12);color:#2ED8A3}
html.dark-mode .sidebar-nav .nav-item>a:hover i:first-child,html.dark-mode .sidebar-nav .nav-item.active>a i:first-child{color:#2ED8A3}
html.dark-mode .submenu{background:#111827}
html.dark-mode .submenu li a{color:#8b9ab1}
html.dark-mode .submenu li a:hover,html.dark-mode .submenu li a.active{color:#2ED8A3;background:rgba(46,216,163,.08)}
html.dark-mode .top-header{background:#161b27;border-bottom-color:#2a2f45}
html.dark-mode .menu-toggle{color:#8b9ab1}
html.dark-mode .notification-bell{color:#8b9ab1}
html.dark-mode .user-name{color:#d1d5db}
html.dark-mode .user-profile:hover{background:#1f2937}
html.dark-mode .user-dropdown{background:#1c2333;border-color:#2a2f45;box-shadow:0 8px 30px rgba(0,0,0,.4)}
html.dark-mode .user-dropdown-header{background:#1a2744;border-bottom-color:#2a2f45}
html.dark-mode .dd-info .dd-name{color:#d1d5db}
html.dark-mode .dd-info .dd-role{color:#6b7280}
html.dark-mode .user-dropdown-menu a{color:#c9d1d9}
html.dark-mode .user-dropdown-menu a:hover{background:#1f2937;color:#2ED8A3}
html.dark-mode .user-dropdown-menu a:hover i{color:#2ED8A3}
html.dark-mode .user-dropdown-menu a i{color:#6b7280}
html.dark-mode .user-dropdown-divider{background:#2a2f45}
html.dark-mode .theme-row .theme-icon{color:#6b7280}
html.dark-mode .theme-row .theme-label{color:#c9d1d9}
html.dark-mode .theme-row:hover{background:#1f2937}
html.dark-mode .main-wrapper{background:#0f1117}
/* Cards - Dashboard */
html.dark-mode .card{background:#1c2333;box-shadow:0 1px 3px rgba(0,0,0,.3)}
html.dark-mode .card-label{color:#6b7280}
html.dark-mode .card-title{color:#d1d5db}
html.dark-mode .card-value{color:#e5e7eb}
html.dark-mode .filter-bar{background:#161b27}
html.dark-mode .restaurant-name{color:#d1d5db}
html.dark-mode .products-table thead th{color:#6b7280;border-bottom-color:#2a2f45}
html.dark-mode .products-table tbody td{color:#c9d1d9;border-bottom-color:#1f2937}
html.dark-mode .chart-value{color:#d1d5db}
html.dark-mode .legend-label{color:#d1d5db}
html.dark-mode .legend-sub{color:#6b7280}
html.dark-mode .channel-name{color:#8b9ab1}
html.dark-mode .channel-value{color:#d1d5db}
html.dark-mode .channel-sub{color:#6b7280}
html.dark-mode .sale-bar{background:#1f2937}
html.dark-mode select,html.dark-mode .branch-select,html.dark-mode .filter-select{background:#1c2333;border-color:#2a2f45;color:#d1d5db}
html.dark-mode .df-btn{background:#1c2333;border-color:#2a2f45;color:#8b9ab1}
html.dark-mode .df-btn.active{background:#2ED8A3;color:#fff;border-color:#2ED8A3}
html.dark-mode .df-range{background:#1c2333;border-color:#2a2f45}
html.dark-mode .df-input{color:#d1d5db}
html.dark-mode .page-title{color:#d1d5db}
/* Stock / Table pages */
html.dark-mode .stock-table-wrap{background:#1c2333}
html.dark-mode .stock-table{background:#1c2333}
html.dark-mode .stock-table th{background:#161b27;color:#6b7280;border-bottom-color:#2a2f45;border-color:#2a2f45}
html.dark-mode .stock-table td{border-bottom-color:#1f2937;color:#c9d1d9}
html.dark-mode .stock-table tbody tr:hover{background:#1a2035}
html.dark-mode .sum-card{background:#1c2333}
html.dark-mode .sum-label{color:#6b7280}
html.dark-mode .sum-value{color:#d1d5db}
html.dark-mode .section-title{color:#d1d5db}
html.dark-mode .search-box{background:#1c2333;border-color:#2a2f45}
html.dark-mode .search-box input{background:transparent;color:#d1d5db;border-color:#2a2f45}
html.dark-mode .search-box i{color:#6b7280}
html.dark-mode .toolbar-left .section-title{color:#d1d5db}
html.dark-mode .product-count{color:#8b9ab1}
/* Products page cards */
html.dark-mode .product-card{background:#1c2333;border-color:#2a2f45}
html.dark-mode .product-card:hover{border-color:#2ED8A3;box-shadow:0 6px 20px rgba(0,0,0,.3)}
html.dark-mode .product-img-wrap{background:#111827}
html.dark-mode .product-img-wrap .no-img{background:#111827}
html.dark-mode .product-name{color:#d1d5db}
html.dark-mode .product-name-en{color:#6b7280}
html.dark-mode .product-price{color:#d1d5db}
html.dark-mode .product-cost{color:#6b7280}
html.dark-mode .product-actions button{background:#1f2937;color:#8b9ab1}
html.dark-mode .product-actions button:hover{background:#1a2744;color:#2ED8A3}
html.dark-mode .product-table-row{border-bottom-color:#2a2f45}
html.dark-mode .product-table-row:hover{background:#1f2937}
html.dark-mode .product-table-name{color:#d1d5db}
html.dark-mode .product-table-sub{color:#6b7280}
html.dark-mode .product-table-img{background:#111827}
/* Modals */
html.dark-mode .modal{background:#1c2333}
html.dark-mode .modal-header{border-bottom-color:#2a2f45}
html.dark-mode .modal-header h3{color:#d1d5db}
html.dark-mode .modal-footer{border-top-color:#2a2f45}
html.dark-mode .modal-body{color:#c9d1d9}
html.dark-mode .modal-close{color:#6b7280}
html.dark-mode .modal-close:hover{background:#1f2937;color:#d1d5db}
html.dark-mode .form-group label{color:#8b9ab1}
html.dark-mode .form-group input,html.dark-mode .form-group select,html.dark-mode .form-group textarea{background:#111827;border-color:#2a2f45;color:#d1d5db}
html.dark-mode .form-group input:focus,html.dark-mode .form-group select:focus,html.dark-mode .form-group textarea:focus{border-color:#2ED8A3}
/* Sales Sessions page */
html.dark-mode .session-card{background:#1c2333}
html.dark-mode .session-card h3{color:#d1d5db}
html.dark-mode .session-info-label{color:#6b7280}
html.dark-mode .session-info-value{color:#d1d5db}
html.dark-mode .no-session{color:#6b7280}
html.dark-mode .history-row-open,.dark-mode .history-row-closed{border-left-color:#2ED8A3}
/* Profile page */
html.dark-mode .profile-card{background:#1c2333}
html.dark-mode .profile-body{color:#c9d1d9}
html.dark-mode .profile-section-title{color:#d1d5db;border-bottom-color:#2a2f45}
html.dark-mode .profile-field label{color:#6b7280}
html.dark-mode .profile-field .field-value{color:#d1d5db}
html.dark-mode .profile-actions button{background:#1f2937;color:#8b9ab1}
/* Other elements */
html.dark-mode .dashboard-content{background:#0f1117}
html.dark-mode .confirm-dialog{background:#1c2333}
html.dark-mode .confirm-dialog-title{color:#d1d5db}
html.dark-mode .confirm-dialog-msg{color:#8b9ab1}
html.dark-mode .toast-error,html.dark-mode .toast-success,html.dark-mode .toast-warn{background:#1c2333;color:#d1d5db}
html.dark-mode .btn-cancel{background:#1f2937;color:#8b9ab1;border-color:#2a2f45}
html.dark-mode .btn-cancel:hover{background:#2a2f45}
html.dark-mode .badge-active{background:#0d2a1f;color:#2ED8A3}
html.dark-mode .badge-inactive{background:#1f2937;color:#6b7280}
html.dark-mode .empty-state i{color:#2a2f45}
html.dark-mode .empty-state p{color:#6b7280}
html.dark-mode .btn-icon{background:#1a2744;color:#5b9af5}
html.dark-mode .btn-icon:hover{background:#1e3a5f;color:#8bb8f8}
html.dark-mode .btn-icon.danger{background:#2a1515;color:#f87171}
html.dark-mode .btn-icon.danger:hover{background:#3b1a1a;color:#fca5a5}
html.dark-mode .btn-add{background:#2ED8A3;color:#fff}
html.dark-mode .btn-save{background:#2ED8A3;color:#fff}
html.dark-mode .btn-delete{background:#e74c3c;color:#fff}
html.dark-mode .modal-overlay{background:rgba(0,0,0,.7)}
html.dark-mode .loading{color:#6b7280}
html.dark-mode .toolbar{border-color:#2a2f45}
html.dark-mode .tg-settings{background:#1c2333}
html.dark-mode .tg-settings h3{color:#d1d5db}
html.dark-mode .tg-check{color:#8b9ab1}
/* Report tables */
html.dark-mode .report-table{background:#1c2333;box-shadow:0 1px 3px rgba(0,0,0,.3)}
html.dark-mode .report-table thead{background:#161b27}
html.dark-mode .report-table th{color:#6b7280;border-bottom-color:#2a2f45}
html.dark-mode .report-table td{color:#c9d1d9;border-bottom-color:#1f2937}
html.dark-mode .report-table tbody tr:hover{background:#1a2035}
html.dark-mode .rt{background:#1c2333;box-shadow:0 1px 3px rgba(0,0,0,.3)}
html.dark-mode .rt thead{background:#161b27}
html.dark-mode .rt th{color:#6b7280;border-bottom-color:#2a2f45}
html.dark-mode .rt td{color:#c9d1d9;border-bottom-color:#1f2937}
html.dark-mode .rt tbody tr:hover{background:#1a2035}

/* ===== Detail Summary Section (Dashboard) ===== */
.detail-summary-section{margin-bottom:16px}
.detail-summary-card{display:flex;flex-direction:row;gap:0;padding:0;overflow:hidden}
.ds-col{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.ds-col-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.ds-main-row{display:flex;align-items:baseline;gap:6px}
.ds-sub-row{display:flex;align-items:baseline;gap:6px}
.ds-label{font-size:13px;color:#6b7280;flex:1}
.ds-label-bold{font-weight:600;color:#1a1a2e}
.ds-value{font-size:14px;font-weight:500;color:#1a1a2e;white-space:nowrap}
.ds-value-bold{font-size:22px;font-weight:700;color:#1a1a2e}
.ds-value-lg{font-size:20px;font-weight:700}
.ds-value-green{color:#2ED8A3}
.ds-value-red{color:#e74c3c}
.ds-value-muted{color:#9ca3af}
.ds-unit{font-size:12px;color:#9ca3af}
.ds-unit-muted{color:#d1d5db}
.ds-divider{height:1px;background:#f3f4f6;margin:4px 0}
.ds-divider-v{width:1px;background:#f3f4f6;align-self:stretch;flex-shrink:0}
/* dark mode */
html.dark-mode .detail-summary-card{background:#1c2333}
html.dark-mode .ds-col-title{color:#6b7280}
html.dark-mode .ds-label{color:#8b9ab1}
html.dark-mode .ds-label-bold{color:#c9d1d9}
html.dark-mode .ds-value{color:#c9d1d9}
html.dark-mode .ds-value-bold{color:#e2e8f0}
html.dark-mode .ds-divider{background:#2a2f45}
html.dark-mode .ds-divider-v{background:#2a2f45}
@media(max-width:700px){
  .detail-summary-card{flex-direction:column}
  .ds-divider-v{width:auto;height:1px}
}