/* ================================================================
 * css/sidebar-theme.css — ธีม Sidebar (Bootstrap 5 style) สำหรับ WMS
 * ใช้คู่กับ app/wh_theme/sidebar.js  (เปิดเมื่อ body.theme-sidebar)
 * โทนสี teal/cyan + accent น้ำเงิน ให้เข้ากับธีมหลักของระบบ
 * ================================================================ */

:root {
    --wms-brand:    #0891b2;
    --wms-brand-d:  #0e7490;
    --wms-brand-l:  #06b6d4;
    --wms-side-bg:  #0b2a36;   /* น้ำเงินอมเขียวเข้ม */
    --wms-side-bg2: #0e3543;
    --wms-side-ink: #cbe7f0;
    --wms-side-mut: #7fa6b3;
    --wms-ink:      #0f172a;
    --wms-line:     #e2e8f0;
    --wms-surface:  #f1f5f9;
    --wms-side-w:   258px;
}

/* เมื่อใช้ธีม sidebar — ปิด wallpaper/พื้นหลัง desktop เดิม และซ่อน chrome ของ EasyUI desktop */
body.theme-sidebar {
    margin: 0;
    background: #f6f8fb !important;
    overflow: hidden;
    font-family: "Kanit", "Segoe UI", system-ui, sans-serif;
}
body.theme-sidebar .desktop,
body.theme-sidebar .desktop-wall,
body.theme-sidebar .desktop-taskbar,
body.theme-sidebar #buttons {
    display: none !important;
}

/* ===== Shell layout ===== */
#wms-shell {
    position: fixed;
    inset: 0;
    display: flex;
    color: var(--wms-ink);
}

/* ===== Sidebar ===== */
.wms-sidebar {
    width: var(--wms-side-w);
    flex: 0 0 var(--wms-side-w);
    background: linear-gradient(180deg, var(--wms-side-bg) 0%, var(--wms-side-bg2) 100%);
    color: var(--wms-side-ink);
    display: flex;
    flex-direction: column;
    transition: width .22s ease, transform .22s ease;
    box-shadow: 2px 0 16px -8px rgba(0,0,0,.45);
    z-index: 30;
}
.wms-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1rem 1rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    white-space: nowrap; overflow: hidden;
}
.wms-brand-logo {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--wms-brand-d), var(--wms-brand-l));
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 6px 16px -6px rgba(8,145,178,.8);
}
.wms-brand-text { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1; }
.wms-brand-text small { display: block; font-size: .62rem; font-weight: 400; color: var(--wms-side-mut); letter-spacing: .12em; margin-top: 3px; }

.wms-search {
    position: relative; padding: .75rem .8rem .5rem;
}
.wms-search i { position: absolute; left: 1.45rem; top: 50%; transform: translateY(-30%); color: var(--wms-side-mut); font-size: .9rem; }
.wms-search input {
    width: 100%; border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06); color: #eaf6fb;
    border-radius: 9px; padding: .5rem .6rem .5rem 2rem; font-size: .85rem;
    outline: none; font-family: inherit;
}
.wms-search input::placeholder { color: var(--wms-side-mut); }
.wms-search input:focus { border-color: var(--wms-brand-l); background: rgba(255,255,255,.1); }

/* ===== Menu ===== */
.wms-menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .35rem .55rem 1rem; }
.wms-menu::-webkit-scrollbar { width: 8px; }
.wms-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.wms-menu-list, .wms-sub { list-style: none; margin: 0; padding: 0; }

.wms-link, .wms-group-head {
    display: flex; align-items: center; gap: .65rem;
    padding: .58rem .7rem; margin: 2px 0;
    border-radius: 9px; cursor: pointer;
    color: var(--wms-side-ink); text-decoration: none;
    font-size: .9rem; white-space: nowrap;
    transition: background .15s, color .15s;
}
.wms-link:hover, .wms-group-head:hover { background: rgba(255,255,255,.08); color: #fff; }
.wms-leaf.active > .wms-link {
    background: linear-gradient(135deg, var(--wms-brand-d), var(--wms-brand));
    color: #fff; box-shadow: 0 6px 16px -8px rgba(8,145,178,.9);
}
.wms-ico {
    width: 22px; height: 22px; flex: 0 0 22px;
    object-fit: contain; border-radius: 5px;
}
.wms-ico-fallback { display: grid; place-items: center; color: var(--wms-side-mut); }
/* Bootstrap-icon ต่อเมนู (แทนรูปกล่องเดิมจาก DB) */
.wms-ico-bi {
    display: grid; place-items: center;
    font-size: 1.05rem; color: var(--wms-side-mut);
    transition: color .15s;
}
.wms-link:hover .wms-ico-bi,
.wms-group-head:hover .wms-ico-bi { color: var(--wms-brand-l); }
.wms-leaf.active > .wms-link .wms-ico-bi { color: #fff; }
.wms-label { overflow: hidden; text-overflow: ellipsis; }

/* groups */
.wms-caret { margin-left: auto; font-size: .7rem; transition: transform .2s; color: var(--wms-side-mut); }
.wms-group.open > .wms-group-head .wms-caret { transform: rotate(90deg); }
.wms-sub { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding-left: .6rem; }
.wms-group.open > .wms-sub { max-height: 1500px; }
.wms-sub .wms-link { font-size: .85rem; }

.wms-empty { color: var(--wms-side-mut); font-size: .85rem; padding: 1rem .8rem; }

.wms-side-foot { padding: .6rem .7rem; border-top: 1px solid rgba(255,255,255,.07); }
.wms-foot-btn {
    width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
    color: var(--wms-side-ink); border-radius: 9px; padding: .5rem; font-size: .85rem;
    cursor: pointer; font-family: inherit; transition: background .15s;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.wms-foot-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ===== Main area ===== */
.wms-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.wms-topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    height: 56px; padding: 0 1rem;
    background: #fff; border-bottom: 1px solid var(--wms-line);
    box-shadow: 0 2px 10px -8px rgba(15,23,42,.3); z-index: 20;
}
.wms-icon-btn {
    width: 38px; height: 38px; border: none; background: transparent;
    border-radius: 9px; color: #475569; font-size: 1.15rem; cursor: pointer;
    display: grid; place-items: center; transition: background .15s, color .15s;
}
.wms-icon-btn:hover { background: var(--wms-surface); color: var(--wms-brand-d); }
.wms-crumb { font-size: 1rem; font-weight: 600; color: var(--wms-ink); }
.wms-top-spacer { flex: 1 1 auto; }

/* user dropdown */
.wms-user { position: relative; }
.wms-user-btn {
    display: flex; align-items: center; gap: .5rem; border: 1px solid var(--wms-line);
    background: #fff; border-radius: 30px; padding: .3rem .7rem .3rem .35rem;
    cursor: pointer; font-family: inherit; font-size: .88rem; color: var(--wms-ink);
}
.wms-user-btn:hover { border-color: var(--wms-brand-l); }
.wms-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wms-brand-d), var(--wms-brand-l));
    color: #fff; display: grid; place-items: center; font-size: .95rem;
}
.wms-user-pop {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 218px;
    background: #fff; border: 1px solid var(--wms-line); border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.4); padding: .35rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .15s;
    z-index: 50;
}
.wms-user.open .wms-user-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.wms-pop-item {
    width: 100%; display: flex; align-items: center; gap: .55rem;
    border: none; background: transparent; border-radius: 8px;
    padding: .55rem .65rem; font-size: .88rem; color: var(--wms-ink);
    cursor: pointer; font-family: inherit; text-align: left;
}
.wms-pop-item:hover { background: var(--wms-surface); }
.wms-pop-item.danger { color: #dc2626; }
.wms-pop-item.danger:hover { background: #fee2e2; }
.wms-pop-sep { height: 1px; background: var(--wms-line); margin: .3rem .2rem; }

/* content */
.wms-content { flex: 1 1 auto; position: relative; background: #f6f8fb; min-height: 0; }
.wms-frame { width: 100%; height: 100%; border: 0; display: none; background: #f6f8fb; }
.wms-welcome { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; }
.wms-welcome-card { text-align: center; color: #64748b; }
.wms-welcome-card i { font-size: 3.4rem; color: var(--wms-brand); opacity: .85; }
.wms-welcome-card h2 { font-size: 1.4rem; font-weight: 700; color: var(--wms-ink); margin: .8rem 0 .35rem; }
.wms-welcome-card p { margin: 0; font-size: .95rem; }

/* ===== Collapsed sidebar (เหลือเฉพาะ icon) ===== */
body.wms-sidebar-collapsed .wms-sidebar { width: 64px; flex-basis: 64px; }
body.wms-sidebar-collapsed .wms-brand-text,
body.wms-sidebar-collapsed .wms-search,
body.wms-sidebar-collapsed .wms-label,
body.wms-sidebar-collapsed .wms-caret,
body.wms-sidebar-collapsed .wms-foot-btn { display: none; }
body.wms-sidebar-collapsed .wms-brand { justify-content: center; padding: 1rem .5rem; }
body.wms-sidebar-collapsed .wms-link,
body.wms-sidebar-collapsed .wms-group-head { justify-content: center; padding: .58rem; }
body.wms-sidebar-collapsed .wms-side-foot { padding: .5rem; }

/* ===== Backdrop (Offcanvas) — ซ่อนบน desktop ===== */
.wms-backdrop {
    position: fixed; inset: 0;
    background: rgba(2, 12, 18, .5);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
    z-index: 1040; display: none;
}

/* ===== Mobile = Offcanvas (sidebar สไลด์ทับเนื้อหา + backdrop) ===== */
@media (max-width: 768px) {
    /* sidebar กลายเป็น overlay ปิดอยู่เป็นค่าเริ่มต้น */
    .wms-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: var(--wms-side-w); flex-basis: var(--wms-side-w);
        transform: translateX(-100%);
        z-index: 1050;
    }
    body.wms-oc-open .wms-sidebar { transform: translateX(0); box-shadow: 0 0 40px -6px rgba(0,0,0,.55); }

    /* บนมือถือ content กินเต็มจอเสมอ (ไม่ถูก sidebar ดัน) */
    .wms-main { width: 100%; }

    /* backdrop โผล่เมื่อเปิด Offcanvas */
    .wms-backdrop { display: block; }
    body.wms-oc-open .wms-backdrop { opacity: 1; visibility: visible; }

    /* บนมือถือไม่ใช้โหมด collapse (เหลือเฉพาะไอคอน) — ให้เมนูเต็มรูปแบบเสมอ */
    body.wms-sidebar-collapsed .wms-sidebar { width: var(--wms-side-w); flex-basis: var(--wms-side-w); }
    body.wms-sidebar-collapsed .wms-brand-text,
    body.wms-sidebar-collapsed .wms-search,
    body.wms-sidebar-collapsed .wms-label,
    body.wms-sidebar-collapsed .wms-caret,
    body.wms-sidebar-collapsed .wms-foot-btn { display: revert; }
    body.wms-sidebar-collapsed .wms-brand { justify-content: flex-start; padding: 1rem; }
    body.wms-sidebar-collapsed .wms-link,
    body.wms-sidebar-collapsed .wms-group-head { justify-content: flex-start; padding: .58rem .7rem; }
}