/*
|--------------------------------------------------------------------------
| POSTECH.CLOUD V3.2 - Admin Pages Polish
|--------------------------------------------------------------------------
| نطاق آمن بصرياً:
| - المستخدمون والصلاحيات وموظفو العمولة
| - الجداول وDataTables داخل الصفحات الإدارية
| - تبويبات الإدارة
| - قائمة حساب المستخدم في الهيدر
| لا يغير Controllers / Routes / DB / POS / Printing.
*/

:root {
    --pc32-navy: #123b64;
    --pc32-navy-deep: #0c2d4e;
    --pc32-blue: #2187f5;
    --pc32-blue-dark: #1269c8;
    --pc32-gold: #f4b52c;
    --pc32-bg: #f5f8fc;
    --pc32-card: #ffffff;
    --pc32-border: #dbe6f2;
    --pc32-text: #17324f;
    --pc32-muted: #6c8198;
    --pc32-danger: #dc3545;
    --pc32-success: #16884c;
    --pc32-shadow: 0 8px 25px rgba(18,59,100,.075);
}

/* Remove accidental visual frame around app area */
html,
body:not(.lockscreen),
body:not(.lockscreen) main,
body:not(.lockscreen) #scrollable-container {
    border: 0 !important;
    outline: 0 !important;
}

body:not(.lockscreen) #scrollable-container {
    background: var(--pc32-bg) !important;
}

/* =========================================================
   Page headings
   ========================================================= */
body:not(.lockscreen) section.content-header {
    margin: 0 !important;
    padding: 22px 28px 12px !important;
    background: transparent !important;
}

body:not(.lockscreen) section.content-header h1 {
    margin: 0 !important;
    color: var(--pc32-navy-deep) !important;
    font-size: 27px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body:not(.lockscreen) section.content-header h1 small {
    display: inline-block !important;
    margin-inline-start: 8px !important;
    color: var(--pc32-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

body:not(.lockscreen) section.content {
    padding: 8px 28px 30px !important;
}

/* =========================================================
   Users / Roles submenu
   ========================================================= */
body:not(.lockscreen) section.content .horizontal-scroll {
    height: 50px !important;
    min-height: 50px !important;
    margin-bottom: 14px !important;
    padding: 5px 7px !important;
    background: #fff !important;
    border: 1px solid var(--pc32-border) !important;
    border-radius: 13px !important;
    box-shadow: 0 4px 15px rgba(18,59,100,.05) !important;
    overflow: hidden !important;
}

body:not(.lockscreen) section.content .horizontal-scroll .storys-container {
    position: relative !important;
    inset: auto !important;
    height: 100% !important;
    gap: 5px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    align-items: center !important;
}

body:not(.lockscreen) section.content .horizontal-scroll .sub-menu-item {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 18px !important;
    color: #71849a !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: .16s ease !important;
}

body:not(.lockscreen) section.content .horizontal-scroll .sub-menu-item:hover {
    color: var(--pc32-blue-dark) !important;
    background: #edf6ff !important;
    border-color: #c7ddf4 !important;
}

body:not(.lockscreen) section.content .horizontal-scroll .sub-menu-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--pc32-blue), var(--pc32-blue-dark)) !important;
    border-color: var(--pc32-blue-dark) !important;
    box-shadow: inset 0 -3px 0 var(--pc32-gold), 0 5px 13px rgba(33,135,245,.16) !important;
}

/* =========================================================
   Main widgets/cards
   ========================================================= */
body:not(.lockscreen) section.content .box,
body:not(.lockscreen) section.content .box.box-primary,
body:not(.lockscreen) section.content .tw-dw-card,
body:not(.lockscreen) section.content .card {
    background: var(--pc32-card) !important;
    border: 1px solid var(--pc32-border) !important;
    border-radius: 15px !important;
    box-shadow: var(--pc32-shadow) !important;
    overflow: hidden !important;
}

body:not(.lockscreen) section.content .box.box-primary {
    border-top: 1px solid var(--pc32-border) !important;
}

body:not(.lockscreen) section.content .box-header {
    min-height: 58px !important;
    padding: 13px 16px !important;
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
    border-bottom: 1px solid #e7eef6 !important;
}

body:not(.lockscreen) section.content .box-title {
    color: var(--pc32-navy-deep) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

body:not(.lockscreen) section.content .box-body {
    padding: 14px 16px 17px !important;
    background: #fff !important;
}

/* Add/Create buttons */
body:not(.lockscreen) section.content .box-tools > a.tw-dw-btn,
body:not(.lockscreen) section.content a.tw-dw-btn[href*="/create"],
body:not(.lockscreen) section.content .btn-modal.tw-dw-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    gap: 6px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--pc32-blue), var(--pc32-blue-dark)) !important;
    border: 1px solid var(--pc32-blue-dark) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 15px rgba(33,135,245,.18) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
}

body:not(.lockscreen) section.content .box-tools > a.tw-dw-btn:hover,
body:not(.lockscreen) section.content a.tw-dw-btn[href*="/create"]:hover,
body:not(.lockscreen) section.content .btn-modal.tw-dw-btn:hover {
    background: linear-gradient(135deg, #3195ff, #0d64c2) !important;
    transform: translateY(-1px);
}

body:not(.lockscreen) section.content .box-tools svg {
    width: 19px !important;
    height: 19px !important;
}

/* =========================================================
   DataTables toolbar
   ========================================================= */
body:not(.lockscreen) section.content .dataTables_wrapper {
    color: var(--pc32-text) !important;
}

body:not(.lockscreen) section.content .dataTables_wrapper .row:first-child,
body:not(.lockscreen) section.content .dataTables_wrapper .dt-buttons {
    margin-bottom: 8px !important;
}

body:not(.lockscreen) section.content .dataTables_filter label,
body:not(.lockscreen) section.content .dataTables_length label {
    color: var(--pc32-muted) !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
}

body:not(.lockscreen) section.content .dataTables_filter input {
    width: 205px !important;
    height: 36px !important;
    margin-inline-start: 6px !important;
    padding: 6px 10px !important;
    color: var(--pc32-text) !important;
    background: #fff !important;
    border: 1px solid #cddcea !important;
    border-radius: 9px !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(18,59,100,.025) !important;
}

body:not(.lockscreen) section.content .dataTables_filter input:focus {
    border-color: #77b7f5 !important;
    box-shadow: 0 0 0 3px rgba(33,135,245,.10) !important;
}

body:not(.lockscreen) section.content .dataTables_length select,
body:not(.lockscreen) section.content select[name$="_length"] {
    height: 35px !important;
    min-width: 66px !important;
    padding: 4px 8px !important;
    color: var(--pc32-text) !important;
    background: #fff !important;
    border: 1px solid #cddcea !important;
    border-radius: 8px !important;
}

body:not(.lockscreen) section.content .dt-buttons .btn,
body:not(.lockscreen) section.content .dt-button {
    min-width: 38px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    margin: 2px !important;
    color: var(--pc32-navy) !important;
    background: #f3f7fb !important;
    border: 1px solid #d4e0ec !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body:not(.lockscreen) section.content .dt-buttons .btn:hover,
body:not(.lockscreen) section.content .dt-button:hover {
    color: var(--pc32-blue-dark) !important;
    background: #eaf4ff !important;
    border-color: #b9d8f5 !important;
}

/* =========================================================
   Admin tables
   ========================================================= */
body:not(.lockscreen) section.content .table-responsive {
    border: 0 !important;
    overflow-x: auto !important;
}

body:not(.lockscreen) section.content table.dataTable,
body:not(.lockscreen) section.content #users_table,
body:not(.lockscreen) section.content #roles_table,
body:not(.lockscreen) section.content #sales_commission_agent_table {
    width: 100% !important;
    margin-top: 8px !important;
    background: #fff !important;
    border: 1px solid var(--pc32-border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 11px !important;
    overflow: hidden !important;
}

body:not(.lockscreen) section.content table.dataTable thead th,
body:not(.lockscreen) section.content #users_table thead th,
body:not(.lockscreen) section.content #roles_table thead th,
body:not(.lockscreen) section.content #sales_commission_agent_table thead th {
    height: 43px !important;
    padding: 10px 12px !important;
    color: #395570 !important;
    background: #f1f6fb !important;
    border-top: 0 !important;
    border-bottom: 1px solid #d7e3ef !important;
    border-inline-end: 1px solid #e3ebf3 !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body:not(.lockscreen) section.content table.dataTable tbody td,
body:not(.lockscreen) section.content #users_table tbody td,
body:not(.lockscreen) section.content #roles_table tbody td,
body:not(.lockscreen) section.content #sales_commission_agent_table tbody td {
    min-height: 44px !important;
    padding: 10px 12px !important;
    color: #233f5c !important;
    background: #fff !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e7eef5 !important;
    border-inline-end: 1px solid #edf2f7 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    vertical-align: middle !important;
}

body:not(.lockscreen) section.content table.dataTable tbody tr:nth-child(even) td {
    background: #fbfdff !important;
}

body:not(.lockscreen) section.content table.dataTable tbody tr:hover td {
    background: #eef6ff !important;
}

/* Action icons/buttons */
body:not(.lockscreen) section.content table .btn,
body:not(.lockscreen) section.content table a.btn,
body:not(.lockscreen) section.content table button {
    border-radius: 7px !important;
}

body:not(.lockscreen) section.content table .fa-eye {
    color: #0f6fce !important;
}

body:not(.lockscreen) section.content table .fa-edit,
body:not(.lockscreen) section.content table .fa-pencil-alt,
body:not(.lockscreen) section.content table .fa-pencil {
    color: #16884c !important;
}

body:not(.lockscreen) section.content table .fa-trash,
body:not(.lockscreen) section.content table .fa-trash-alt {
    color: var(--pc32-danger) !important;
}

/* =========================================================
   Pagination / info
   ========================================================= */
body:not(.lockscreen) section.content .dataTables_info {
    padding-top: 12px !important;
    color: var(--pc32-muted) !important;
    font-size: 11px !important;
}

body:not(.lockscreen) section.content .pagination {
    margin: 10px 0 2px !important;
}

body:not(.lockscreen) section.content .pagination > li > a,
body:not(.lockscreen) section.content .pagination > li > span {
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 2px !important;
    padding: 7px 9px !important;
    color: var(--pc32-navy) !important;
    background: #fff !important;
    border: 1px solid #d6e2ed !important;
    border-radius: 7px !important;
}

body:not(.lockscreen) section.content .pagination > .active > a,
body:not(.lockscreen) section.content .pagination > .active > span {
    color: #fff !important;
    background: var(--pc32-blue) !important;
    border-color: var(--pc32-blue) !important;
}

/* =========================================================
   User account dropdown in header
   ========================================================= */
body:not(.lockscreen) header details > ul,
body:not(.lockscreen) main > div.no-print:first-child details > ul {
    min-width: 205px !important;
    padding: 7px !important;
    background: #fff !important;
    border: 1px solid #d8e4ef !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 38px rgba(11,44,76,.18) !important;
}

body:not(.lockscreen) header details > ul .postech-account-label,
body:not(.lockscreen) main > div.no-print:first-child details > ul .postech-account-label {
    color: #788ba0 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
}

body:not(.lockscreen) header details > ul p.tw-font-medium,
body:not(.lockscreen) main > div.no-print:first-child details > ul p.tw-font-medium {
    margin-top: 2px !important;
    color: var(--pc32-navy-deep) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body:not(.lockscreen) header details > ul li a,
body:not(.lockscreen) main > div.no-print:first-child details > ul li a {
    min-height: 37px !important;
    margin-top: 2px !important;
    color: #4e657d !important;
    border-radius: 8px !important;
}

body:not(.lockscreen) header details > ul li a:hover,
body:not(.lockscreen) main > div.no-print:first-child details > ul li a:hover {
    color: var(--pc32-blue-dark) !important;
    background: #eef6ff !important;
}

/* =========================================================
   Modals used by admin pages
   ========================================================= */
body:not(.lockscreen) .user_modal .modal-content,
body:not(.lockscreen) .commission_agent_modal .modal-content,
body:not(.lockscreen) .modal .modal-content {
    border: 1px solid #dbe6f2 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(12,45,78,.22) !important;
    overflow: hidden !important;
}

body:not(.lockscreen) .modal .modal-header {
    color: var(--pc32-text) !important;
    background: #f8fbfe !important;
    border-bottom: 1px solid #e1eaf3 !important;
}

body:not(.lockscreen) .modal .modal-title {
    color: var(--pc32-navy-deep) !important;
    font-weight: 900 !important;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 767px) {
    body:not(.lockscreen) section.content-header {
        padding: 16px 14px 8px !important;
    }

    body:not(.lockscreen) section.content {
        padding: 7px 14px 24px !important;
    }

    body:not(.lockscreen) section.content-header h1 {
        font-size: 22px !important;
    }

    body:not(.lockscreen) section.content .horizontal-scroll .sub-menu-item {
        padding: 7px 13px !important;
        font-size: 11.5px !important;
    }

    body:not(.lockscreen) section.content .dataTables_filter input {
        width: 150px !important;
    }
}


/* =========================================================
   V3.2.1 - Screenshot fixes / deterministic overrides
   ========================================================= */

/* Remove red/colored page edge left by older theme rules */
html,
body,
body > .tw-flex,
body > div,
main,
#scrollable-container {
    border-color: transparent !important;
}

body:not(.lockscreen)::before,
body:not(.lockscreen)::after,
main::before,
main::after {
    box-shadow: none !important;
}

/* Admin submenu — exact stable layout */
.horizontal-scroll {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 0 16px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #dbe6f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 16px rgba(18,59,100,.055) !important;
}

.horizontal-scroll .storys-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

.horizontal-scroll .sub-menu-item {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 9px 18px !important;
    color: #73869a !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-decoration: none !important;
}

.horizontal-scroll .sub-menu-item.active {
    color: #fff !important;
    background: linear-gradient(135deg,#2187f5,#1269c8) !important;
    border-color: #1269c8 !important;
    box-shadow: inset 0 -3px 0 #f4b52c !important;
}

/* Force admin add buttons blue even if an old inline or utility style remains */
section.content .box-tools a.tw-dw-btn,
section.content .box-tools .btn-modal,
section.content a[href$="/create"].tw-dw-btn {
    background-color: #2187f5 !important;
    background-image: linear-gradient(135deg,#2187f5,#1269c8) !important;
    color: #fff !important;
    border-radius: 9px !important;
    border: 1px solid #1269c8 !important;
}

/* DataTables toolbar: compact and aligned */
section.content .dataTables_wrapper .row:first-child {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

section.content .dataTables_wrapper .dataTables_filter {
    margin-inline-end: auto !important;
}

section.content .dataTables_wrapper .dataTables_filter input {
    width: 190px !important;
    min-width: 150px !important;
}

section.content .dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

section.content .dt-buttons .btn,
section.content .dt-buttons button,
section.content .dt-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #214567 !important;
    background: #f5f8fb !important;
    border: 1px solid #d7e2ed !important;
    border-radius: 8px !important;
}

/* User account dropdown exact sizing/readability */
details.tw-dw-dropdown > ul[role="menu"] {
    width: 220px !important;
    min-width: 220px !important;
    padding: 8px !important;
    background: #fff !important;
    color: #17324f !important;
    border: 1px solid #d8e4ef !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(12,45,78,.18) !important;
}

details.tw-dw-dropdown > ul[role="menu"] .postech-account-label {
    color: #71869b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

details.tw-dw-dropdown > ul[role="menu"] p.tw-font-medium {
    color: #102f50 !important;
    font-weight: 900 !important;
}

/* Main admin table */
#users_table,
#roles_table,
#sales_commission_agent_table {
    border-radius: 10px !important;
}

#users_table tbody td,
#roles_table tbody td,
#sales_commission_agent_table tbody td {
    height: 46px !important;
}

/* Make action icons distinct and easy to hit */
#users_table td:last-child a,
#users_table td:last-child button,
#roles_table td:last-child a,
#roles_table td:last-child button,
#sales_commission_agent_table td:last-child a,
#sales_commission_agent_table td:last-child button {
    min-width: 31px !important;
    min-height: 31px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px !important;
    padding: 4px 6px !important;
}

/* Make titles less separated from content */
section.content-header + section.content {
    padding-top: 4px !important;
}