:root {
    --primary-green: #2e7d32;
    --light-green: #e8f5e9;
    --yellow: #fbc02d;
    --sidebar-width: 260px;
    --ink: #333;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: linear-gradient(135deg, #f1f8e9 0%, #fff 100%);
    font-family: "Mali", cursive;
    font-size: .95rem;
}

.app-page { min-height: 100vh; overflow-x: hidden; }

#sidebar {
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    display: flex;
    width: var(--sidebar-width);
    height: 100vh;
    flex-direction: column;
    background: #fff;
    box-shadow: 2px 0 15px rgba(0, 0, 0, .05);
    transition: all .3s ease;
}

#sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-width)); }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 82px;
    padding: 0 20px;
    border-bottom: 2px solid #f0f0f0;
    text-align: center;
}

.thepsila-wordmark {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.thepsila-wordmark i { color: var(--yellow); font-size: 1.45rem; }
.sidebar-header p { color: #666; font-size: .75rem; }

.sidebar-scroll { flex-grow: 1; overflow-y: auto; padding: 10px 0; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #ccc; }

.sidebar-menu { margin: 0; padding: 0 16px; list-style: none; }
.sidebar-menu li { margin-bottom: 6px; padding: 0; }

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    transition: all .2s ease;
}

.sidebar-menu a i {
    width: 32px;
    margin-right: 12px;
    color: #777;
    font-size: 1.18rem;
    text-align: center;
}

.sidebar-menu a:hover,
.sidebar-menu a.active { color: var(--primary-green); background: var(--light-green); }
.sidebar-menu a:hover i,
.sidebar-menu a.active i { color: var(--primary-green); }

.menu-title {
    margin-top: 10px;
    padding: 15px 18px 8px !important;
    border-top: 1px solid #f0f0f0;
    color: #aaa;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sidebar-footer { padding: 15px; border-top: 1px solid #f0f0f0; background: #fafafa; text-align: center; }
.sidebar-footer .badge { padding: 8px 15px; border-radius: 20px; color: #333; background: var(--yellow); font-size: .8rem; }

#content {
    display: flex;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    flex-direction: column;
    transition: all .3s ease;
}

#content.expanded { margin-left: 0; }

.top-navbar {
    position: sticky;
    z-index: 1030;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
    padding: 0 25px;
    border-bottom: 2px solid var(--yellow);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
    backdrop-filter: blur(10px);
}

.top-nav-title { display: flex; align-items: center; margin: 0; color: var(--primary-green); font-size: 1.42rem; font-weight: 700; }
.top-nav-title i { margin-right: 15px; color: var(--yellow); font-size: 1.75rem; }
.toggle-btn { border: 0; color: var(--primary-green); background: none; font-size: 1.45rem; transition: transform .2s; }
.toggle-btn:hover { transform: scale(1.1); }
.system-status { padding: .48rem .8rem; border: 1px solid #c8e6c9; border-radius: 999px; color: var(--primary-green); background: var(--light-green); font-size: .75rem; font-weight: 600; }

.user-pill { display: flex; align-items: center; gap: .65rem; padding: .38rem .7rem .38rem .45rem; border: 1px solid #e4e8e4; border-radius: 999px; color: #333; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); font-family: inherit; text-align: left; }
.user-pill::after { margin-left: .25rem; }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; color: #fff; background: #198754; font-size: 1rem; font-weight: 700; }
.user-meta { display: flex; max-width: 170px; flex-direction: column; line-height: 1.1; }
.user-meta strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { margin-top: .18rem; color: #e0a800; font-size: .61rem; font-weight: 700; }
.user-dropdown .dropdown-menu { min-width: 220px; border-radius: 12px; font-family: inherit; }
.user-dropdown .dropdown-item { font-size: .8rem; }

.main-container { padding: 30px; flex-grow: 1; }
.content-section { display: none; animation: fadeIn .35s ease; }
.content-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.card {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-heading h4 { margin: 0 0 .25rem; color: #244327; font-size: 1.22rem; font-weight: 700; }
.section-heading p { margin: 0; color: #888; font-size: .8rem; }

.metric-card { position: relative; min-height: 92px; padding: 1rem; color: #fff; }
.metric-card > div { position: relative; z-index: 2; }
.metric-card small { display: block; margin-bottom: .2rem; font-size: .78rem; font-weight: 600; opacity: .72; }
.metric-card h2 { margin: 0; font-size: 1.8rem; font-weight: 700; }
.metric-card span { font-size: .78rem; opacity: .8; }
.metric-card > i { position: absolute; top: 50%; right: 1.25rem; font-size: 3rem; opacity: .48; transform: translateY(-50%); }
.metric-green { background: #198754; }
.metric-blue { background: #0dcaf0; }
.metric-yellow { color: #111; background: #ffc107; }
.metric-red { background: #dc3545; }

.legacy-dashboard-panels > div { min-height: 355px; }
.legacy-chart-card { padding: 1rem 1.2rem !important; }
.legacy-chart-card > h4 { margin: 0; color: #198754; font-size: 1.08rem; font-weight: 700; text-align: center; }
.legacy-chart-card .chart-wrap { min-height: 292px; height: 292px; }
.legacy-brand-card { display: flex; align-items: center; justify-content: center; padding: 2rem; flex-direction: column; color: #198754; background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%); }
.legacy-brand-card img { max-width: 80%; max-height: 120px; margin-bottom: 1rem; object-fit: contain; }
.legacy-brand-card h3 { margin: 0 0 .35rem; font-size: 1.45rem; font-weight: 700; }
.legacy-brand-card p { margin: 0; color: #777; font-size: .82rem; }

.chart-wrap { position: relative; min-height: 300px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.quick-grid button { display: flex; min-height: 115px; align-items: center; justify-content: center; flex-direction: column; gap: .65rem; border: 1px solid #e7eee8; border-radius: 16px; color: #455a47; background: #fbfdfb; font-family: inherit; font-weight: 600; transition: .2s; }
.quick-grid button:hover { border-color: #b8ddb9; color: var(--primary-green); background: var(--light-green); transform: translateY(-3px); }
.quick-grid button i { font-size: 1.7rem; }

.filter-row { padding: 1rem; border-radius: 15px; background: #f8faf8; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .9rem .85rem; border-bottom-color: #f0f0f0; background: transparent; }
.table thead th { color: #647067; background: #f8faf8; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.table td { font-size: .83rem; }
.inventory-table td, .report-table td { white-space: nowrap; }
.report-table td:nth-child(5), .report-table td:nth-child(6), .report-table td:nth-child(13) { min-width: 180px; white-space: normal; }

.sku-pill { display: inline-block; padding: .35rem .55rem; border: 1px solid #d8e5d9; border-radius: 8px; color: #325f35; background: #f7fbf7; font-weight: 700; }
.location-tags { display: flex; min-width: 185px; flex-wrap: wrap; gap: .3rem; }
.loc-badge, .location-tag { display: inline-block; margin: 0 .2rem .2rem 0; padding: 5px 10px; border: 1px solid #ffecb3; border-radius: 10px; color: #f57f17; background: #fff8e1; font-size: .73rem; font-weight: 500; }
.status-badge { display: inline-block; padding: .35rem .6rem; border-radius: 8px; font-size: .72rem; font-weight: 700; }
.status-normal { color: #2e7d32; background: #e8f5e9; }
.status-low { color: #e65100; background: #fff3e0; }
.status-out { color: #c62828; background: #ffebee; }
.type-in { color: #2e7d32; background: #e8f5e9; border: 1px solid #c8e6c9; }
.type-out { color: #c62828; background: #ffebee; border: 1px solid #ffcdd2; }
.type-transfer { color: #0277bd; background: #e1f5fe; border: 1px solid #b3e5fc; }

.product-search { position: relative; max-width: 540px; }
.product-search i { position: absolute; z-index: 2; top: 50%; left: 16px; color: #999; transform: translateY(-50%); }
.product-search input { padding-left: 43px; }
.product-card { display: flex; height: 100%; min-height: 235px; padding: 1rem; flex-direction: column; border: 2px solid #f1f8e9; border-radius: 15px; background: #fff; transition: .25s; }
.product-card:hover { border-color: #c8e6c9; box-shadow: 0 15px 30px rgba(46, 125, 50, .1); transform: translateY(-4px); }
.product-card h5 { color: #255f29; font-size: 1rem; font-weight: 700; }
.product-card .product-meta { margin-bottom: .8rem; color: #888; font-size: .72rem; }
.product-card .product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .8rem; border-top: 1px solid #eee; }

.report-filters label { display: block; margin-bottom: .3rem; color: #777; font-size: .7rem; font-weight: 600; }
.report-table th[data-sort] { cursor: pointer; }
.stockcard-header { padding: 1rem; border-left: 5px solid var(--primary-green); border-radius: 12px; background: var(--light-green); }
.stockcard-table thead th { color: #fff; background: var(--primary-green); }

.form-control, .form-select, .input-group-text { min-height: 44px; border-color: #e0e0e0; border-radius: 10px; font-family: inherit; }
.form-control, .form-select { padding: 9px 13px; }
.form-control:focus, .form-select:focus { border-color: var(--primary-green); box-shadow: 0 0 0 .25rem rgba(46, 125, 50, .1); }
.btn { border-radius: 10px; padding: 9px 18px; font-family: inherit; font-weight: 600; transition: .2s; }
.btn:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.empty-state { padding: 3rem !important; color: #999; text-align: center; }

.modal-content { overflow: hidden; border: 0; border-radius: 20px; }
.modal-header { padding: 1rem 1.35rem; color: #fff; border: 0; }
.modal-green { background: linear-gradient(135deg, #2e7d32, #43a047); }
.modal-red { background: linear-gradient(135deg, #c62828, #ef5350); }
.modal-blue { background: linear-gradient(135deg, #0277bd, #29b6f6); }
.modal-title { font-weight: 700; }
.modal-subtitle { margin-top: .25rem; font-size: .78rem; opacity: .85; }
.modal-body label { margin-bottom: .35rem; font-size: .79rem; font-weight: 600; }
.legacy-product-modal .modal-body label { color: #6f766f; font-weight: 700; }
.legacy-product-modal .modal-body small { display: block; margin-top: .35rem; color: #8a908a; font-size: .69rem; }
.legacy-product-modal .modal-footer .btn { font-weight: 700; }
.product-form-divider { margin-top: 1.15rem; }
.product-form-divider hr { margin: 0 0 .8rem; color: #cfd8d0; opacity: .9; }
.product-form-divider h6 { margin: 0; color: #198754; font-size: .92rem; font-weight: 700; }
.product-form-divider p { margin: .35rem 0 0; color: #929792; font-size: .69rem; }
.uom-equation { display: flex; align-items: center; gap: .8rem; min-height: 58px; padding: .75rem 1rem; border: 1px solid #c8e6c9; border-radius: 12px; color: #256a2b; background: #f2faf3; }
.uom-equation > i { flex: 0 0 auto; color: #198754; font-size: 1.15rem; }
.uom-equation strong, .uom-equation span { display: block; }
.uom-equation strong { font-size: .84rem; }
.uom-equation span { margin-top: .2rem; color: #6d766e; font-size: .68rem; }
.uom-equation.is-invalid { border-color: #ef9a9a; color: #b71c1c; background: #fff4f4; }
.uom-equation.is-invalid > i { color: #d32f2f; }
.transaction-uom { min-height: 52px; padding: .65rem .85rem; }
.mode-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; padding: .45rem; border-radius: 14px; background: #f4f6f4; }
.mode-switch button { padding: .75rem; border: 0; border-radius: 10px; color: #777; background: transparent; font-family: inherit; font-weight: 600; }
.mode-switch button.active { color: #fff; background: var(--primary-green); box-shadow: 0 7px 18px rgba(46, 125, 50, .22); }
.direct-panel { padding: 1rem; border: 1px solid #c8e6c9; border-radius: 14px; background: #f6fbf6; }

.swal2-popup { border: 4px solid #fff !important; border-radius: 25px !important; background: linear-gradient(#fff, #f9fbf9) !important; font-family: "Mali", cursive !important; }
.swal2-title { color: #1b5e20 !important; font-size: 1.55rem !important; font-weight: 700 !important; }
.swal2-confirm { border-radius: 50px !important; background: linear-gradient(135deg, #2e7d32, #43a047) !important; font-family: inherit !important; }
.swal2-cancel { border-radius: 50px !important; background: linear-gradient(135deg, #e53935, #ef5350) !important; font-family: inherit !important; }

.sidebar-overlay { display: none; }
#printReportArea { display: none; }

/* หน้าเข้าสู่ระบบเลียนแบบระบบเดิม แต่ยังใช้ Laravel session/CSRF */
.legacy-login-page { min-height: 100vh; overflow: hidden; background: linear-gradient(135deg, #f1f8e9, #fff); }
.legacy-preview { display: flex; min-height: 100vh; }
.legacy-preview-sidebar { position: relative; display: flex; width: var(--sidebar-width); min-width: var(--sidebar-width); flex-direction: column; background: #fff; }
.legacy-preview-brand { display: flex; height: 82px; align-items: center; justify-content: center; flex-direction: column; border-bottom: 2px solid #f0f0f0; }
.legacy-preview-brand h4 { margin: 0; color: #333; font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; }
.legacy-preview-brand h4 i { margin-right: .5rem; color: var(--yellow); }
.legacy-preview-brand p { margin: .35rem 0 0; color: #666; font-size: .75rem; }
.legacy-preview-menu { padding: 16px; }
.legacy-preview-menu span { display: flex; align-items: center; margin-bottom: 6px; padding: 12px 18px; border-radius: 10px; color: #555; font-size: .88rem; font-weight: 500; }
.legacy-preview-menu span.active { color: var(--primary-green); background: var(--light-green); }
.legacy-preview-menu i { width: 30px; margin-right: 10px; color: #666; text-align: center; }
.legacy-preview-menu span.active i { color: var(--primary-green); }
.legacy-preview-version { position: absolute; bottom: 15px; left: 50%; padding: 7px 14px; border-radius: 20px; color: #333; background: var(--yellow); font-size: .7rem; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }
.legacy-preview-content { flex: 1; }
.legacy-preview-navbar { display: flex; height: 82px; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 2px solid var(--yellow); background: rgba(255, 255, 255, .96); }
.legacy-preview-navbar > div { display: flex; align-items: center; gap: 1rem; color: var(--primary-green); font-size: 1.4rem; }
.legacy-preview-navbar .chart-icon { color: var(--yellow); font-size: 1.75rem; }
.legacy-preview-navbar button { padding: .65rem 1.45rem; border: 0; border-radius: 999px; color: #111; background: var(--yellow); font-family: inherit; font-size: .8rem; font-weight: 700; }
.legacy-preview-main { padding: 30px; }
.legacy-preview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.preview-metric { position: relative; display: flex; min-height: 92px; justify-content: center; padding: 1rem; flex-direction: column; overflow: hidden; border-radius: 20px; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .04); }
.preview-metric span { font-size: .78rem; font-weight: 600; opacity: .72; }
.preview-metric strong { font-size: 1.8rem; }
.preview-metric > i { position: absolute; top: 50%; right: 1.25rem; font-size: 3rem; opacity: .48; transform: translateY(-50%); }
.preview-green { background: #198754; }
.preview-blue { background: #0dcaf0; }
.preview-yellow { color: #111; background: #ffc107; }
.preview-red { background: #dc3545; }
.legacy-preview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.preview-panel { display: flex; min-height: 355px; align-items: center; justify-content: center; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .04); }
.preview-chart-panel h3 { color: #198754; font-size: 1.08rem; font-weight: 700; }
.preview-donut { width: 248px; height: 248px; border-radius: 50%; background: conic-gradient(#2e7d32 0 var(--normal-angle), #ff9800 var(--normal-angle) var(--low-angle), #d32f2f var(--low-angle) 360deg); mask: radial-gradient(circle, transparent 0 49%, #000 50%); }
.preview-legend { display: flex; gap: .75rem; margin-top: .3rem; color: #777; font-size: .68rem; }
.preview-legend span { display: flex; align-items: center; gap: .25rem; }
.preview-legend i { display: inline-block; width: 22px; height: 9px; }
.preview-legend .normal { background: #2e7d32; }
.preview-legend .low { background: #ff9800; }
.preview-legend .out { background: #d32f2f; }
.preview-company-panel { color: #198754; background: linear-gradient(135deg, #e8f5e9, #fff); }
.preview-company-panel img { max-width: 80%; max-height: 115px; margin-bottom: 1rem; object-fit: contain; }
.preview-company-panel h2 { margin: 0 0 .35rem; font-size: 1.45rem; font-weight: 700; }
.preview-company-panel p { margin: 0; color: #777; font-size: .82rem; }

.legacy-login-backdrop { position: fixed; z-index: 2000; inset: 0; display: grid; padding: 1rem; place-items: center; background: rgba(0, 0, 0, .52); transition: opacity .2s ease; }
.legacy-login-backdrop.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.legacy-login-modal { width: min(100%, 470px); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .32); }
.legacy-login-modal > header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; background: #198754; }
.legacy-login-modal > header h1 { margin: 0; font-size: 1.12rem; font-weight: 700; }
.legacy-login-modal > header h1 i { margin-right: .45rem; color: var(--yellow); }
.legacy-login-modal > header button { border: 0; color: rgba(255, 255, 255, .72); background: none; font-size: 1.25rem; }
.legacy-login-body { padding: 42px 44px 36px; text-align: center; }
.legacy-login-avatar { display: grid; width: 74px; height: 74px; margin: 0 auto 14px; place-items: center; border-radius: 50%; color: #198754; background: #e6f4ec; font-size: 2.35rem; }
.legacy-login-body h2 { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 700; }
.legacy-login-body > p { margin: 0 0 22px; color: #888; font-size: .74rem; }
.legacy-login-body form { text-align: left; }
.legacy-login-body label { display: block; margin: 0 0 .35rem; font-size: .75rem; font-weight: 600; }
.legacy-login-input { display: flex; min-height: 47px; align-items: center; margin-bottom: 15px; overflow: hidden; border: 1px solid #dfe3e0; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .05); }
.legacy-login-input > i { width: 47px; color: #198754; font-size: 1rem; text-align: center; }
.legacy-login-input input { min-width: 0; height: 45px; flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: .9rem; }
.legacy-login-input button { width: 47px; height: 45px; border: 0; color: #666; background: #fff; }
.legacy-login-submit { width: 100%; margin-top: 14px; padding: 14px; border: 0; border-radius: 999px; color: #111; background: var(--yellow); font-family: inherit; font-size: .95rem; font-weight: 700; box-shadow: 0 7px 18px rgba(251, 192, 45, .25); }
.legacy-login-help { margin: 20px 0 0 !important; color: #999 !important; text-align: center; }
.legacy-login-help span { color: #198754; font-weight: 700; }

@media (max-width: 991.98px) {
    #sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
    #sidebar.mobile-active { margin-left: 0; }
    #content { margin-left: 0; }
    .sidebar-overlay { position: fixed; z-index: 1035; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }
    .sidebar-overlay.active { display: block; }
    .main-container { padding: 18px; }
    .system-status { display: none; }
    .top-nav-title { font-size: 1.1rem; }
    .user-meta { display: none; }
    .legacy-preview-sidebar { width: 220px; min-width: 220px; }
    .legacy-preview-metrics { grid-template-columns: repeat(2, 1fr); }
    .legacy-preview-panels { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .quick-grid { grid-template-columns: 1fr; }
    .mode-switch { grid-template-columns: 1fr; }
    .top-navbar { padding: 13px 15px; }
    .main-container { padding: 14px; }
    .card { border-radius: 15px; }
    .card.p-4 { padding: 1rem !important; }
    .user-pill { padding: .35rem; }
    .user-pill::after { display: none; }
    .legacy-preview-sidebar { display: none; }
    .legacy-preview-navbar { padding: 0 14px; }
    .legacy-preview-navbar > div strong { font-size: .95rem; }
    .legacy-preview-navbar button { padding: .55rem .8rem; }
    .legacy-preview-main { padding: 14px; }
    .legacy-preview-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
    .preview-metric { min-height: 82px; border-radius: 14px; }
    .preview-metric > i { font-size: 2rem; }
    .legacy-login-body { padding: 30px 24px 26px; }
}

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { color: #000; background: #fff; font-family: "Sarabun", sans-serif !important; }
    #sidebar, #content, .modal, .swal2-container, .sidebar-overlay { display: none !important; }
    #printReportArea { display: block !important; }
    #printReportArea table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
    #printReportArea th, #printReportArea td { padding: 5px; border: 1px solid #000; vertical-align: middle; }
    #printReportArea th { background: #f2f2f2 !important; text-align: center; print-color-adjust: exact; }
}