/* =============================================================================
 * Custom Themes (skins) — fatoratest
 * Additive, per-business. Driven by business.theme_color -> body class.
 *   Admin pages : <body class="... skin-<name> ...">
 *   POS screen  : <body class="... lockscreen pos-skin-<name>">
 * Every rule is scoped to the theme class so the 12 stock AdminLTE skins are
 * untouched. !important is used to beat vendor.css + the inline skin overrides
 * in layouts/partials/header.blade.php and the inline POS <style> blocks.
 *
 * To add a new theme: register its name in BusinessController $theme_colors,
 * then copy one block below and swap the palette.
 * ========================================================================== */

/* =========================================================================
 *  محيط  (Ocean)  — teal/blue, professional
 *  sidebar #0e7490→#155e75 | accent #38bdf8 | POS bg #f0f9ff
 * ========================================================================= */

/* ---- Admin: top navbar ---- */
body.skin-ocean .main-header .navbar {
    background: #0e7490 !important;
}
body.skin-ocean .main-header .logo {
    background: #155e75 !important;
    color: #ffffff !important;
    border-bottom: 0 solid transparent !important;
}
body.skin-ocean .main-header .logo:hover {
    background: #134e63 !important;
}
body.skin-ocean .main-header .navbar .nav > li > a {
    color: #e0f2fe !important;
}
body.skin-ocean .main-header .navbar .nav > li > a:hover,
body.skin-ocean .main-header .navbar .nav > li > a:focus,
body.skin-ocean .main-header .navbar .nav .open > a {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}
body.skin-ocean .main-header .sidebar-toggle {
    color: #e0f2fe !important;
}

/* ---- Admin: sidebar ---- */
body.skin-ocean .main-sidebar,
body.skin-ocean .left-side {
    background: linear-gradient(180deg, #0e7490 0%, #155e75 100%) !important;
}
body.skin-ocean .sidebar-menu > li > a {
    color: #cffafe !important;
    border-left: 3px solid transparent !important;
}
body.skin-ocean .sidebar-menu > li > a > .fa,
body.skin-ocean .sidebar-menu > li > a > .fas,
body.skin-ocean .sidebar-menu > li > a > i {
    color: #7dd3fc !important;
}
body.skin-ocean .sidebar-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-left-color: #38bdf8 !important;
}
body.skin-ocean .sidebar-menu > li.active > a,
body.skin-ocean .sidebar-menu > li.menu-open > a,
body.skin-ocean .sidebar-menu > li.active > a:hover {
    background: #0c4a6e !important;
    color: #ffffff !important;
    border-left-color: #38bdf8 !important;
    font-weight: 700 !important;
}
body.skin-ocean .sidebar-menu > li.active > a > i,
body.skin-ocean .sidebar-menu > li.menu-open > a > i {
    color: #ffffff !important;
}
body.skin-ocean .sidebar-menu > li.header {
    background: #0b3e5c !important;
    color: #7dd3fc !important;
}
body.skin-ocean .sidebar-menu .treeview-menu {
    background: #0c4a6e !important;
}
body.skin-ocean .sidebar-menu .treeview-menu > li > a {
    color: #bae6fd !important;
}
body.skin-ocean .sidebar-menu .treeview-menu > li > a:hover,
body.skin-ocean .sidebar-menu .treeview-menu > li.active > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.skin-ocean .logo {
    background: #155e75 !important;
    color: #ffffff !important;
}
body.skin-ocean .user-panel > .info,
body.skin-ocean .user-panel > .info > a {
    color: #e0f2fe !important;
}
/* collapsed sidebar flyout */
body.skin-ocean.sidebar-collapse .sidebar-menu > li:hover > a,
body.skin-ocean .sidebar-menu > li.active.menu-open > a {
    background: #0c4a6e !important;
}

/* ---- POS: page background ---- */
body.pos-skin-ocean.lockscreen,
body.pos-skin-ocean .wrapper.thetop {
    background: #f0f9ff !important;
}
body.pos-skin-ocean section.content {
    background: transparent !important;
}

/* ---- POS: panels / cards ---- */
body.pos-skin-ocean .box.box-solid,
body.pos-skin-ocean .box {
    background: #ffffff !important;
    border-top: 3px solid #0e7490 !important;
    box-shadow: 0 1px 4px rgba(14, 116, 144, 0.10) !important;
}
body.pos-skin-ocean .box-header {
    color: #0e7490 !important;
}

/* ---- POS: category buttons (replace purple gradient) ---- */
body.pos-skin-ocean .btn-category.btn-primary {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%) !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
}
body.pos-skin-ocean .btn-category.btn-default:hover {
    border-color: #0e7490 !important;
}

/* ---- POS: resizer + reset accents ---- */
body.pos-skin-ocean .pos-resizer:hover,
body.pos-skin-ocean .pos-resizer.resizing {
    background: linear-gradient(90deg, #0e7490 0%, #155e75 50%, #0e7490 100%) !important;
}
body.pos-skin-ocean .pos-reset-layout {
    background: #0e7490 !important;
}
body.pos-skin-ocean .pos-reset-layout:hover {
    background: #155e75 !important;
}

/* ---- POS makeover (Ocean): toolbar tidy + cards polish + pay bar ---- */

/* Top toolbar: themed strip + consistent button shape/spacing */
body.pos-skin-ocean .pos-header {
    background: linear-gradient(90deg, #ecfeff 0%, #f0f9ff 100%) !important;
    border: 1px solid #cffafe !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 4px rgba(14, 116, 144, 0.08) !important;
}
body.pos-skin-ocean .pos-header .btn {
    border-radius: 8px !important;
    margin: 3px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
body.pos-skin-ocean .pos-header .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
}
body.pos-skin-ocean .pos-header p strong {
    color: #155e75 !important;
}

/* Product cards: rounded, soft shadow, hover lift, themed price tag */
body.pos-skin-ocean .product_box_large {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2eef2 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body.pos-skin-ocean .product_box_large:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(14, 116, 144, 0.18) !important;
}
body.pos-skin-ocean .image-container-large {
    background-color: #f0f9ff !important;
    border-bottom: 1px solid #e2eef2 !important;
}
body.pos-skin-ocean .product-name-tag {
    font-weight: 600 !important;
    color: #0f3a4a !important;
}
body.pos-skin-ocean .price-tag {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%) !important;
    color: #ffffff !important;
}
body.pos-skin-ocean .price-tag .price-with-vat {
    color: #ffffff !important;
}

/* Bottom pay bar: themed strip, bigger rounded buttons, prominent total */
body.pos-skin-ocean .pos-form-actions {
    background: linear-gradient(90deg, #ecfeff 0%, #f0f9ff 100%) !important;
    border-top: 2px solid #0e7490 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    box-shadow: 0 -1px 6px rgba(14, 116, 144, 0.08) !important;
}
body.pos-skin-ocean .pos-form-actions .btn {
    border-radius: 9px !important;
    padding: 9px 16px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin: 4px 3px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
body.pos-skin-ocean .pos-form-actions .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20) !important;
}
/* main cash checkout stands out */
body.pos-skin-ocean #pos-express-checkout {
    font-size: 16px !important;
    padding: 11px 26px !important;
}
body.pos-skin-ocean #total_payable {
    color: #0e7490 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}


/* =========================================================================
 *  ليلي  (Midnight)  — dark slate/indigo
 *  sidebar #0f172a→#1e1b4b | accent #6366f1 | dark canvas, white readable cards
 * ========================================================================= */

/* ---- Admin: top navbar ---- */
body.skin-midnight .main-header .navbar { background: #1e1b4b !important; }
body.skin-midnight .main-header .logo { background: #0f172a !important; color: #fff !important; }
body.skin-midnight .main-header .logo:hover { background: #0b1020 !important; }
body.skin-midnight .main-header .navbar .nav > li > a { color: #c7d2fe !important; }
body.skin-midnight .main-header .navbar .nav > li > a:hover,
body.skin-midnight .main-header .navbar .nav > li > a:focus,
body.skin-midnight .main-header .navbar .nav .open > a { background: rgba(255,255,255,.08) !important; color: #fff !important; }
body.skin-midnight .main-header .sidebar-toggle { color: #c7d2fe !important; }

/* ---- Admin: sidebar ---- */
body.skin-midnight .main-sidebar,
body.skin-midnight .left-side { background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%) !important; }
body.skin-midnight .sidebar-menu > li > a { color: #cbd5e1 !important; border-left: 3px solid transparent !important; }
body.skin-midnight .sidebar-menu > li > a > i { color: #818cf8 !important; }
body.skin-midnight .sidebar-menu > li > a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; border-left-color: #6366f1 !important; }
body.skin-midnight .sidebar-menu > li.active > a,
body.skin-midnight .sidebar-menu > li.menu-open > a,
body.skin-midnight .sidebar-menu > li.active > a:hover { background: #312e81 !important; color: #fff !important; border-left-color: #6366f1 !important; font-weight: 700 !important; }
body.skin-midnight .sidebar-menu > li.active > a > i,
body.skin-midnight .sidebar-menu > li.menu-open > a > i { color: #fff !important; }
body.skin-midnight .sidebar-menu > li.header { background: #0b1020 !important; color: #818cf8 !important; }
body.skin-midnight .sidebar-menu .treeview-menu { background: #1e1b4b !important; }
body.skin-midnight .sidebar-menu .treeview-menu > li > a { color: #c7d2fe !important; }
body.skin-midnight .sidebar-menu .treeview-menu > li > a:hover,
body.skin-midnight .sidebar-menu .treeview-menu > li.active > a { color: #fff !important; background: rgba(255,255,255,.06) !important; }
body.skin-midnight .logo { background: #0f172a !important; color: #fff !important; }
body.skin-midnight .user-panel > .info,
body.skin-midnight .user-panel > .info > a { color: #c7d2fe !important; }

/* ---- POS: dark canvas ---- */
body.pos-skin-midnight.lockscreen,
body.pos-skin-midnight .wrapper.thetop { background: #0f172a !important; }
body.pos-skin-midnight section.content { background: transparent !important; }

/* ---- POS: panels/cards stay white & readable, indigo accents ---- */
body.pos-skin-midnight .box.box-solid,
body.pos-skin-midnight .box { background: #fff !important; border-top: 3px solid #6366f1 !important; box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; }
body.pos-skin-midnight .box-header { color: #4f46e5 !important; }
body.pos-skin-midnight .btn-category.btn-primary { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; border-color: #6366f1 !important; color: #fff !important; }
body.pos-skin-midnight .btn-category.btn-default:hover { border-color: #6366f1 !important; }
body.pos-skin-midnight .pos-resizer:hover,
body.pos-skin-midnight .pos-resizer.resizing { background: linear-gradient(90deg, #6366f1 0%, #4f46e5 50%, #6366f1 100%) !important; }
body.pos-skin-midnight .pos-reset-layout { background: #6366f1 !important; }
body.pos-skin-midnight .pos-reset-layout:hover { background: #4f46e5 !important; }

/* ---- POS makeover: dark toolbar + cards + dark pay bar ---- */
body.pos-skin-midnight .pos-header { background: #1e293b !important; border: 1px solid #334155 !important; border-radius: 10px !important; padding: 6px 8px !important; margin-bottom: 8px !important; box-shadow: 0 1px 6px rgba(0,0,0,.4) !important; }
body.pos-skin-midnight .pos-header p,
body.pos-skin-midnight .pos-header strong,
body.pos-skin-midnight .pos-header .text-muted { color: #cbd5e1 !important; }
body.pos-skin-midnight .pos-header .btn { border-radius: 8px !important; margin: 3px !important; box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; transition: transform .12s ease, box-shadow .12s ease !important; }
body.pos-skin-midnight .pos-header .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; }

body.pos-skin-midnight .product_box_large { border-radius: 12px !important; overflow: hidden !important; border: 1px solid #334155 !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; transition: transform .15s ease, box-shadow .15s ease !important; }
body.pos-skin-midnight .product_box_large:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 18px rgba(0,0,0,.5) !important; }
body.pos-skin-midnight .image-container-large { background-color: #eef2ff !important; border-bottom: 1px solid #e2e8f0 !important; }
body.pos-skin-midnight .product-name-tag { font-weight: 600 !important; color: #1e1b4b !important; }
body.pos-skin-midnight .price-tag { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; color: #fff !important; }
body.pos-skin-midnight .price-tag .price-with-vat { color: #fff !important; }

body.pos-skin-midnight .pos-form-actions { background: #1e293b !important; border-top: 2px solid #6366f1 !important; border-radius: 10px !important; padding: 8px !important; box-shadow: 0 -1px 8px rgba(0,0,0,.4) !important; color: #e2e8f0 !important; }
body.pos-skin-midnight .pos-form-actions b { color: #e2e8f0 !important; }
body.pos-skin-midnight .pos-form-actions .btn { border-radius: 9px !important; padding: 9px 16px !important; font-weight: 700 !important; font-size: 14px !important; margin: 4px 3px !important; box-shadow: 0 2px 5px rgba(0,0,0,.3) !important; transition: transform .12s ease, box-shadow .12s ease !important; }
body.pos-skin-midnight .pos-form-actions .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(0,0,0,.5) !important; }
body.pos-skin-midnight #pos-express-checkout { font-size: 16px !important; padding: 11px 26px !important; }
body.pos-skin-midnight #total_payable { color: #a5b4fc !important; font-size: 22px !important; font-weight: 800 !important; }


/* =========================================================================
 *  زمردي ملكي  (Emerald)  — deep green + gold
 *  sidebar #064e3b→#065f46 | accent gold #d4af37 | POS bg #f0fdf4
 * ========================================================================= */

/* ---- Admin: top navbar ---- */
body.skin-emerald .main-header .navbar { background: #065f46 !important; }
body.skin-emerald .main-header .logo { background: #064e3b !important; color: #fff !important; }
body.skin-emerald .main-header .logo:hover { background: #053d2e !important; }
body.skin-emerald .main-header .navbar .nav > li > a { color: #d1fae5 !important; }
body.skin-emerald .main-header .navbar .nav > li > a:hover,
body.skin-emerald .main-header .navbar .nav > li > a:focus,
body.skin-emerald .main-header .navbar .nav .open > a { background: rgba(255,255,255,.10) !important; color: #fff !important; }
body.skin-emerald .main-header .sidebar-toggle { color: #d1fae5 !important; }

/* ---- Admin: sidebar ---- */
body.skin-emerald .main-sidebar,
body.skin-emerald .left-side { background: linear-gradient(180deg, #064e3b 0%, #065f46 100%) !important; }
body.skin-emerald .sidebar-menu > li > a { color: #d1fae5 !important; border-left: 3px solid transparent !important; }
body.skin-emerald .sidebar-menu > li > a > i { color: #d4af37 !important; }
body.skin-emerald .sidebar-menu > li > a:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; border-left-color: #d4af37 !important; }
body.skin-emerald .sidebar-menu > li.active > a,
body.skin-emerald .sidebar-menu > li.menu-open > a,
body.skin-emerald .sidebar-menu > li.active > a:hover { background: #053d2e !important; color: #fff !important; border-left-color: #d4af37 !important; font-weight: 700 !important; }
body.skin-emerald .sidebar-menu > li.active > a > i,
body.skin-emerald .sidebar-menu > li.menu-open > a > i { color: #d4af37 !important; }
body.skin-emerald .sidebar-menu > li.header { background: #053d2e !important; color: #d4af37 !important; }
body.skin-emerald .sidebar-menu .treeview-menu { background: #053d2e !important; }
body.skin-emerald .sidebar-menu .treeview-menu > li > a { color: #a7f3d0 !important; }
body.skin-emerald .sidebar-menu .treeview-menu > li > a:hover,
body.skin-emerald .sidebar-menu .treeview-menu > li.active > a { color: #fff !important; background: rgba(255,255,255,.06) !important; }
body.skin-emerald .logo { background: #064e3b !important; color: #fff !important; }
body.skin-emerald .user-panel > .info,
body.skin-emerald .user-panel > .info > a { color: #d1fae5 !important; }

/* ---- POS: light green canvas ---- */
body.pos-skin-emerald.lockscreen,
body.pos-skin-emerald .wrapper.thetop { background: #f0fdf4 !important; }
body.pos-skin-emerald section.content { background: transparent !important; }

/* ---- POS: panels + accents ---- */
body.pos-skin-emerald .box.box-solid,
body.pos-skin-emerald .box { background: #fff !important; border-top: 3px solid #d4af37 !important; box-shadow: 0 1px 4px rgba(6,78,59,.10) !important; }
body.pos-skin-emerald .box-header { color: #065f46 !important; }
body.pos-skin-emerald .btn-category.btn-primary { background: linear-gradient(135deg, #065f46 0%, #064e3b 100%) !important; border-color: #d4af37 !important; color: #fff !important; }
body.pos-skin-emerald .btn-category.btn-default:hover { border-color: #065f46 !important; }
body.pos-skin-emerald .pos-resizer:hover,
body.pos-skin-emerald .pos-resizer.resizing { background: linear-gradient(90deg, #065f46 0%, #064e3b 50%, #065f46 100%) !important; }
body.pos-skin-emerald .pos-reset-layout { background: #065f46 !important; }
body.pos-skin-emerald .pos-reset-layout:hover { background: #064e3b !important; }

/* ---- POS makeover ---- */
body.pos-skin-emerald .pos-header { background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%) !important; border: 1px solid #a7f3d0 !important; border-radius: 10px !important; padding: 6px 8px !important; margin-bottom: 8px !important; box-shadow: 0 1px 4px rgba(6,78,59,.08) !important; }
body.pos-skin-emerald .pos-header .btn { border-radius: 8px !important; margin: 3px !important; box-shadow: 0 1px 3px rgba(0,0,0,.10) !important; transition: transform .12s ease, box-shadow .12s ease !important; }
body.pos-skin-emerald .pos-header .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0,0,0,.16) !important; }
body.pos-skin-emerald .pos-header p strong { color: #065f46 !important; }

body.pos-skin-emerald .product_box_large { border-radius: 12px !important; overflow: hidden !important; border: 1px solid #d1fae5 !important; background: #fff !important; box-shadow: 0 2px 6px rgba(6,78,59,.08) !important; transition: transform .15s ease, box-shadow .15s ease !important; }
body.pos-skin-emerald .product_box_large:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 16px rgba(6,78,59,.18) !important; }
body.pos-skin-emerald .image-container-large { background-color: #f0fdf4 !important; border-bottom: 1px solid #d1fae5 !important; }
body.pos-skin-emerald .product-name-tag { font-weight: 600 !important; color: #064e3b !important; }
body.pos-skin-emerald .price-tag { background: linear-gradient(135deg, #065f46 0%, #064e3b 100%) !important; color: #fff !important; border-top: 2px solid #d4af37 !important; }
body.pos-skin-emerald .price-tag .price-with-vat { color: #fff !important; }

body.pos-skin-emerald .pos-form-actions { background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%) !important; border-top: 2px solid #d4af37 !important; border-radius: 10px !important; padding: 8px !important; box-shadow: 0 -1px 6px rgba(6,78,59,.08) !important; }
body.pos-skin-emerald .pos-form-actions .btn { border-radius: 9px !important; padding: 9px 16px !important; font-weight: 700 !important; font-size: 14px !important; margin: 4px 3px !important; box-shadow: 0 2px 5px rgba(0,0,0,.12) !important; transition: transform .12s ease, box-shadow .12s ease !important; }
body.pos-skin-emerald .pos-form-actions .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(0,0,0,.2) !important; }
body.pos-skin-emerald #pos-express-checkout { font-size: 16px !important; padding: 11px 26px !important; }
body.pos-skin-emerald #total_payable { color: #065f46 !important; font-size: 22px !important; font-weight: 800 !important; }


/* =========================================================================
 *  ADMIN CONTENT recoloring — make the whole page (box headers, table headers,
 *  buttons, pagination, tabs, labels) follow the chosen skin, not just sidebar.
 *  Scoped to body.skin-<name>; !important to beat app.css (.box-header #48494F,
 *  thead>tr #403e3d, .btn-success #085a89) + vendor.css.
 * ========================================================================= */

/* ---------- محيط (Ocean) : accent #0e7490 / dark #155e75 ---------- */
body.skin-ocean .box-header { background-color: #0e7490 !important; border-top-color: #0e7490 !important; color: #fff !important; }
body.skin-ocean .box-header .box-title, body.skin-ocean .box-header > .box-title, body.skin-ocean .box-header .fa, body.skin-ocean .box-header > i { color: #fff !important; }
body.skin-ocean .table > thead > tr, body.skin-ocean table.dataTable > thead > tr, body.skin-ocean .mytable thead > tr { background: #0e7490 !important; color: #fff !important; }
body.skin-ocean .table > thead > tr > th, body.skin-ocean table.dataTable > thead > tr > th { color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
body.skin-ocean .btn-primary, body.skin-ocean .btn-success { background-color: #0e7490 !important; border-color: #155e75 !important; color: #fff !important; }
body.skin-ocean .btn-primary:hover, body.skin-ocean .btn-primary:focus, body.skin-ocean .btn-primary:active, body.skin-ocean .btn-success:hover, body.skin-ocean .btn-success:focus, body.skin-ocean .btn-success:active { background-color: #155e75 !important; border-color: #155e75 !important; color: #fff !important; }
body.skin-ocean .box.box-primary, body.skin-ocean .box.box-solid { border-top-color: #0e7490 !important; }
body.skin-ocean .pagination > .active > a, body.skin-ocean .pagination > .active > a:hover, body.skin-ocean .pagination > .active > a:focus, body.skin-ocean .pagination > .active > span { background-color: #0e7490 !important; border-color: #0e7490 !important; }
body.skin-ocean .nav-tabs-custom > .nav-tabs > li.active { border-top-color: #0e7490 !important; }
body.skin-ocean .nav-tabs > li.active > a { color: #0e7490 !important; }
body.skin-ocean .nav-pills > li.active > a, body.skin-ocean .nav-pills > li.active > a:hover, body.skin-ocean .nav-pills > li.active > a:focus { background-color: #0e7490 !important; color: #fff !important; }
body.skin-ocean .label-primary { background-color: #0e7490 !important; }
body.skin-ocean .bg-primary, body.skin-ocean .bg-light-blue { background-color: #0e7490 !important; }
body.skin-ocean .text-primary { color: #0e7490 !important; }

/* ---------- ليلي (Midnight) : accent #6366f1 / dark #4f46e5 / header #312e81 ---------- */
body.skin-midnight .box-header { background-color: #312e81 !important; border-top-color: #6366f1 !important; color: #fff !important; }
body.skin-midnight .box-header .box-title, body.skin-midnight .box-header > .box-title, body.skin-midnight .box-header .fa, body.skin-midnight .box-header > i { color: #fff !important; }
body.skin-midnight .table > thead > tr, body.skin-midnight table.dataTable > thead > tr, body.skin-midnight .mytable thead > tr { background: #312e81 !important; color: #fff !important; }
body.skin-midnight .table > thead > tr > th, body.skin-midnight table.dataTable > thead > tr > th { color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
body.skin-midnight .btn-primary, body.skin-midnight .btn-success { background-color: #6366f1 !important; border-color: #4f46e5 !important; color: #fff !important; }
body.skin-midnight .btn-primary:hover, body.skin-midnight .btn-primary:focus, body.skin-midnight .btn-primary:active, body.skin-midnight .btn-success:hover, body.skin-midnight .btn-success:focus, body.skin-midnight .btn-success:active { background-color: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
body.skin-midnight .box.box-primary, body.skin-midnight .box.box-solid { border-top-color: #6366f1 !important; }
body.skin-midnight .pagination > .active > a, body.skin-midnight .pagination > .active > a:hover, body.skin-midnight .pagination > .active > a:focus, body.skin-midnight .pagination > .active > span { background-color: #6366f1 !important; border-color: #6366f1 !important; }
body.skin-midnight .nav-tabs-custom > .nav-tabs > li.active { border-top-color: #6366f1 !important; }
body.skin-midnight .nav-tabs > li.active > a { color: #4f46e5 !important; }
body.skin-midnight .nav-pills > li.active > a, body.skin-midnight .nav-pills > li.active > a:hover, body.skin-midnight .nav-pills > li.active > a:focus { background-color: #6366f1 !important; color: #fff !important; }
body.skin-midnight .label-primary { background-color: #6366f1 !important; }
body.skin-midnight .bg-primary, body.skin-midnight .bg-light-blue { background-color: #6366f1 !important; }
body.skin-midnight .text-primary { color: #4f46e5 !important; }

/* ---------- زمردي ملكي (Emerald) : green #065f46 / dark #064e3b / gold #d4af37 ---------- */
body.skin-emerald .box-header { background-color: #065f46 !important; border-top-color: #d4af37 !important; color: #fff !important; }
body.skin-emerald .box-header .box-title, body.skin-emerald .box-header > .box-title, body.skin-emerald .box-header .fa, body.skin-emerald .box-header > i { color: #fff !important; }
body.skin-emerald .table > thead > tr, body.skin-emerald table.dataTable > thead > tr, body.skin-emerald .mytable thead > tr { background: #065f46 !important; color: #fff !important; }
body.skin-emerald .table > thead > tr > th, body.skin-emerald table.dataTable > thead > tr > th { color: #fff !important; border-color: rgba(212,175,55,.30) !important; }
body.skin-emerald .btn-primary, body.skin-emerald .btn-success { background-color: #065f46 !important; border-color: #064e3b !important; color: #fff !important; }
body.skin-emerald .btn-primary:hover, body.skin-emerald .btn-primary:focus, body.skin-emerald .btn-primary:active, body.skin-emerald .btn-success:hover, body.skin-emerald .btn-success:focus, body.skin-emerald .btn-success:active { background-color: #064e3b !important; border-color: #064e3b !important; color: #fff !important; }
body.skin-emerald .box.box-primary, body.skin-emerald .box.box-solid { border-top-color: #d4af37 !important; }
body.skin-emerald .pagination > .active > a, body.skin-emerald .pagination > .active > a:hover, body.skin-emerald .pagination > .active > a:focus, body.skin-emerald .pagination > .active > span { background-color: #065f46 !important; border-color: #065f46 !important; }
body.skin-emerald .nav-tabs-custom > .nav-tabs > li.active { border-top-color: #d4af37 !important; }
body.skin-emerald .nav-tabs > li.active > a { color: #065f46 !important; }
body.skin-emerald .nav-pills > li.active > a, body.skin-emerald .nav-pills > li.active > a:hover, body.skin-emerald .nav-pills > li.active > a:focus { background-color: #065f46 !important; color: #fff !important; }
body.skin-emerald .label-primary { background-color: #065f46 !important; }
body.skin-emerald .bg-primary, body.skin-emerald .bg-light-blue { background-color: #065f46 !important; }
body.skin-emerald .text-primary { color: #065f46 !important; }

/* =============================================================================
 *  المتحد الذكي (United Smart) — navy #1b2a5b / deep #121d44 / accent #3b56b8
 *  Matches the login page & logo identity. Admin chrome = skin-smart;
 *  the POS screen (pos-skin-smart) is detailed in public/css/pos-smart.css.
 * ========================================================================= */
/* ---- Admin: top navbar ---- */
body.skin-smart .main-header .navbar { background: linear-gradient(90deg,#1b2a5b 0%,#2e4795 100%) !important; }
body.skin-smart .main-header .logo { background: #121d44 !important; color: #fff !important; border-bottom: 0 solid transparent !important; }
body.skin-smart .main-header .logo:hover { background: #0d1636 !important; }
body.skin-smart .main-header .navbar .nav > li > a { color: #dbe3f7 !important; }
body.skin-smart .main-header .navbar .nav > li > a:hover,
body.skin-smart .main-header .navbar .nav > li > a:focus,
body.skin-smart .main-header .navbar .nav .open > a { background: rgba(255,255,255,.10) !important; color: #fff !important; }
body.skin-smart .main-header .sidebar-toggle { color: #dbe3f7 !important; }
/* ---- Admin: sidebar (navy gradient) ---- */
body.skin-smart .main-sidebar, body.skin-smart .left-side { background: linear-gradient(180deg,#1b2a5b 0%,#121d44 100%) !important; }
body.skin-smart .sidebar-menu > li > a { color: #c7d0ea !important; border-left: 3px solid transparent !important; }
body.skin-smart .sidebar-menu > li > a > .fa,
body.skin-smart .sidebar-menu > li > a > .fas,
body.skin-smart .sidebar-menu > li > a > i { color: #8ea3e0 !important; }
body.skin-smart .sidebar-menu > li > a:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; border-left-color: #3b56b8 !important; }
body.skin-smart .sidebar-menu > li.active > a,
body.skin-smart .sidebar-menu > li.menu-open > a,
body.skin-smart .sidebar-menu > li.active > a:hover { background: #0f1838 !important; color: #fff !important; border-left-color: #3b56b8 !important; font-weight: 700 !important; }
body.skin-smart .sidebar-menu > li.active > a > i,
body.skin-smart .sidebar-menu > li.menu-open > a > i { color: #fff !important; }
body.skin-smart .sidebar-menu > li.header { background: #0d1531 !important; color: #8ea3e0 !important; }
body.skin-smart .sidebar-menu .treeview-menu { background: #141f47 !important; }
body.skin-smart .sidebar-menu .treeview-menu > li > a { color: #b6c1e0 !important; }
body.skin-smart .sidebar-menu .treeview-menu > li > a:hover,
body.skin-smart .sidebar-menu .treeview-menu > li.active > a { color: #fff !important; background: rgba(255,255,255,.06) !important; }
body.skin-smart .logo { background: #121d44 !important; color: #fff !important; }
body.skin-smart .user-panel > .info, body.skin-smart .user-panel > .info > a { color: #dbe3f7 !important; }
body.skin-smart .sidebar-form { border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.06) !important; border-radius: 8px !important; }
body.skin-smart .sidebar-form .form-control { background: transparent !important; color: #dbe3f7 !important; border: 0 !important; }
body.skin-smart.sidebar-collapse .sidebar-menu > li:hover > a,
body.skin-smart .sidebar-menu > li.active.menu-open > a { background: #0f1838 !important; }
/* ---- Admin: content accents ---- */
body.skin-smart .box-header { background-color: #1b2a5b !important; border-top-color: #3b56b8 !important; color: #fff !important; }
body.skin-smart .box-header .box-title, body.skin-smart .box-header > .box-title, body.skin-smart .box-header .fa, body.skin-smart .box-header > i { color: #fff !important; }
body.skin-smart .table > thead > tr, body.skin-smart table.dataTable > thead > tr, body.skin-smart .mytable thead > tr { background: #1b2a5b !important; color: #fff !important; }
body.skin-smart .table > thead > tr > th, body.skin-smart table.dataTable > thead > tr > th { color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
body.skin-smart .btn-primary, body.skin-smart .btn-success { background-color: #1b2a5b !important; border-color: #2e4795 !important; color: #fff !important; }
body.skin-smart .btn-primary:hover, body.skin-smart .btn-primary:focus, body.skin-smart .btn-primary:active, body.skin-smart .btn-success:hover, body.skin-smart .btn-success:focus, body.skin-smart .btn-success:active { background-color: #2e4795 !important; border-color: #2e4795 !important; color: #fff !important; }
body.skin-smart .box.box-primary, body.skin-smart .box.box-solid { border-top-color: #3b56b8 !important; }
body.skin-smart .pagination > .active > a, body.skin-smart .pagination > .active > a:hover, body.skin-smart .pagination > .active > a:focus, body.skin-smart .pagination > .active > span { background-color: #1b2a5b !important; border-color: #1b2a5b !important; }
body.skin-smart .nav-tabs-custom > .nav-tabs > li.active { border-top-color: #3b56b8 !important; }
body.skin-smart .nav-tabs > li.active > a { color: #1b2a5b !important; }
body.skin-smart .nav-pills > li.active > a, body.skin-smart .nav-pills > li.active > a:hover, body.skin-smart .nav-pills > li.active > a:focus { background-color: #1b2a5b !important; color: #fff !important; }
body.skin-smart .label-primary { background-color: #1b2a5b !important; }
body.skin-smart .bg-primary, body.skin-smart .bg-light-blue { background-color: #1b2a5b !important; }
body.skin-smart .text-primary { color: #1b2a5b !important; }

/* =============================================================================
 *  المتحد الذكي — full-page polish (all admin pages, skin-smart only)
 *  Cohesive navy identity: soft rounded cards, gradient headers, subtle shadows.
 * ========================================================================= */
/* ---- base ---- */
body.skin-smart, body.skin-smart .content-wrapper, body.skin-smart .right-side { background: #eef1f7 !important; }
body.skin-smart { font-family: 'Cairo','Segoe UI',Tahoma,sans-serif !important; color: #1f2a44 !important; }
body.skin-smart ::-webkit-scrollbar { width: 10px; height: 10px; }
body.skin-smart ::-webkit-scrollbar-thumb { background: #c3cbe0; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
body.skin-smart ::-webkit-scrollbar-thumb:hover { background: #a7b1cf; background-clip: content-box; }
/* ---- content header / breadcrumb ---- */
body.skin-smart .content-header > h1 { color: #1b2a5b !important; font-weight: 800 !important; }
body.skin-smart .content-header > h1 > small { color: #7b8499 !important; }
body.skin-smart .content-header > .breadcrumb { background: #fff !important; border-radius: 30px !important; box-shadow: 0 1px 3px rgba(27,42,91,.07) !important; padding: 7px 16px !important; }
body.skin-smart .breadcrumb > li > a, body.skin-smart .breadcrumb > .active { color: #3b56b8 !important; }
body.skin-smart .breadcrumb > li + li:before { color: #aab2c7 !important; }
/* ---- boxes / cards ---- */
body.skin-smart .box { border-radius: 14px !important; border: 1px solid #e6e9f2 !important; box-shadow: 0 1px 2px rgba(27,42,91,.05), 0 5px 18px rgba(27,42,91,.06) !important; }
body.skin-smart .box > .box-header { background: linear-gradient(90deg,#1b2a5b 0%,#2e4795 100%) !important; color: #fff !important; border-radius: 14px 14px 0 0 !important; border-bottom: none !important; padding: 13px 16px !important; }
body.skin-smart .box > .box-header .box-title { font-weight: 700 !important; font-size: 15.5px !important; }
body.skin-smart .box > .box-header .btn-box-tool, body.skin-smart .box > .box-header .fa, body.skin-smart .box > .box-header > i { color: rgba(255,255,255,.9) !important; }
body.skin-smart .box-footer { background: #f8fafd !important; border-top: 1px solid #eef1f7 !important; border-radius: 0 0 14px 14px !important; }
/* ---- buttons ---- */
body.skin-smart .btn { border-radius: 8px !important; font-weight: 600 !important; transition: transform .12s ease, box-shadow .12s ease !important; }
body.skin-smart .btn:hover { transform: translateY(-1px); }
body.skin-smart .btn-primary, body.skin-smart .btn-success { background: linear-gradient(135deg,#1b2a5b 0%,#2e4795 100%) !important; border: none !important; box-shadow: 0 4px 12px rgba(27,42,91,.22) !important; color: #fff !important; }
body.skin-smart .btn-info { background-color: #3b56b8 !important; border-color: #3b56b8 !important; }
body.skin-smart .btn-default { background: #fff !important; border-color: #e4e8f2 !important; color: #1f2a44 !important; }
body.skin-smart .btn-default:hover { border-color: #3b56b8 !important; color: #3b56b8 !important; }
/* ---- forms ---- */
body.skin-smart .form-control { border-radius: 8px !important; border: 1.5px solid #e4e8f2 !important; box-shadow: none !important; transition: .15s !important; }
body.skin-smart .form-control:focus { border-color: #3b56b8 !important; box-shadow: 0 0 0 3px rgba(59,86,184,.12) !important; }
body.skin-smart .input-group-addon { border-radius: 8px !important; background: #f4f7fc !important; border-color: #e4e8f2 !important; color: #7b8499 !important; }
body.skin-smart .select2-container--default .select2-selection--single { border-radius: 8px !important; border: 1.5px solid #e4e8f2 !important; }
body.skin-smart .select2-container--default.select2-container--focus .select2-selection--single { border-color: #3b56b8 !important; box-shadow: 0 0 0 3px rgba(59,86,184,.10) !important; }
/* ---- tables ---- */
body.skin-smart .table-hover > tbody > tr:hover, body.skin-smart table.dataTable tbody tr:hover { background: #f2f5fb !important; }
body.skin-smart .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfe !important; }
body.skin-smart .table > tbody > tr > td { border-top-color: #eef1f7 !important; }
body.skin-smart .dataTables_wrapper .dataTables_filter input, body.skin-smart .dataTables_wrapper .dataTables_length select { border-radius: 8px !important; border: 1.5px solid #e4e8f2 !important; }
body.skin-smart .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #1b2a5b !important; border-radius: 6px !important; color: #fff !important; border: none !important; }
/* ---- modals ---- */
body.skin-smart .modal-content { border-radius: 16px !important; border: none !important; box-shadow: 0 24px 60px rgba(18,29,68,.28) !important; }
body.skin-smart .modal-header { background: linear-gradient(90deg,#1b2a5b 0%,#2e4795 100%) !important; color: #fff !important; border: none !important; border-radius: 16px 16px 0 0 !important; padding: 15px 20px !important; }
body.skin-smart .modal-header .modal-title { color: #fff !important; font-weight: 700 !important; }
body.skin-smart .modal-header .close { color: #fff !important; opacity: .9 !important; text-shadow: none !important; }
body.skin-smart .modal-footer { border-top: 1px solid #eef1f7 !important; }
/* ---- nav tabs / pills ---- */
body.skin-smart .nav-tabs-custom { border-radius: 14px !important; box-shadow: 0 1px 2px rgba(27,42,91,.05), 0 5px 18px rgba(27,42,91,.06) !important; }
body.skin-smart .nav-tabs-custom > .nav-tabs > li.active > a { color: #1b2a5b !important; font-weight: 700 !important; }
/* ---- dashboard widgets ---- */
body.skin-smart .small-box { border-radius: 14px !important; box-shadow: 0 6px 18px rgba(27,42,91,.12) !important; overflow: hidden; }
body.skin-smart .small-box .icon { opacity: .28 !important; }
body.skin-smart .info-box { border-radius: 14px !important; box-shadow: 0 3px 12px rgba(27,42,91,.08) !important; overflow: hidden; }
/* ---- labels / badges / alerts ---- */
body.skin-smart .label, body.skin-smart .badge { border-radius: 20px !important; font-weight: 600 !important; padding: .28em .7em !important; }
body.skin-smart .alert { border-radius: 10px !important; border: none !important; box-shadow: 0 2px 8px rgba(27,42,91,.06) !important; }
body.skin-smart .callout { border-radius: 10px !important; }
/* ---- sidebar active gradient + pagination ---- */
body.skin-smart .sidebar-menu > li.active > a { background: linear-gradient(90deg,#0f1838 0%,#1b2a5b 100%) !important; }
body.skin-smart .pagination > li > a { border-radius: 6px !important; margin: 0 2px !important; border-color: #e4e8f2 !important; color: #3b56b8 !important; }

/* =============================================================================
 *  المتحد الذكي — motion & micro-interactions (skin-smart only)
 *  Tasteful entrance + hover interactions; honours prefers-reduced-motion.
 * ========================================================================= */
@keyframes smartFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes smartFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes smartPulseGlow { 0%,100% { box-shadow: inset 3px 0 0 #3b56b8, 0 0 14px rgba(59,86,184,.18); } 50% { box-shadow: inset 3px 0 0 #5b78e0, 0 0 22px rgba(59,86,184,.34); } }

/* ---- content entrance ---- */
body.skin-smart .content-header { animation: smartFadeIn .45s ease both; }
body.skin-smart .box,
body.skin-smart .small-box,
body.skin-smart .info-box,
body.skin-smart .nav-tabs-custom { animation: smartFadeUp .45s ease both; }
body.skin-smart .content .row > div:nth-child(1) .box,
body.skin-smart .content .row > div:nth-child(1) .small-box { animation-delay: .03s; }
body.skin-smart .content .row > div:nth-child(2) .box,
body.skin-smart .content .row > div:nth-child(2) .small-box { animation-delay: .09s; }
body.skin-smart .content .row > div:nth-child(3) .box,
body.skin-smart .content .row > div:nth-child(3) .small-box { animation-delay: .15s; }
body.skin-smart .content .row > div:nth-child(4) .box,
body.skin-smart .content .row > div:nth-child(4) .small-box { animation-delay: .21s; }

/* ---- card / widget hover ---- */
body.skin-smart .box { transition: transform .18s ease, box-shadow .18s ease !important; }
body.skin-smart .box:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(27,42,91,.06), 0 14px 32px rgba(27,42,91,.13) !important; }
body.skin-smart .small-box { transition: transform .18s ease, box-shadow .18s ease !important; }
body.skin-smart .small-box:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(27,42,91,.22) !important; }
body.skin-smart .small-box .icon { transition: transform .3s ease, opacity .3s ease !important; }
body.skin-smart .small-box:hover .icon { transform: scale(1.16) rotate(-7deg); opacity: .4 !important; }
body.skin-smart .info-box-icon { transition: transform .25s ease !important; }
body.skin-smart .info-box:hover .info-box-icon { transform: scale(1.06); }

/* ---- buttons ---- */
body.skin-smart .btn:active { transform: translateY(0) scale(.97) !important; }
body.skin-smart .btn-primary, body.skin-smart .btn-success { transition: transform .12s ease, box-shadow .18s ease, filter .18s ease !important; }
body.skin-smart .btn-primary:hover, body.skin-smart .btn-success:hover { filter: brightness(1.08); box-shadow: 0 7px 18px rgba(27,42,91,.34) !important; }

/* ---- table rows ---- */
body.skin-smart .table > tbody > tr { transition: background .15s ease, box-shadow .15s ease !important; }
body.skin-smart .table-hover > tbody > tr:hover, body.skin-smart table.dataTable tbody tr:hover { box-shadow: inset 3px 0 0 #3b56b8; }

/* ---- sidebar micro-interactions ---- */
body.skin-smart .sidebar-menu > li > a { transition: background .2s ease, color .2s ease, border-color .2s ease, padding-inline-start .2s ease !important; }
body.skin-smart .sidebar-menu > li > a > i,
body.skin-smart .sidebar-menu > li > a > .fa,
body.skin-smart .sidebar-menu > li > a > .fas { transition: transform .2s ease, color .2s ease !important; }
body.skin-smart .sidebar-menu > li > a:hover { padding-inline-start: 20px !important; }
body.skin-smart .sidebar-menu > li > a:hover > i,
body.skin-smart .sidebar-menu > li > a:hover > .fa,
body.skin-smart .sidebar-menu > li > a:hover > .fas { transform: scale(1.18); }
body.skin-smart .sidebar-menu > li.active > a { animation: smartPulseGlow 2.6s ease-in-out infinite; }
body.skin-smart .sidebar-menu .treeview-menu > li > a { transition: padding-inline-start .18s ease, color .18s ease, background .18s ease !important; }
body.skin-smart .sidebar-menu .treeview-menu > li > a:hover { padding-inline-start: 30px !important; }
body.skin-smart .sidebar-menu .treeview-menu { animation: smartFadeIn .25s ease both; }
/* caret rotate on open */
body.skin-smart .sidebar-menu > li > a .fa-angle-left,
body.skin-smart .sidebar-menu > li > a .fa-angle-right { transition: transform .25s ease !important; }
body.skin-smart .sidebar-menu > li.menu-open > a .fa-angle-left { transform: rotate(-90deg); }

/* ---- navbar dropdowns ---- */
body.skin-smart .navbar .dropdown-menu, body.skin-smart .navbar-nav > .user-menu .dropdown-menu { animation: smartFadeUp .18s ease both; }
body.skin-smart .main-header .navbar .nav > li > a { transition: background .2s ease, color .2s ease !important; }

/* ---- modals entrance polish ---- */
body.skin-smart .modal.in .modal-dialog { animation: smartFadeUp .28s cubic-bezier(.2,.7,.3,1) both; }

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body.skin-smart *, body.skin-smart *::before, body.skin-smart *::after { animation: none !important; transition: none !important; }
  body.skin-smart .box:hover, body.skin-smart .small-box:hover, body.skin-smart .btn:active { transform: none !important; }
}

/* ============================================================
 * United Smart - always PRINT invoices/receipts on a clean WHITE page,
 * regardless of the selected admin/POS theme (skin) background colours.
 * Screen keeps the theme; this block only affects printing. Placed last
 * so it wins over the skin background rules above (equal specificity + !important).
 * ============================================================ */
@media print {
  html, body,
  body[class*="skin-"], body[class*="pos-skin-"],
  body[class*="pos-skin-"].lockscreen,
  body[class*="pos-skin-"] .wrapper, body[class*="pos-skin-"] .wrapper.thetop,
  body[class*="pos-skin-"] section.content,
  body[class*="skin-"] .wrapper, body[class*="skin-"] .content-wrapper,
  .wrapper, .wrapper.thetop, section.content, .content-wrapper {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #000 !important;
  }
}
