/*
 * UI theme, part 3: one button system (size, shape, colours), checkboxes, and screens that carried
 * fixed colours (contact page headers, boxes with black inline borders).
 * Loaded after the theme + pos-theme files; works with Cyber and Soft, light and dark.
 */

/* ---------- Page background: nothing outside the layout shows the old white ---------- */
html.tw-bg-white, html { background-color: var(--cy-bg) !important; }

/* ---------- Buttons: same height, shape and colour logic everywhere ---------- */
html[data-style="soft"] { --cy-btn-radius: 999px; }
html[data-style="cyber"] { --cy-btn-radius: 12px; }

.tw-dw-btn, .btn, button.btn, a.btn {
    --cy-btn-h: 38px;
    min-height: var(--cy-btn-h); height: auto; padding: 0 18px; border-radius: var(--cy-btn-radius, 12px) !important;
    font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; vertical-align: middle;
}
.tw-dw-btn-lg, .btn-lg { --cy-btn-h: 46px; font-size: 15px; padding: 0 24px; }
.tw-dw-btn-sm, .btn-sm { --cy-btn-h: 34px; font-size: 13px; padding: 0 14px; }
.tw-dw-btn-xs, .btn-xs { --cy-btn-h: 30px; font-size: 12px; padding: 0 12px; }
.btn.btn-block, .tw-dw-btn-block { display: flex; width: 100%; }
.btn .caret, .tw-dw-btn .caret { margin-left: 2px; }
.btn-group > .btn, .btn-group > .tw-dw-btn { border-radius: var(--cy-btn-radius, 12px) !important; }
.btn-group > .btn:not(:first-child), .btn-group > .tw-dw-btn:not(:first-child) { margin-left: 6px; }

/* Outline buttons become soft tinted pills: coloured text, light tint, thin matching border */
.tw-dw-btn-outline { background-color: var(--cy-surface-2) !important; border: 1px solid var(--cy-border) !important; color: var(--cy-text) !important; }
.tw-dw-btn-outline:hover { background-color: var(--cy-border) !important; }
.tw-dw-btn-outline.tw-dw-btn-info, .tw-dw-btn-outline.tw-dw-btn-accent, .tw-dw-btn-outline.tw-dw-btn-secondary { --cy-tone: var(--cy-blue-t); }
.tw-dw-btn-outline.tw-dw-btn-success { --cy-tone: var(--cy-green-t); }
.tw-dw-btn-outline.tw-dw-btn-error, .tw-dw-btn-outline.tw-dw-btn-danger { --cy-tone: var(--cy-red-t); }
.tw-dw-btn-outline.tw-dw-btn-warning { --cy-tone: var(--cy-orange-t); }
.tw-dw-btn-outline.tw-dw-btn-info, .tw-dw-btn-outline.tw-dw-btn-accent, .tw-dw-btn-outline.tw-dw-btn-secondary,
.tw-dw-btn-outline.tw-dw-btn-success, .tw-dw-btn-outline.tw-dw-btn-error, .tw-dw-btn-outline.tw-dw-btn-danger, .tw-dw-btn-outline.tw-dw-btn-warning {
    color: var(--cy-tone) !important;
    background-color: color-mix(in srgb, var(--cy-tone) 11%, transparent) !important;
    border-color: color-mix(in srgb, var(--cy-tone) 32%, transparent) !important;
}
.tw-dw-btn-outline.tw-dw-btn-info:hover, .tw-dw-btn-outline.tw-dw-btn-accent:hover, .tw-dw-btn-outline.tw-dw-btn-secondary:hover,
.tw-dw-btn-outline.tw-dw-btn-success:hover, .tw-dw-btn-outline.tw-dw-btn-error:hover, .tw-dw-btn-outline.tw-dw-btn-danger:hover, .tw-dw-btn-outline.tw-dw-btn-warning:hover {
    background-color: color-mix(in srgb, var(--cy-tone) 22%, transparent) !important;
}
.tw-dw-btn-outline.tw-dw-btn-neutral, .tw-dw-btn-outline.tw-dw-btn-ghost { color: var(--cy-text) !important; background-color: var(--cy-surface-2) !important; border-color: var(--cy-border) !important; }
/* Solid variants share the same shape/size; keep their colour but make text readable */
.tw-dw-btn-success:not(.tw-dw-btn-outline), .tw-dw-btn-info:not(.tw-dw-btn-outline), .tw-dw-btn-warning:not(.tw-dw-btn-outline), .tw-dw-btn-error:not(.tw-dw-btn-outline) { border: 0 !important; }

/* Checkboxes and radios follow the accent colour */
input[type="checkbox"], input[type="radio"] { accent-color: var(--cy-accent); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }

/* ---------- Contact page (customer / supplier) and statements ---------- */
tr.blue-heading, tr.blue-heading th, tr.blue-heading td, thead tr.blue-heading th {
    background: var(--cy-surface-2) !important; color: var(--cy-muted) !important; border-bottom: 1px solid var(--cy-border) !important; font-weight: 500; font-size: 13px;
}
h3.blue-heading, p.blue-heading, .blue-heading.p-4, div.blue-heading {
    background: var(--cy-nav) !important; color: #fff !important; border: 0 !important;
    border-radius: var(--cy-radius-sm, 12px) var(--cy-radius-sm, 12px) 0 0; margin-bottom: 0;
}
[style*="border: 1px solid #000"], [style*="border:1px solid #000"] {
    border: 1px solid var(--cy-border) !important; border-radius: 0 0 var(--cy-radius-sm, 12px) var(--cy-radius-sm, 12px); background: var(--cy-surface);
}
.contact_view_tab .nav-tabs > li > a i, .nav-tabs-custom > .nav-tabs > li > a i { color: inherit !important; }

/* Primary / gradient "Add" buttons share the same corner shape as every other button */
.btn-primary, .tw-dw-btn-primary, .tw-dw-btn.tw-dw-btn-primary, a[class*="tw-from-indigo"], button[class*="tw-from-indigo"], .tw-dw-btn[class*="tw-from-"], .pos-express-finalize, button.pos-finalize { border-radius: var(--cy-btn-radius, 12px) !important; }

/* Filter panels: always shown open, with the theme's accent instead of the old blue bar */
.pf-btn { border-radius: var(--cy-radius-sm, 12px); }
.pf-open .pf-btn::before { background: var(--cy-accent) !important; }

/* Plain <small> labels (e.g. "Customer" on the contact page) follow the muted text colour */
section.content small:not([class]), .content small:not([class]) { color: var(--cy-muted); }

/* Product price tables (Add / Edit product: single price row, variation tables): theme header instead of the old green / blue bar,
   and wide enough for the amounts */
.add-product-price-table, .blue-header { border-color: var(--cy-border) !important; border-radius: var(--cy-radius-sm, 12px); overflow: hidden; }
.add-product-price-table > thead > tr > th, .add-product-price-table > tbody > tr > th, .add-product-price-table th, .table-th-green th,
.blue-header > thead > tr > th, .blue-header th, table.blue-header th {
    background: var(--cy-surface-2) !important; color: var(--cy-text) !important; border-color: var(--cy-border) !important;
    font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .01em; padding: 11px 14px !important; vertical-align: middle;
}
.add-product-price-table td, .blue-header td { border-color: var(--cy-border) !important; background: transparent !important; padding: 14px !important; vertical-align: top; }
.add-product-price-table td:first-child { min-width: 340px; }
.add-product-price-table td .col-sm-6 { padding-left: 6px; padding-right: 6px; min-width: 150px; }
.add-product-price-table td label { font-weight: 500; color: var(--cy-muted); font-size: 12px; margin-bottom: 4px; }
.add-product-price-table input.form-control, .add-product-price-table .input-sm { min-width: 130px; text-align: right; }
.add-product-price-table input[type="file"] { max-width: 220px; }
.add-product-price-table .help-block, .add-product-price-table small { color: var(--cy-muted); }

/* Products list: the image is a small fixed column and the title gets room for two lines (the image column used to take the width of the screen) */
#product_table th.cy-col-image, #product_table td:nth-child(2) { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding-left: 8px; padding-right: 8px; }
#product_table td:nth-child(2) img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
#product_table td:nth-child(4) { min-width: 280px; max-width: 460px; }
#product_table .cy-prod-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; font-weight: 600; }