/* =========================================================================
   Zyra ERP brand theme overrides
   Loaded last so it wins the cascade over tailwind/app.css, vendor.css,
   and app.css without needing to touch any existing blade templates.
   Re-colors the app's default "primary" theme (used by header, sidebar,
   and buttons whenever a business hasn't explicitly chosen a different
   theme color) to the Zyra ERP navy / blue / green brand palette, and
   makes standard tables more compact.
   ========================================================================= */

:root {
    --zyra-navy-dark: #0d1526;
    --zyra-navy: #16213e;
    --zyra-blue: #2f6fe4;
    --zyra-blue-light: #4f8ef7;
    --zyra-green: #6fbe44;
    --zyra-green-dark: #4c9a2a;
}

/* ---- Tailwind "primary" theme tokens (header top bar, sidebar top box,
   buttons and highlights that use tw-bg-primary-*, tw-from-primary-*,
   tw-to-primary-*, tw-text-primary-*, tw-border-primary-*) ---- */
.tw-bg-primary-800 {
    background-color: var(--zyra-navy) !important;
}

.tw-from-primary-800 {
    --tw-gradient-from: var(--zyra-navy) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(22, 33, 62, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.tw-to-primary-900 {
    --tw-gradient-to: var(--zyra-navy-dark) var(--tw-gradient-to-position) !important;
}

.tw-text-primary-700 {
    color: var(--zyra-blue) !important;
}

.tw-text-primary-800 {
    color: var(--zyra-navy) !important;
}

.tw-border-primary-500\/30 {
    border-color: rgba(47, 111, 228, .3) !important;
}

.hover\:tw-bg-primary-700:hover {
    background-color: var(--zyra-blue) !important;
}

.hover\:tw-bg-primary-50:hover {
    background-color: #eaf1fd !important;
}

/* ---- Default link color everywhere (low specificity on purpose so any
   more specific existing styling, e.g. tw-text-white on dark headers,
   keeps working exactly as before) ---- */
a {
    color: var(--zyra-blue);
}

a:hover,
a:focus {
    color: var(--zyra-green-dark);
}

/* =========================================================================
   Compact tables: reduce row padding/height app-wide
   ========================================================================= */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td {
    padding: 5px 8px !important;
    line-height: 1.3 !important;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding: 6px 8px !important;
}

/* =========================================================================
   Modern buttons — pill shape, brand gradient fill
   ========================================================================= */
.btn,
.tw-dw-btn {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .01em;
    border-width: 0 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, background-image .15s ease, color .15s ease;
}

.btn:hover,
.tw-dw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .16);
}

.btn:active,
.btn.active,
.tw-dw-btn:active,
.tw-dw-btn.tw-dw-btn-active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.btn-primary,
.tw-dw-btn-primary {
    color: #fff !important;
    background: linear-gradient(90deg, var(--zyra-blue) 0%, var(--zyra-green) 100%) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.tw-dw-btn-primary:hover {
    color: #fff !important;
    background: linear-gradient(90deg, var(--zyra-navy) 0%, var(--zyra-green-dark) 100%) !important;
}

.btn-default {
    color: #344054;
    background-color: #fff !important;
    border: 1px solid #d0d5dd !important;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #f9fafb !important;
    border-color: #98a2b3 !important;
    color: #1d2939;
}

.btn-danger {
    background: linear-gradient(90deg, #e0483e 0%, #b8261a 100%) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(90deg, var(--zyra-green) 0%, var(--zyra-green-dark) 100%) !important;
    color: #fff !important;
}

/* Compact icon/action buttons (xs/sm) keep the pill shape but stay tight */
.btn-xs, .btn-sm, .tw-dw-btn-xs, .tw-dw-btn-sm {
    border-radius: 999px !important;
}

/* =========================================================================
   Modern form inputs — softer rounding, brand-color focus glow
   ========================================================================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea.form-control {
    border-radius: 12px !important;
    border: 1.5px solid #dde3ec !important;
    box-shadow: none !important;
    background-color: #fbfcfe;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:focus {
    border-color: var(--zyra-blue) !important;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 228, .14) !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 12px !important;
    border: 1.5px solid #dde3ec !important;
    background-color: #fbfcfe;
    height: 36px !important;
}

.select2-container--default .select2-selection--multiple {
    border-radius: 12px !important;
    border: 1.5px solid #dde3ec !important;
    background-color: #fbfcfe;
    min-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 12px !important;
    padding-right: 28px !important;
    color: var(--text, #16213e);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: 34px !important;
    color: #98a2b3;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    top: 0 !important;
    right: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 3px 8px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--zyra-blue) !important;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 228, .14);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--zyra-blue) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 999px !important;
    background-color: #eaf1fd !important;
    border: 1px solid rgba(47, 111, 228, .3) !important;
    color: var(--zyra-navy) !important;
    padding: 1px 10px !important;
    margin-top: 4px !important;
}


/* =========================================================================
   Input-group cohesion fix
   The pill-shaped buttons and larger-radius inputs above are great on
   their own, but they broke Bootstrap's native input-group corner-joining
   (customer select + add button, search icon, qty +/- steppers, date +
   calendar icon, etc. all rendered as separate floating chips instead of
   one joined control). This restores a single seamless grouped look.
   ========================================================================= */
.input-group {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    background-color: #fbfcfe;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn > .btn,
.input-group .select2-container--default .select2-selection--single,
.input-group .select2-container--default .select2-selection--multiple {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-color: #dde3ec !important;
}

.input-group-addon {
    background-color: #f2f5fb;
    border: none;
    border-right: 1px solid #e4e9f2 !important;
    color: var(--zyra-navy);
}

.input-group-btn > .btn,
.input-group .btn {
    border-radius: 0 !important;
}

.input-group-btn > .btn:hover,
.input-group .btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Note: we deliberately do NOT touch .select2-container's own display/width
   here — Select2 sizes and positions that itself via inline styles, and
   overriding it breaks the dropdown (shows as a blank/oversized box).
   Only the visible inner selection box is restyled below, via the rule
   already declared above (border-radius / border-color reset). */

/* =========================================================================
   POS screen: more compact cart table so more line items are visible
   before needing to scroll
   ========================================================================= */
.pos_product_div {
    height: 55vh !important;
}

#pos_table > thead > tr > th {
    padding: 5px 6px !important;
}

#pos_table > tbody > tr > td {
    padding: 3px 6px !important;
    vertical-align: middle !important;
}

#pos_table .form-control {
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 8px !important;
}

#pos_table .input-group.input-number .btn {
    padding: 2px 8px !important;
    height: 30px !important;
}

#pos_table .product_row td {
    font-size: 12.5px;
}

/* The product thumbnail is inline-styled at 50px + 5px top margin in the
   markup — that alone forces every row to ~60px tall regardless of cell
   padding. Overriding with !important shrinks it so rows stay compact. */
#pos_table .product_row img {
    width: 26px !important;
    height: 26px !important;
    margin-top: 0 !important;
    margin-left: 6px !important;
    border-radius: 4px !important;
    vertical-align: middle;
}

#pos_table .product_row {
    line-height: 1.2;
}

#pos_table .product_row td > div {
    margin: 0 !important;
}

/* =========================================================================
   POS toolbar refresh — labels, spacing, and select2 placeholder polish
   for the customer / search / date / discount row above the cart table
   ========================================================================= */
.box-body:has(.pos_product_div) .form-group {
    margin-bottom: 10px;
}

.box-body:has(.pos_product_div) .form-group label {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
    color: #5b6577;
}

.input-group-addon i,
.input-group .btn i {
    color: var(--zyra-blue);
}

/* =========================================================================
   Real POS product-suggestion panel (sale_pos/partials/pos_sidebar.blade.php
   and featured_products.blade.php) — brand the category/brand toggle
   buttons and the actual product tiles used in the live grid.
   ========================================================================= */
#product_category_div .tw-from-indigo-600,
#product_brand_div .tw-from-indigo-600,
#product_category_div .hover\:tw-from-indigo-600:hover,
#product_brand_div .hover\:tw-from-indigo-600:hover {
    --tw-gradient-from: var(--zyra-blue) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(47, 111, 228, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

#product_category_div .tw-to-blue-500,
#product_brand_div .tw-to-blue-500,
#product_category_div .hover\:tw-to-blue-600:hover,
#product_brand_div .hover\:tw-to-blue-600:hover {
    --tw-gradient-to: var(--zyra-green) var(--tw-gradient-to-position) !important;
}

.main-category .tw-dw-card,
.product_category .tw-dw-card {
    border-color: var(--border) !important;
}

.main-category .tw-dw-card:hover,
.product_category .tw-dw-card:hover {
    border-color: var(--zyra-blue) !important;
}

/* Real product tiles shown in the live "featured products" grid */
.product_box {
    border: 1.5px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .12s ease, box-shadow .12s ease, border-color .15s ease;
}

.product_box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 24, 40, .1);
    border-color: var(--zyra-blue-light);
}

.product_box .text {
    color: var(--zyra-navy);
}

/* =========================================================================
   Modern sidebar menu (scoped to the sidebar container only, so generic
   utility classes like tw-bg-gray-200 are untouched everywhere else)
   ========================================================================= */
#side-bar a {
    border-radius: 8px !important;
}

#side-bar a:hover {
    background-color: #f2f5fb !important;
}

#side-bar a.tw-bg-gray-200,
#side-bar > div.tw-bg-gray-200 {
    background: linear-gradient(90deg, rgba(47, 111, 228, .12), rgba(111, 190, 68, .07)) !important;
    position: relative;
}

#side-bar a.tw-bg-gray-200::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--zyra-blue);
}

/* =========================================================================
   Serial/IMEI duplicate warning highlight (opening stock + purchase entry)
   ========================================================================= */
.serial_number_input.has-error-border {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) !important;
}