/*
|--------------------------------------------------------------------------
| POSTECH.CLOUD V2.2 - Unified Readability & Header Popup Fix
|--------------------------------------------------------------------------
| تحديث بصري موحد:
| - تحسين وضوح الهيدر والقائمة الجانبية.
| - إصلاح القوائم المنسدلة والـ Popover البيضاء ذات النص المختفي.
| - إصلاح آلة الحاسبة داخل الهيدر.
| - تحسين وضوح بطاقات الداشبورد.
| - إظهار POSTECH.CLOUD في عنوان الداشبورد بصرياً بدون تغيير قاعدة البيانات.
| - لا يغير البيع أو الطباعة أو قواعد البيانات أو JavaScript الخاص بالنظام.
*/

:root {
    --pc22-navy: #12395f;
    --pc22-navy-2: #174a78;
    --pc22-navy-3: #0f3153;
    --pc22-blue: #248cff;
    --pc22-blue-2: #55adff;
    --pc22-gold: #f6b83f;
    --pc22-page: #f5f8fc;
    --pc22-text: #102a47;
    --pc22-muted: #5f7691;
    --pc22-border: #d7e4f2;
    --pc22-white: #ffffff;
}

/* =========================================================
   Header - readable professional navy
   ========================================================= */
body:not(.lockscreen) main > div.no-print:first-child,
body:not(.lockscreen) .main-header,
body:not(.lockscreen) .navbar,
body:not(.lockscreen) header.tw-shrink-0,
body:not(.lockscreen) .tw-shrink-0.no-print {
    background: linear-gradient(90deg, #174a78 0%, #123f69 55%, #0f365c 100%) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.20) !important;
    box-shadow: 0 5px 16px rgba(12,41,70,.14) !important;
}

/* Top buttons */
body:not(.lockscreen) main > div.no-print:first-child > div > div > div > button,
body:not(.lockscreen) main > div.no-print:first-child summary,
body:not(.lockscreen) .side-bar-collapse,
body:not(.lockscreen) .small-view-button,
body:not(.lockscreen) #btnCalculator,
body:not(.lockscreen) #header_shortcut_dropdown,
body:not(.lockscreen) #view_todays_profit {
    background: #248cff !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 9px rgba(19,83,145,.18) !important;
    opacity: 1 !important;
}

body:not(.lockscreen) main > div.no-print:first-child button svg,
body:not(.lockscreen) main > div.no-print:first-child button i,
body:not(.lockscreen) main > div.no-print:first-child summary svg,
body:not(.lockscreen) main > div.no-print:first-child summary i {
    color: #fff !important;
    opacity: 1 !important;
}

/* =========================================================
   Critical fix: Header dropdowns / popovers must be readable
   ========================================================= */
body:not(.lockscreen) main > div.no-print:first-child .dropdown-menu,
body:not(.lockscreen) main > div.no-print:first-child .tw-dw-dropdown-content,
body:not(.lockscreen) main > div.no-print:first-child .popover,
body:not(.lockscreen) .popover {
    background: #fff !important;
    color: var(--pc22-text) !important;
    border: 1px solid #d7e4f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(16,42,71,.18) !important;
    z-index: 3000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body:not(.lockscreen) main > div.no-print:first-child .dropdown-menu *,
body:not(.lockscreen) main > div.no-print:first-child .tw-dw-dropdown-content *,
body:not(.lockscreen) main > div.no-print:first-child .popover *,
body:not(.lockscreen) .popover-title,
body:not(.lockscreen) .popover-content,
body:not(.lockscreen) .popover-content label,
body:not(.lockscreen) .popover-content span,
body:not(.lockscreen) .popover-content p {
    color: var(--pc22-text) !important;
    -webkit-text-fill-color: var(--pc22-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body:not(.lockscreen) .popover-title {
    background: #eef5fd !important;
    border-bottom: 1px solid #d7e4f2 !important;
    font-weight: 800 !important;
    padding: 9px 12px !important;
}

body:not(.lockscreen) .popover-content {
    background: #fff !important;
    padding: 12px !important;
}

body:not(.lockscreen) main > div.no-print:first-child .dropdown-menu a,
body:not(.lockscreen) main > div.no-print:first-child .tw-dw-dropdown-content a {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    color: var(--pc22-text) !important;
    background: transparent !important;
    border-radius: 8px !important;
}

body:not(.lockscreen) main > div.no-print:first-child .dropdown-menu a:hover,
body:not(.lockscreen) main > div.no-print:first-child .tw-dw-dropdown-content a:hover {
    color: #0f62c2 !important;
    background: #eef6ff !important;
}

/* Bootstrap popover arrows */
body:not(.lockscreen) .popover.top > .arrow:after,
body:not(.lockscreen) .popover.bottom > .arrow:after,
body:not(.lockscreen) .popover.left > .arrow:after,
body:not(.lockscreen) .popover.right > .arrow:after {
    border-bottom-color: #fff !important;
}

/* =========================================================
   Calculator inside popover
   ========================================================= */
body:not(.lockscreen) .popover #calculator {
    width: 100% !important;
    min-width: 205px !important;
    background: #fff !important;
}

body:not(.lockscreen) .popover #calculator .calcBG {
    padding: 6px 8px 10px !important;
    background: #fff !important;
}

body:not(.lockscreen) .popover #calculator .row {
    margin: 0 !important;
}

body:not(.lockscreen) .popover #calculator .screen {
    width: 100% !important;
    height: 38px !important;
    margin: 4px 0 9px !important;
    padding: 6px 9px !important;
    color: #102a47 !important;
    background: #f8fbff !important;
    border: 1px solid #cbdced !important;
    border-radius: 8px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 3px rgba(16,42,71,.06) !important;
}

body:not(.lockscreen) .popover #calculator button.btn {
    width: 43px !important;
    height: 38px !important;
    min-width: 43px !important;
    margin: 3px !important;
    padding: 0 !important;
    color: #173a60 !important;
    background: #eef5fd !important;
    border: 1px solid #d6e3f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

body:not(.lockscreen) .popover #calculator button.btn:hover {
    background: #dcecff !important;
    border-color: #9fc7ee !important;
}

body:not(.lockscreen) .popover #calculator #allClear {
    color: #fff !important;
    background: #d64545 !important;
    border-color: #c23a3a !important;
}

body:not(.lockscreen) .popover #calculator #clear {
    color: #513300 !important;
    background: #f6b83f !important;
    border-color: #e6a52e !important;
}

body:not(.lockscreen) .popover #calculator #equals {
    color: #fff !important;
    background: #248cff !important;
    border-color: #1675df !important;
}

body:not(.lockscreen) .popover #calculator #blank {
    background: #f8fafc !important;
    border-color: #edf2f7 !important;
}

/* =========================================================
   Sidebar - brighter navy, clearer text
   ========================================================= */
aside.side-bar {
    background: linear-gradient(180deg, #164a77 0%, #123d65 54%, #0f3355 100%) !important;
    border-inline-start: 1px solid rgba(246,184,63,.28) !important;
    border-inline-end: 1px solid rgba(255,255,255,.12) !important;
}

aside.side-bar > a:first-of-type,
aside.side-bar .postech-cloud-sidebar-brand {
    background: linear-gradient(135deg, #1b5688 0%, #143f68 100%) !important;
    border-bottom: 1px solid rgba(246,184,63,.42) !important;
}

aside.side-bar .custom-hover,
aside.side-bar .sidebar-menu > li > a,
aside.side-bar .treeview > a,
aside.side-bar li > a,
aside.side-bar [class*="menu"] a {
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    opacity: 1 !important;
}

aside.side-bar li > a span,
aside.side-bar li > a p,
aside.side-bar li > a small,
aside.side-bar li > a i,
aside.side-bar li > a svg {
    color: #f6fbff !important;
    opacity: 1 !important;
}

aside.side-bar .active > a,
aside.side-bar .menu-open > a,
aside.side-bar .child-menu-active,
aside.side-bar li.active > a {
    background: linear-gradient(90deg, #2b91f5 0%, #1675d4 100%) !important;
    color: #fff !important;
    box-shadow: inset -4px 0 0 var(--pc22-gold), 0 5px 14px rgba(10,74,135,.18) !important;
}

html[dir="ltr"] aside.side-bar .active > a,
html[dir="ltr"] aside.side-bar .menu-open > a,
html[dir="ltr"] aside.side-bar .child-menu-active,
html[dir="ltr"] aside.side-bar li.active > a {
    box-shadow: inset 4px 0 0 var(--pc22-gold), 0 5px 14px rgba(10,74,135,.18) !important;
}

/* =========================================================
   Dashboard - light canvas and stronger text contrast
   ========================================================= */
body:not(.lockscreen) #scrollable-container,
body:not(.lockscreen) main.tw-bg-gray-100,
body:not(.lockscreen) .content-wrapper {
    background: var(--pc22-page) !important;
    color: var(--pc22-text) !important;
}

body:not(.lockscreen) #scrollable-container .metric-card,
body:not(.lockscreen) #scrollable-container .card,
body:not(.lockscreen) #scrollable-container .box,
body:not(.lockscreen) #scrollable-container .info-box,
body:not(.lockscreen) #scrollable-container .well,
body:not(.lockscreen) #scrollable-container .panel {
    background: #fff !important;
    border-color: var(--pc22-border) !important;
    color: var(--pc22-text) !important;
}

body:not(.lockscreen) #scrollable-container .metric-card .info-box-number,
body:not(.lockscreen) #scrollable-container .info-box-number,
body:not(.lockscreen) #scrollable-container .small-box h3 {
    color: #0d2845 !important;
    font-weight: 900 !important;
}

body:not(.lockscreen) #scrollable-container .metric-card span:not(.info-box-number),
body:not(.lockscreen) #scrollable-container .text-muted,
body:not(.lockscreen) #scrollable-container small {
    color: #607793 !important;
    opacity: 1 !important;
}

/* Visual brand on home dashboard only */
body:not(.lockscreen) #scrollable-container .tw-pb-6 .tw-px-5 .title > h1 {
    font-size: 0 !important;
    line-height: 1.2 !important;
    color: transparent !important;
}

body:not(.lockscreen) #scrollable-container .tw-pb-6 .tw-px-5 .title > h1::before {
    content: "POSTECH.CLOUD";
    display: inline-block;
    font-size: 29px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #12395f !important;
    letter-spacing: .02em !important;
}

/* Filter button */
body:not(.lockscreen) #dashboard_date_filter {
    background: #fff !important;
    color: #12395f !important;
    border: 1px solid #bfd7ee !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 9px rgba(16,42,71,.06) !important;
}

body:not(.lockscreen) #dashboard_date_filter:hover {
    background: #eef6ff !important;
    border-color: #248cff !important;
}

/* =========================================================
   Keep POS footer buttons readable from V2.1.1
   ========================================================= */
body .pos-form-actions.theme__pos,
body .pos-form-actions.theme__pos > .row,
body .pos_form_totals {
    background: #f8fafc !important;
    color: #10243e !important;
}

body .pos_form_totals,
body .pos_form_totals td,
body .pos_form_totals b,
body .pos_form_totals span,
body .pos_form_totals label {
    color: #10243e !important;
    text-shadow: none !important;
}

body .pos_form_totals .action_button_list .btn,
body .pos_form_totals .action_button_list button {
    color: #fff !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1366px) {
    aside.side-bar .custom-hover,
    aside.side-bar .sidebar-menu > li > a,
    aside.side-bar .treeview > a,
    aside.side-bar li > a,
    aside.side-bar [class*="menu"] a {
        font-size: 12.8px !important;
    }

    body:not(.lockscreen) .popover {
        max-width: 245px !important;
    }

    body:not(.lockscreen) #scrollable-container .tw-pb-6 .tw-px-5 .title > h1::before {
        font-size: 25px !important;
    }
}


/*
|--------------------------------------------------------------------------
| POSTECH.CLOUD V2.3 - POS Drawer Overlay & Category Readability Fix
|--------------------------------------------------------------------------
| يعالج التعتيم القوي عند فتح قائمة الأصناف/العلامات التجارية في شاشة POS.
| يبقي طبقة النقر الخارجية فعالة لإغلاق القائمة، لكن بدون إخفاء الشاشة.
*/

/* Generic POS overlay from app layout: keep click-capture, remove heavy darkness */
body.lockscreen .overlay {
    background: rgba(15, 49, 83, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* DaisyUI category / brand drawer overlay */
body.lockscreen .tw-dw-drawer-overlay,
body.lockscreen .tw-dw-drawer-overlay.overlay-category {
    background-color: rgba(15, 49, 83, 0.07) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Drawer panel itself */
body.lockscreen .tw-dw-drawer-side .tw-dw-menu {
    background: #ffffff !important;
    color: #102a47 !important;
    border-inline-end: 1px solid #d7e4f2 !important;
    box-shadow: 10px 0 28px rgba(15, 49, 83, 0.12) !important;
}

/* Category drawer text */
body.lockscreen .tw-dw-drawer-side .category_heading,
body.lockscreen .tw-dw-drawer-side .main-category,
body.lockscreen .tw-dw-drawer-side .main-category-div,
body.lockscreen .tw-dw-drawer-side .card-body,
body.lockscreen .tw-dw-drawer-side h3,
body.lockscreen .tw-dw-drawer-side h4,
body.lockscreen .tw-dw-drawer-side span {
    color: #102a47 !important;
    -webkit-text-fill-color: #102a47 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Main category rows */
body.lockscreen .tw-dw-drawer-side .main-category-div {
    background: #ffffff !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-radius: 8px !important;
    margin-bottom: 5px !important;
}

body.lockscreen .tw-dw-drawer-side .main-category-div:hover,
body.lockscreen .tw-dw-drawer-side .main-category:hover {
    background: #eef6ff !important;
    color: #0f62c2 !important;
}

/* Sub-category popout */
body.lockscreen .tw-dw-drawer-side .sub-category-dropdown {
    background: #ffffff !important;
    color: #102a47 !important;
    border: 1px solid #d7e4f2 !important;
    box-shadow: 0 12px 30px rgba(16, 42, 71, 0.16) !important;
    border-radius: 10px !important;
}

body.lockscreen .tw-dw-drawer-side .product_category .card,
body.lockscreen .tw-dw-drawer-side .product_category .card-body {
    background: #f8fbff !important;
    color: #102a47 !important;
}

/* Prevent inherited dark-theme rules from muting POS while drawer is open */
body.lockscreen .tw-dw-drawer-toggle:checked ~ .tw-dw-drawer-side {
    color: #102a47 !important;
}

body.lockscreen .tw-dw-drawer-toggle:checked ~ .tw-dw-drawer-side > .tw-dw-drawer-overlay {
    visibility: visible !important;
}

/* Keep POS canvas fully readable */
body.lockscreen #scrollable-container,
body.lockscreen main,
body.lockscreen .pos-content,
body.lockscreen .pos-form {
    filter: none !important;
    opacity: 1 !important;
}

/* Focus state: blue/gold instead of harsh red when keyboard focus lands on POS buttons */
body.lockscreen button:focus,
body.lockscreen a:focus,
body.lockscreen label:focus {
    outline: 2px solid rgba(36, 140, 255, 0.55) !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 3px rgba(246, 184, 63, 0.12) !important;
}