@CHARSET "UTF-8";
/* +-----------------------------------------------------------------+
   Path: /themes/default/css/cpos-theme.css
   Cpos look for EVERY page (loaded last, from themes/default/menu.php).
   Uses plain element selectors on purpose (low priority), so pages with
   their own design (invoice, receipts, home boxes) keep their styles.
   Remove the <link> line in menu.php to go back to the old look.
   +-----------------------------------------------------------------+ */

/* ---------- text ---------- */
html, body, div, a, table { font: normal 13px Tahoma, Arial, sans-serif; }
body { background: #f4f6f8; color: #1f2937; }
td, th { font-size: 13px; }
a { color: #0b5f63; }
a:hover { color: #0f8f95; }

h1 {
    font: bold 20px Tahoma, Arial, sans-serif; color: #0b5f63;
    font-variant: normal; text-align: right;
    margin: 6px 0 12px; padding: 4px 2px 8px;
    border-bottom: 2px solid #dff3f4;
}
h2, h5 { color: #0b5f63; font-family: Tahoma, Arial, sans-serif; font-variant: normal; }
h5 { font-size: 16px; margin-top: 24px; }

/* ---------- fields ---------- */
input, select, textarea {
    font: normal 14px Tahoma, Arial, sans-serif; color: #1f2937;
    border: 1px solid #d0d5dd; border-radius: 8px; background-color: #fff;
    padding: 5px 8px; margin: 2px 0;
    -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-transition: border-color .12s, box-shadow .12s; transition: border-color .12s, box-shadow .12s;
}
input, select { min-height: 32px; }
textarea { line-height: 1.5; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: #0f8f95;
    -webkit-box-shadow: 0 0 0 3px rgba(15,143,149,.15); box-shadow: 0 0 0 3px rgba(15,143,149,.15);
}
input[readonly], input[disabled], select[disabled], textarea[readonly] { background-color: #f8fafc; color: #475569; }
input[type="checkbox"], input[type="radio"] {
    min-height: 0; width: 16px; height: 16px; padding: 0; margin: 0 4px; border-radius: 4px;
    vertical-align: middle; -webkit-box-shadow: none; box-shadow: none; accent-color: #0f8f95;
}
input[type="image"], input[type="hidden"] { border: 0; padding: 0; min-height: 0; background: none; }
input[type="file"] { border-style: dashed; padding: 6px; }

/* ---------- buttons ---------- */
button, input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 34px; padding: 6px 14px; margin: 2px;
    border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #1f2937;
    font: bold 13px Tahoma, Arial, sans-serif; cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(16,24,40,.06); box-shadow: 0 1px 2px rgba(16,24,40,.06);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    border-color: #0f8f95; color: #0b5f63; background: #effafa;
}
input[type="submit"] { background: #0f8f95; border-color: #0f8f95; color: #fff; }
input[type="submit"]:hover { background: #0b7c81; color: #fff; }

/* ---------- top toolbar ---------- */
.talbor {
    background: #fff; background-image: none;
    border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 8px 12px; margin: 0 0 12px;
    -webkit-box-shadow: 0 1px 3px rgba(16,24,40,.08); box-shadow: 0 1px 3px rgba(16,24,40,.08);
    font-family: Tahoma, Arial, sans-serif;
}
.talbor:hover { background: #fff; background-image: none; }
.talbor > div { padding: 4px 6px; border-radius: 10px; }
.talbor > div:hover { background: #effafa; }
.talbor > div > div { font-size: 12px !important; color: #334155 !important; margin-top: 3px; }
.talbor img, .talbor i { cursor: pointer; }

/* bottom toolbar on phones */
.talbor_fixed {
    left: 0; right: 0; width: auto; margin: 0 8px 8px; bottom: 0; z-index: 900;
    background: #fff; background-image: none; color: #1f2937;
    border: 1px solid #e5e7eb; border-radius: 16px; padding: 6px 10px;
    -webkit-box-shadow: 0 -4px 18px rgba(16,24,40,.12); box-shadow: 0 -4px 18px rgba(16,24,40,.12);
}
.talbor_fixed:hover { background: #fff; background-image: none; }

/* ---------- frames ---------- */
fieldset {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 12px 14px; margin: 0 0 12px;
}
legend {
    font: bold 14px Tahoma, Arial, sans-serif; color: #0b5f63;
    padding: 2px 10px; background: #effafa; border-radius: 8px;
}
label { color: #334155; }

/* ---------- tables ---------- */
td, tr { border-color: #edf0f3; }
th {
    border: 0; border-bottom: 1px solid #e5e7eb;
    background: #f8fafc; color: #475569; font-weight: bold; padding: 8px;
}
thead.ui-widget-header, tfoot.ui-widget-header, .ui-widget-header {
    background: #f8fafc; background-image: none; border-color: #e5e7eb; color: #334155;
}
tfoot.ui-widget-header td, tfoot.ui-widget-header th { background: #effafa; color: #0b5f63; font-weight: bold; }
table.ui-widget { border-collapse: collapse; background: #fff; border-radius: 10px; }
.ui-widget-content { border-color: #e5e7eb; }
table.ui-widget td { padding: 7px 8px; border: 0; border-bottom: 1px solid #edf0f3; }
table.ui-widget th { padding: 9px 8px; }
fieldset td, fieldset tr { border: 0; }          /* form layout tables: no grid lines */
tr.odd  { background-color: #fafbfc; }
tr.even { background-color: #fff; }
tr.odd:hover, tr.even:hover, th.odd:hover { background-color: #effafa !important; }

/* ---------- tabs ---------- */
.ui-tabs { background: transparent; border: 0; }
.ui-tabs .ui-tabs-nav { background: none; border: 0; border-bottom: 2px solid #e5e7eb; border-radius: 0; padding: 0 4px; }
.ui-tabs .ui-tabs-nav li { float: right; margin: 0 0 -2px 4px; background: none; border: 0; }
.ui-tabs .ui-tabs-nav li a {
    float: right; padding: 9px 14px; font: bold 13px Tahoma, Arial, sans-serif; color: #475569;
    border-bottom: 3px solid transparent;
}
.ui-tabs .ui-tabs-nav li a:hover { color: #0b5f63; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-active a { color: #0f8f95; border-bottom-color: #0f8f95; }
.ui-tabs .ui-tabs-panel { background: #fff; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 12px 12px; padding: 14px; }

/* ---------- list pages (DataTables) ---------- */
.dataTables_filter input { min-width: 200px; }
.paging_full_numbers span.paginate_button, .paging_full_numbers span.paginate_active {
    display: inline-block; min-width: 30px; padding: 5px 9px; margin: 0 2px;
    border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; text-align: center;
}
.paging_full_numbers span.paginate_button:hover { border-color: #0f8f95; background: #effafa; }
.paging_full_numbers span.paginate_active { background: #0f8f95; border-color: #0f8f95; color: #fff; }

/* ---------- placeholders ---------- */
::-webkit-input-placeholder { color: #94a3b8; font-size: 13px; font-weight: normal; font-variant: normal; }
::placeholder { color: #94a3b8; font-size: 13px; font-weight: normal; font-variant: normal; }

/* ---------- phones ---------- */
@media only screen and (max-width: 768px) {
    html, body, div, a, table { font-size: 14px; }
    h1 { font-size: 18px; }
    input, select, textarea { font-size: 16px !important; min-height: 40px; } /* 16px stops the phone zooming in */
    button, input[type="button"], input[type="submit"] { min-height: 40px; }
    td, th { padding: 6px; }
}

/* ---------- round buttons in the corner: calculator, go down, go up ---------- */
#calcBtn, #upBtn, #downBtn {
    width: 44px !important; height: 44px !important; padding: 0 !important;
    border-radius: 12px !important; border: 1px solid #e5e7eb !important;
    background: #fff !important; color: #0b5f63 !important;
    font-size: 18px !important; line-height: 42px !important; text-align: center !important;
    cursor: pointer; -webkit-box-shadow: 0 6px 18px rgba(16,24,40,.15) !important; box-shadow: 0 6px 18px rgba(16,24,40,.15) !important;
}
#calcBtn:hover, #upBtn:hover, #downBtn:hover { background: #0f8f95 !important; border-color: #0f8f95 !important; color: #fff !important; }
#calcBtn i, #upBtn i, #downBtn i { color: inherit !important; }

/* ---------- notification bell (modules/phreepos/includes/cpos_notify_bell.php) ---------- */
#cnBell .cn-btn {
    background: #fff !important; border: 1px solid #e5e7eb !important;
    -webkit-box-shadow: 0 6px 18px rgba(16,24,40,.15) !important; box-shadow: 0 6px 18px rgba(16,24,40,.15) !important;
}
#cnBell .cn-btn:hover { background: #effafa !important; border-color: #0f8f95 !important; }
#cnBell .cn-btn svg { stroke: #0b5f63 !important; }
#cnBell .cn-badge { background: #dc2626 !important; color: #fff !important; border: 2px solid #fff !important; }
#cnBell .cn-panel { border-radius: 12px; -webkit-box-shadow: 0 16px 40px rgba(16,24,40,.18); box-shadow: 0 16px 40px rgba(16,24,40,.18); }
#cnBell .cn-head a { color: #0f8f95 !important; }

/* ---------- quick icons box (top left of the home page) ---------- */
.cpos-quick {
    float: left; clear: none;
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    margin: 10px 10px 6px 0; padding: 6px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    -webkit-box-shadow: 0 1px 3px rgba(16,24,40,.08); box-shadow: 0 1px 3px rgba(16,24,40,.08);
    white-space: nowrap;
}
.cpos-quick-item {
    display: inline-block; width: 46px; height: 46px; margin: 0 2px;
    border-radius: 10px; text-align: center; line-height: 46px;
    color: #475569; cursor: pointer;
    -webkit-transition: background .12s, color .12s; transition: background .12s, color .12s;
}
.cpos-quick-item:hover { background: #effafa; color: #0f8f95; }
.cpos-quick-item i, .cpos-quick-item .fa, .cpos-quick-item [class*="fa-"] {
    font-size: 24px !important; line-height: 46px !important; color: inherit !important;
    width: auto !important; height: auto !important; margin: 0 !important; vertical-align: middle;
}
.cpos-quick-item img { max-width: 30px; max-height: 30px; vertical-align: middle; }
@media screen and (max-width: 800px) { .cpos-quick { display: none; } }
.cpos-quick-item:empty { display: none; }

/* ---------- admin menu (#mySidenav, opened by the settings icon) ---------- */
#mySidenav {
    top: 78px !important; left: 12px !important; right: auto !important;
    width: 250px !important; max-width: 86vw; height: auto !important; max-height: 80vh;
    padding: 8px !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important;
    background: #fff !important; color: #1f2937 !important;
    -webkit-box-shadow: 0 16px 40px rgba(16,24,40,.18) !important; box-shadow: 0 16px 40px rgba(16,24,40,.18) !important;
    direction: rtl; text-align: right;
}
#mySidenav table { width: 100%; border-collapse: collapse; }
#mySidenav td, #mySidenav tr { border: 0 !important; width: auto !important; padding: 0 !important; background: none !important; }
#mySidenav button, #mySidenav input[type="button"], #mySidenav a {
    display: block; width: 100%; margin: 1px 0; padding: 9px 12px;
    border: 0 !important; border-radius: 9px; background: none !important; color: #1f2937 !important;
    -webkit-box-shadow: none !important; box-shadow: none !important;
    font: normal 14px Tahoma, Arial, sans-serif; text-align: right; cursor: pointer; text-decoration: none;
}
#mySidenav button:hover, #mySidenav input[type="button"]:hover, #mySidenav a:hover { background: #effafa !important; color: #0b5f63 !important; }
#mySidenav img, #mySidenav i { vertical-align: middle; margin-left: 8px; float: right; }

/* =====================================================================
   SHARED PARTS (moved here from the POS css - used on several pages)
   ===================================================================== */
/* pop-up window header: fast items, tables, payment ... */
.fast-head {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: space-between; justify-content: space-between;
    padding: 14px 20px; background: #fff; border-bottom: 1px solid #eef0f3;
}
.fast-title { font: bold 20px Tahoma, Arial, sans-serif; color: #0b5f63; }
.fast-close {
    width: 36px; height: 36px; line-height: 34px; text-align: center;
    border-radius: 10px; background: #f1f5f9; color: #334155;
    font-size: 24px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.fast-close:hover { background: #e2e8f0; color: #0b5f63; }

/* side company / encrypt button (home page + POS) */
.side-button-container {
    position: fixed; top: 50%; left: 0; z-index: 999;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
}
.side-button-container > * + * { margin-top: 10px; }
.encrypt-btn, .decrypt-btn {
    -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
    padding: 14px 9px; border: 0; border-radius: 10px 0 0 10px;
    font: bold 13px Tahoma, Arial, sans-serif; cursor: pointer; min-height: 0;
    -webkit-box-shadow: 0 4px 14px rgba(16,24,40,.18); box-shadow: 0 4px 14px rgba(16,24,40,.18);
}
.encrypt-btn { background: #0f8f95; color: #fff; }
.encrypt-btn:hover { background: #0b7c81; color: #fff; }
.decrypt-btn { background: #effafa; color: #0b5f63; }

/* =====================================================================
   POS SCREEN (module=phreepos&page=main): undo the general rules that
   would move its fixed layout. Needs the body class from template_index.php
   ===================================================================== */
body.cpos-mod-phreepos.cpos-page-main h1, body.cpos-mod-phreepos.cpos-page-main h2, body.cpos-mod-phreepos.cpos-page-main h3, body.cpos-mod-phreepos.cpos-page-main h4, body.cpos-mod-phreepos.cpos-page-main h5, body.cpos-mod-phreepos.cpos-page-main h6 {
    border: 0; padding: 0; text-align: inherit; font-variant: normal; }
body.cpos-mod-phreepos.cpos-page-main fieldset { background: transparent; border-radius: 0; margin: 0; }
body.cpos-mod-phreepos.cpos-page-main fieldset:not([id]) { border: 0; padding: 0; }
body.cpos-mod-phreepos.cpos-page-main input, body.cpos-mod-phreepos.cpos-page-main select { min-height: 0; margin: 0; }
body.cpos-mod-phreepos.cpos-page-main .talbor { margin: 0; padding: 2px 10px; border-radius: 0 0 14px 14px; }
body.cpos-mod-phreepos.cpos-page-main .talbor > div { padding: 2px 6px; }
body.cpos-mod-phreepos.cpos-page-main .talbor > div > div { margin-top: 1px; }

/* ---------- phone bottom toolbar: all icons on one line on narrow phones (S24 Ultra ~384px) ---------- */
.talbor_fixed {
    display: -webkit-flex !important; display: flex !important;
    -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: space-around; justify-content: space-around;
    -webkit-align-items: flex-end; align-items: flex-end;
    padding: 6px 4px !important; text-align: center;
}
.talbor_fixed > div, .talbor_fixed .toolbar-icon-wrapper {
    -webkit-flex: 1 1 0%; flex: 1 1 0%; min-width: 0;
    margin: 0 2px !important; padding: 4px 2px; border-radius: 10px;
}
.talbor_fixed .toolbar-icon-label, .talbor_fixed > div > div {
    font-size: 11px !important; white-space: normal; line-height: 1.25; word-wrap: break-word;
}
.talbor_fixed img, .talbor_fixed i { max-width: 32px; max-height: 32px; }
.talbor_fixed i { font-size: 26px !important; }

/* ---------- chart pictures in the home boxes (PHPGraphLib pages): fill the box width ---------- */
.dash-box img[src*="popup_setup"], .dash-box img[src*="page=chart"] {
    display: block; width: 100% !important; max-width: 100%; height: auto !important;
    margin: 0 auto; border-radius: 10px;
}

/* =====================================================================
   PICKERS: popup lists to choose a contact or an item
   (contacts/popup_accts, inventory/popup_inv) - classes pk-*
   ===================================================================== */
.pk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 8px; }
.pk-bar .pk-filter { flex: 1 1 220px; max-width: 360px; }
.pk-bar label { white-space: nowrap; cursor: pointer; }
.pk-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin: 6px 0; }
.pk-hint { color: #64748b; font-size: 12px; }
table.pk-table { width: 100%; border-collapse: collapse; }
table.pk-table tbody tr { cursor: pointer; }
table.pk-table tbody tr:hover td { background: #effafa; }
table.pk-table tbody tr.pk-sel td { background: #0f8f95 !important; color: #fff !important; }
table.pk-table tbody tr.pk-inactive td:first-child { background: #ffe4ea; }
table.pk-table td.pk-strong { font-weight: bold; white-space: nowrap; }
table.pk-table td.pk-num { text-align: center; white-space: nowrap; }
table.pk-table .pk-sub { display: block; color: #64748b; font-size: 12px; font-weight: normal; }
table.pk-table tr.pk-sel .pk-sub { color: #e0f7f7; }
table.pk-table select { max-width: 100%; }
table.pk-table img.pk-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-left: 6px; }
@media only screen and (max-width: 768px) {
    .pk-bar .pk-filter { max-width: none; }
    .pk-bar label { white-space: normal; }
    .pk-hint { display: none; }
    /* each row becomes a card: tap it to choose */
    table.pk-table thead { display: none; }
    table.pk-table, table.pk-table tbody, table.pk-table tr, table.pk-table td { display: block; width: 100%; box-sizing: border-box; }
    table.pk-table tbody tr { margin: 0 0 8px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
    table.pk-table td { border: 0 !important; padding: 2px 0 !important; background: none !important; }
    table.pk-table td:empty { display: none; }
    table.pk-table td[data-label] { display: flex; justify-content: space-between; gap: 10px; text-align: start; }
    table.pk-table td[data-label]::before { content: attr(data-label); color: #64748b; font-size: 12px; font-weight: bold; }
    table.pk-table td.pk-strong { font-size: 16px; }
    table.pk-table tbody tr.pk-inactive { border-color: #f5b5c4; background: #fff5f7; }
    table.pk-table tbody tr.pk-sel { background: #0f8f95; border-color: #0f8f95; }
    table.pk-table tbody tr.pk-sel td[data-label]::before { color: #e0f7f7; }
}

/* =====================================================================
   HOME: quick links box (phreeform/dashboards/main_links.php) - classes ql-*
   ===================================================================== */
.ql-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px; padding: 6px 2px;
}
.ql-item { position: relative; }
.ql-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 108px; height: 100%; padding: 12px 8px; box-sizing: border-box;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    color: #1f2937 !important; text-decoration: none !important; text-align: center;
    -webkit-box-shadow: 0 1px 2px rgba(16,24,40,.05); box-shadow: 0 1px 2px rgba(16,24,40,.05);
    -webkit-transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
    transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.ql-tile:hover, .ql-tile:focus {
    border-color: #0f8f95; background: #effafa; outline: 0;
    -webkit-transform: translateY(-2px); transform: translateY(-2px);
    -webkit-box-shadow: 0 6px 16px rgba(15,143,149,.15); box-shadow: 0 6px 16px rgba(15,143,149,.15);
}
.ql-tile:active { -webkit-transform: none; transform: none; }
.ql-ico {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px; background: #f1f9f9;
}
.ql-ico img { max-width: 40px; max-height: 40px; }
.ql-txt { font: bold 13px Tahoma, Arial, sans-serif; line-height: 1.35; color: inherit; word-wrap: break-word; }
/* edit mode: remove / move icons in the tile corners */
.ql-rm, .ql-drag { position: absolute; top: 6px; z-index: 2; line-height: 0; }
.ql-rm { right: 6px; }
.ql-drag { left: 6px; }
@media only screen and (max-width: 768px) {
    .ql-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
    .ql-tile { min-height: 94px; padding: 10px 6px; border-radius: 12px; gap: 6px; }
    .ql-ico { width: 46px; height: 46px; border-radius: 12px; }
    .ql-ico img { max-width: 34px; max-height: 34px; }
    .ql-txt { font-size: 12px; }
}

/* =====================================================================
   CALCULATOR (F6 / calculator button) - #calcModal in includes/template_index.php
   ===================================================================== */
#calcModal {
    display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10030;
    background: rgba(15,23,42,.35);
}
#calcModal .calc-box {
    position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
    width: 300px; max-width: 92vw; padding: 14px; box-sizing: border-box;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
    -webkit-box-shadow: 0 20px 50px rgba(16,24,40,.25); box-shadow: 0 20px 50px rgba(16,24,40,.25);
    font-family: Tahoma, Arial, sans-serif; text-align: left;
}
#calcModal .calc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
#calcModal .calc-title { flex: 1; color: #0f8f95; font-size: 18px; }
#calcModal .calc-tool {
    width: 34px; height: 34px; min-height: 0; padding: 0; margin: 0;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; color: #475569;
    font-size: 15px; line-height: 32px; -webkit-box-shadow: none; box-shadow: none; cursor: pointer;
}
#calcModal .calc-tool:hover { border-color: #0f8f95; color: #0f8f95; background: #effafa; }
#calcModal .calc-display {
    display: block; width: 100%; height: 58px; min-height: 0; margin: 0 0 12px; padding: 0 14px;
    box-sizing: border-box; direction: ltr; text-align: right;
    font: bold 28px Tahoma, Arial, sans-serif; color: #0f172a;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px;
}
#calcModal .calc-display:focus { border-color: #0f8f95; background: #fff; }
#calcModal .calc-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#calcModal .calc-buttons button {
    height: 52px; min-height: 0; margin: 0; padding: 0;
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #1f2937;
    font: bold 20px Tahoma, Arial, sans-serif; cursor: pointer;
    -webkit-box-shadow: 0 1px 2px rgba(16,24,40,.06); box-shadow: 0 1px 2px rgba(16,24,40,.06);
    -webkit-transition: background .1s, transform .05s; transition: background .1s, transform .05s;
    -webkit-user-select: none; user-select: none;
}
#calcModal .calc-buttons button:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1f2937; }
#calcModal .calc-buttons button:active { -webkit-transform: scale(.96); transform: scale(.96); }
#calcModal .calc-buttons .calc-fn { background: #f1f5f9; color: #475569; font-size: 17px; }
#calcModal .calc-buttons .calc-op { background: #effafa; color: #0b5f63; border-color: #c8ecee; }
#calcModal .calc-buttons .calc-op:hover { background: #dff3f4; color: #0b5f63; }
#calcModal .calc-buttons .calc-eq { background: #0f8f95; color: #fff; border-color: #0f8f95; }
#calcModal .calc-buttons .calc-eq:hover { background: #0b7c81; color: #fff; }
#calcModal .calc-buttons .calc-zero { grid-column: span 2; }
#calcModal .calc-hint { margin-top: 10px; text-align: center; color: #94a3b8; font-size: 11px; }
@media only screen and (max-width: 768px) {
    #calcModal .calc-buttons button { height: 58px; }
    #calcModal .calc-hint { display: none; }
}

/* calculator button: its place on the screen (the look is in the round-buttons rule above).
   Replaces the old #calcBtn rule - remove that one from the other stylesheet. */
#calcBtn {
    position: fixed; left: 20px; top: 60px;   /* top-left corner, under the toolbar line */
    z-index: 900;                              /* above the page, below popups (10000+) and the menu */
    -webkit-transition: background .2s, color .2s, -webkit-transform .15s; transition: background .2s, color .2s, transform .15s;
}
#calcBtn:active { -webkit-transform: scale(.94); transform: scale(.94); }
body.cpos-popup-open #calcBtn { display: none; }   /* hidden while a popup window is open */
@media only screen and (max-width: 768px) {
    #calcBtn { top: auto; bottom: 20px; left: 16px; }   /* phones: bottom corner, easy to reach */
}

/* ---- calculator: keep the layout even if an older stylesheet (loaded later) has
        rules for #calcBtn / .calc-box / .calc-buttons ---- */
#calcBtn { position: fixed !important; left: 20px !important; right: auto !important; top: 156px !important; bottom: auto !important;
           z-index: 900 !important; float: none !important; margin: 0 !important; }
@media only screen and (max-width: 768px) {
    #calcBtn { top: auto !important; bottom: 74px !important; left: 16px !important; display: block !important; }   /* above the ↑ button (bottom-left) */
}
#calcModal .calc-box { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
                       margin: 0 !important; width: 300px !important; max-width: 92vw !important; height: auto !important; float: none !important;
                       -webkit-transform: translate(-50%,-50%) !important; transform: translate(-50%,-50%) !important; }
#calcModal .calc-head { display: flex !important; }
#calcModal .calc-display { width: 100% !important; float: none !important; }
#calcModal .calc-buttons { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important;
                           width: auto !important; float: none !important; }
#calcModal .calc-buttons button { width: auto !important; min-width: 0 !important; float: none !important; margin: 0 !important;
                                  display: block !important; }
#calcModal .calc-buttons .calc-zero { grid-column: span 2 !important; }
#calcModal .calc-buttons br { display: none; }
body.cpos-popup-open #calcBtn { display: none !important; }

/* a page shown inside a popup window (iframe): no ☰ menu, no alert bell
   (html gets the cpos-in-frame class from includes/template_index.php) */
html.cpos-in-frame #cpos_menu_btn, html.cpos-in-frame #cpos_side,
html.cpos-in-frame #cpos_menu_shade, html.cpos-in-frame #cnBell { display: none !important; }
html.cpos-in-frame body.cpos-btn-float { padding-top: 0 !important; }

/* a page is open inside a frame of this page (mainFrame ...): hide this page's ☰ and bell
   (the framed page adds cpos-frame-open here, see includes/template_index.php) */
body.cpos-frame-open #cpos_menu_btn, body.cpos-frame-open #cnBell { display: none !important; }

/* popup window (#iforder-wrapper): move by the top bar, resize by the corner - also with a finger */
#iforder-titlebar, #iforder-resizer { -ms-touch-action: none; touch-action: none; }   /* the finger moves the window, not the page */
@media only screen and (max-width: 768px) {
    #iforder-titlebar { height: 24px !important; }                          /* thicker bar, easy to grab */
    #iforder-titlebar span { font-size: 16px !important; color: rgba(255,255,255,.8) !important; }
    #iforder { height: calc(100% - 24px) !important; }
    #iforder-overlay { top: 24px !important; height: calc(100% - 24px) !important; }
    #iforder-resizer { width: 32px !important; height: 32px !important; }   /* bigger corner handle */
}

/* =====================================================================
   STOCK BALANCE / ITEM HISTORY (phreebooks page stock_balance) - classes sb-*
   ===================================================================== */
.sb-filters { margin: 6px auto 10px; border-collapse: collapse; min-width: 560px; }
.sb-filters td { padding: 6px 10px; vertical-align: bottom; width: 50%; }
.sb-filters .sb-lbl { display: block; font-weight: bold; font-size: 12px; white-space: nowrap; margin-bottom: 2px; }
.sb-filters .sb-chk { font-weight: normal; margin-inline-start: 8px; }
.sb-filters select, .sb-filters input[type="text"], .sb-filters input[list] { width: 100%; box-sizing: border-box; }
.sb-filters .sb-act { text-align: center; vertical-align: middle; white-space: nowrap; }
/* item: barcode icon right next to the item box */
.sb-filters .sb-inline { display: flex; align-items: center; gap: 6px; }
.sb-filters .sb-inline > img, .sb-filters .sb-inline > i {
    flex: 0 0 auto; margin: 0 !important; float: none !important; position: static !important; cursor: pointer;
}
.sb-filters .sb-inline > input, .sb-filters .sb-inline > select { flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0; }
/* from / to: one per line */
.sb-filters .sb-dline { display: flex; align-items: center; gap: 6px; }
.sb-filters .sb-dline + .sb-dline { margin-top: 4px; }
.sb-filters .sb-dlbl { font-weight: bold; font-size: 12px; min-width: 28px; }
.sb-filters .sb-dline input { flex: 1 1 auto; width: auto !important; min-width: 0; }
.sb-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sb-scroll #myTable { width: 100%; }
.sb-imei { white-space: pre-wrap; margin: 6px 0; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; color: #1f2937; }
.sb-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px; justify-content: flex-end; }
.sb-summary span { white-space: nowrap; }
@media only screen and (max-width: 768px) {
    .sb-title { font-size: 1.15em; margin: 8px 0; }
    .sb-filters { width: 100% !important; min-width: 0; table-layout: fixed; }
    .sb-filters td { padding: 4px 5px; }
    .sb-filters .sb-lbl { white-space: normal; }
    .sb-filters .sb-chk { display: block; margin: 0; }
    .sb-filters select, .sb-filters input[type="text"], .sb-filters input[list] { font-size: 16px; }
    .sb-filters .sb-inline > img { width: 28px; height: 28px; }
    .sb-pager { height: auto !important; }
    .sb-pager > div { float: none !important; margin: 4px 0; }
    /* results: each row becomes a card */
    .sb-scroll { overflow-x: visible; }
    .sb-scroll #myTable thead { display: none; }
    .sb-scroll #myTable, .sb-scroll #myTable tbody, .sb-scroll #myTable tr, .sb-scroll #myTable td { display: block; width: 100%; box-sizing: border-box; }
    .sb-scroll #myTable tr { border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 10px; padding: 6px 10px; background: #fff !important; }
    .sb-scroll #myTable td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
                             padding: 5px 0 !important; border: 0 !important; border-bottom: 1px solid #f0f2f5 !important; background: none !important; }
    .sb-scroll #myTable td:last-child { border-bottom: 0 !important; }
    .sb-scroll #myTable td::before { content: attr(data-label); font-weight: bold; color: #64748b; flex: 0 0 auto; }
    .sb-scroll #myTable td[data-label=""]::before { content: none; }
    .sb-scroll #myTable td .sb-val { text-align: end; word-break: break-word; }
    .sb-summary { justify-content: flex-start; }
    .sb-summary span { flex: 1 1 45%; white-space: normal; }
}