/*!
 * Dashtrap-style purple skin for Bindu POS.
 *
 * Presentation only. This file is loaded AFTER app.css and overrides nothing
 * but colour, spacing, radius and shadow — no layout is moved, no element is
 * hidden, no behaviour is touched. Delete this one <link> to get the stock
 * look back.
 *
 * It only applies when the business theme colour is set to `purple`
 * (body.skin-purple), so switching the theme in Business Settings still works.
 */

:root {
    /* The whole app is designed light. Without this, DaisyUI's base sets
       color-scheme:dark whenever the operating system is in dark mode, and
       Chrome then paints every *native* control dark — an unticked checkbox
       becomes a filled black square that reads as already ticked. Nothing
       here is a colour of ours; it only tells the browser which way to draw
       the widgets it draws itself. */
    color-scheme: light;

    /* BinduHost brand palette (binduhost.com):
       violet primary, deep purple chrome, pink reserved for highlight pills. */
    --dt-purple-50:  #F5EFFE;
    --dt-purple-100: #EADDFD;
    --dt-purple-300: #C4A2F8;
    --dt-purple-500: #A855F7;
    --dt-purple-600: #8B37F0;
    --dt-purple-700: #7C3AED;
    --dt-purple-800: #3B1063;
    --dt-purple-900: #2A0A4A;

    /* Signature CTA pink — used sparingly, like the site's "Client Login" */
    --dt-pink:      #E23E7C;
    --dt-pink-dark: #C9316A;

    /* Dark chrome for the sidebar, taken from the site header */
    --dt-sidebar:      #2A0A4A;
    --dt-sidebar-deep: #1F0637;
    --dt-sidebar-line: #40195F;
    --dt-sidebar-text: #BCA8D6;
    --dt-sidebar-head: #8368A5;

    /* Surfaces */
    --dt-canvas: #F3F1F6;
    --dt-card:   #FFFFFF;
    --dt-line:   #E8E4EF;
    --dt-ink:    #1B1230;
    --dt-muted:  #6B6484;
}

/* ------------------------------------------------------------------
   Canvas
   ------------------------------------------------------------------ */
body.skin-purple {
    background-color: var(--dt-canvas);
    color: var(--dt-ink);
}

/* ------------------------------------------------------------------
   Sidebar — dark purple, light type
   ------------------------------------------------------------------ */
body.skin-purple aside.side-bar.tw-bg-white {
    background-color: var(--dt-sidebar);
}

/* Logo block sits a shade deeper so it reads as a header */
body.skin-purple .theme-logo-bg {
    background-color: var(--dt-sidebar-deep);
    border-color: var(--dt-sidebar-line);
}

body.skin-purple .side-bar-heading {
    letter-spacing: .01em;
}

/* Every vertical divider inside the sidebar */
body.skin-purple aside.side-bar .tw-border-r,
body.skin-purple aside.side-bar .tw-border-gray-200 {
    border-color: var(--dt-sidebar-line);
}

/* Menu scroll area */
body.skin-purple #side-bar {
    background-color: var(--dt-sidebar);
    border-color: var(--dt-sidebar-line);
    scrollbar-width: thin;
    scrollbar-color: var(--dt-sidebar-line) transparent;
}
body.skin-purple #side-bar::-webkit-scrollbar { width: 6px; }
body.skin-purple #side-bar::-webkit-scrollbar-thumb {
    background: var(--dt-sidebar-line);
    border-radius: 3px;
}

/* Section labels: MENU / CUSTOM / COMPONENTS */
body.skin-purple #side-bar .tw-text-gray-400 {
    color: var(--dt-sidebar-head);
    font-size: 10.5px;
    letter-spacing: .1em;
}

/* Links */
body.skin-purple #side-bar a.theme-sidebar-hover,
body.skin-purple #side-bar a.theme-sidebar-child-hover {
    color: var(--dt-sidebar-text);
}
body.skin-purple #side-bar a svg,
body.skin-purple #side-bar a i {
    color: var(--dt-sidebar-head);
}

/* Hover */
body.skin-purple #side-bar .theme-sidebar-hover:hover,
body.skin-purple #side-bar .theme-sidebar-hover:focus,
body.skin-purple #side-bar .theme-sidebar-hover:active {
    background-color: rgba(255, 255, 255, .07);
    color: #FFFFFF;
}
body.skin-purple #side-bar a:hover svg,
body.skin-purple #side-bar a:hover i {
    color: var(--dt-purple-300);
}

/* Active item: solid purple pill, the way Dashtrap marks the current page.
   The active link also carries .theme-sidebar-hover, so this selector has to
   be at least as specific as the link colour rule above it. */
body.skin-purple #side-bar a.theme-sidebar-active,
body.skin-purple #side-bar .theme-sidebar-active {
    background-color: var(--dt-purple-700);
    color: #FFFFFF;
    box-shadow: 0 2px 8px -2px rgba(124, 58, 237, .75);
}
body.skin-purple #side-bar a.theme-sidebar-active:hover,
body.skin-purple #side-bar a.theme-sidebar-active:focus {
    background-color: var(--dt-purple-600);
    color: #FFFFFF;
}
body.skin-purple #side-bar a.theme-sidebar-active svg,
body.skin-purple #side-bar a.theme-sidebar-active i {
    color: #FFFFFF;
}

/* Sub-menu links and their guide rail */
body.skin-purple #side-bar .theme-sidebar-child-hover:hover,
body.skin-purple #side-bar .theme-sidebar-child-hover:focus {
    color: #FFFFFF;
}
body.skin-purple #side-bar .theme-sidebar-child-active {
    color: var(--dt-purple-300);
    font-weight: 500;
}
body.skin-purple #side-bar .chiled .tw-bg-gray-100 {
    background-color: var(--dt-sidebar-line);
}

/* Menu search box */
body.skin-purple aside.side-bar .tw-bg-gray-100 {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--dt-sidebar-line);
}
body.skin-purple aside.side-bar input#sidebar-search {
    color: #E6E1F5;
}
body.skin-purple aside.side-bar input#sidebar-search::placeholder {
    color: var(--dt-sidebar-head);
}
body.skin-purple aside.side-bar .tw-text-gray-400 svg,
body.skin-purple aside.side-bar svg.tw-text-gray-400 {
    color: var(--dt-sidebar-head);
}

/* ------------------------------------------------------------------
   Top bar — white, like the reference.
   `.theme-header-bg` is used twice: the top navbar (which also carries
   .no-print) and the dashboard welcome banner. Only the navbar goes white;
   the banner keeps a purple ground because its heading is white text.
   Every white control in the navbar sits on a .theme-btn-bg chip, so it
   keeps its contrast against white.
   ------------------------------------------------------------------ */
body.skin-purple .theme-header-bg.no-print {
    background-image: none;
    background-color: var(--dt-card);
    border-bottom: 1px solid var(--dt-line);
    box-shadow: 0 1px 2px rgba(27, 24, 50, .04);
}

/* Welcome banner: richer purple that ties back to the sidebar */
body.skin-purple .theme-header-bg:not(.no-print) {
    background-image: linear-gradient(135deg, var(--dt-purple-800), var(--dt-sidebar));
}

/* Purple chips in the top bar */
body.skin-purple .theme-btn-bg {
    background-color: var(--dt-purple-700);
    box-shadow: 0 1px 2px rgba(27, 24, 50, .08);
}
body.skin-purple .theme-btn-bg:hover {
    background-color: var(--dt-purple-600);
}
body.skin-purple .theme-btn-bg:active,
body.skin-purple .theme-btn-bg:focus,
body.skin-purple .theme-btn-bg:focus-visible {
    background-color: var(--dt-purple-900);
}

/* ------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------ */
body.skin-purple .tw-bg-white.tw-rounded-xl.tw-shadow-sm {
    background-color: var(--dt-card);
    border: 1px solid var(--dt-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 24, 50, .04);
    transition: box-shadow .18s ease, border-color .18s ease;
}
body.skin-purple .tw-bg-white.tw-rounded-xl.tw-shadow-sm:hover {
    box-shadow: 0 6px 20px -8px rgba(43, 27, 84, .18);
    border-color: #D9CFEA;
}

/* Bootstrap panels/boxes that some modules still use */
body.skin-purple .box,
body.skin-purple .panel {
    background-color: var(--dt-card);
    border: 1px solid var(--dt-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 24, 50, .04);
}
body.skin-purple .box > .box-header,
body.skin-purple .panel > .panel-heading {
    border-bottom: 1px solid var(--dt-line);
    background: transparent;
    border-radius: 10px 10px 0 0;
}

/* ------------------------------------------------------------------
   Tables — light header band, quiet rules, purple row hover
   ------------------------------------------------------------------ */
body.skin-purple .table > thead > tr > th {
    background-color: #FAFAFD;
    border-bottom: 1px solid var(--dt-line) !important;
    color: var(--dt-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.skin-purple .table > tbody > tr > td {
    border-top: 1px solid #F1F1F7 !important;
    vertical-align: middle;
}
body.skin-purple .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FCFCFE;
}
body.skin-purple .table-hover > tbody > tr:hover,
body.skin-purple .table > tbody > tr:hover {
    background-color: var(--dt-purple-50);
}
body.skin-purple .table-bordered,
body.skin-purple .table-bordered > tbody > tr > td,
body.skin-purple .table-bordered > thead > tr > th {
    border-color: var(--dt-line) !important;
}

/* DataTables chrome */
body.skin-purple .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.skin-purple .pagination > .active > a,
body.skin-purple .pagination > .active > span {
    background: var(--dt-purple-700) !important;
    border-color: var(--dt-purple-700) !important;
    color: #FFFFFF !important;
}
body.skin-purple .pagination > li > a {
    color: var(--dt-purple-700);
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
body.skin-purple .btn-primary,
body.skin-purple .tw-dw-btn-primary {
    background-color: var(--dt-purple-700);
    border-color: var(--dt-purple-700);
}
body.skin-purple .btn-primary:hover,
body.skin-purple .btn-primary:focus,
body.skin-purple .tw-dw-btn-primary:hover {
    background-color: var(--dt-purple-600);
    border-color: var(--dt-purple-600);
}
body.skin-purple .btn-primary:active,
body.skin-purple .btn-primary.active {
    background-color: var(--dt-purple-900);
    border-color: var(--dt-purple-900);
}
body.skin-purple .btn-info {
    background-color: var(--dt-purple-500);
    border-color: var(--dt-purple-500);
}
body.skin-purple .btn-link {
    color: var(--dt-purple-700);
}
body.skin-purple .btn {
    border-radius: 6px;
}

/* Labels / badges.
   Pink is the brand's highlight colour (the site uses it for "Client Login"
   and "Most popular"), so it is reserved for count pills and highlight tags
   rather than spread across every button. */
body.skin-purple .label-primary {
    background-color: var(--dt-purple-700);
}
body.skin-purple .badge,
body.skin-purple .label-danger,
body.skin-purple #side-bar .label {
    background-color: var(--dt-pink);
}
body.skin-purple .label {
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ------------------------------------------------------------------
   Forms — purple focus ring instead of the default blue
   ------------------------------------------------------------------ */
body.skin-purple .form-control:focus,
body.skin-purple .select2-container--default.select2-container--focus .select2-selection--multiple,
body.skin-purple .select2-container--default .select2-selection--single:focus {
    border-color: var(--dt-purple-300);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
    outline: none;
}
body.skin-purple .form-control {
    border-radius: 6px;
    border-color: #DEDEEA;
}
body.skin-purple .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dt-purple-700);
}
body.skin-purple .select2-container--default .select2-selection--single,
body.skin-purple .select2-container--default .select2-selection--multiple {
    border-radius: 6px;
    border-color: #DEDEEA;
}

/* Links.
   Anything that is itself a coloured chip or button keeps its own text
   colour, otherwise a purple label lands on a purple ground. */
body.skin-purple a.text-link,
body.skin-purple a:not(.btn):not(.label):not([class*="tw-dw-btn"]):not(.theme-btn-bg):not([class*="tw-text-white"]):not(.text-white):not(.list-group-item.active) {
    color: var(--dt-purple-700);
}
body.skin-purple #side-bar a,
body.skin-purple .theme-header-bg a {
    color: inherit;
}
body.skin-purple .theme-btn-bg,
body.skin-purple a.theme-btn-bg,
body.skin-purple a.theme-btn-bg:hover,
body.skin-purple a.theme-btn-bg:focus {
    color: #FFFFFF;
}

/* Tabs */
body.skin-purple .nav-tabs > li.active > a,
body.skin-purple .nav-tabs > li.active > a:hover,
body.skin-purple .nav-tabs > li.active > a:focus {
    border-top-color: var(--dt-purple-700);
    color: var(--dt-purple-700);
}

/* Footer note: the stock grey-500 missed AA on the page ground */
body.skin-purple .tw-mt-auto .tw-text-gray-500 {
    color: #56526F;
}

/* Modals */
body.skin-purple .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(27, 24, 50, .35);
}
body.skin-purple .modal-header {
    border-bottom: 1px solid var(--dt-line);
}
body.skin-purple .modal-footer {
    border-top: 1px solid var(--dt-line);
}

/* ==================================================================
   Stragglers still wearing the stock AdminLTE palette
   ------------------------------------------------------------------
   Three widgets ship their own colours and so survived the earlier
   recolour: select2's multi-select tags (AdminLTE blue), iCheck's
   checkboxes (a blue sprite bitmap) and the .bg-green table headers.
   ================================================================== */

/* ---- select2 multi-select tags ----------------------------------- */
body.skin-purple .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dt-purple-700);
    border-color: #6D28D9;
    color: #fff;
    border-radius: 6px;
    padding: 2px 9px;
    font-weight: 500;
}
body.skin-purple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, .72);
    margin-right: 6px;
}
body.skin-purple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}

/* Highlighted row in an open dropdown */
body.skin-purple .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dt-purple-700);
}

/* ---- iCheck checkboxes and radios -------------------------------- */
/* The skin is a 2013-era sprite bitmap, so it is both off-brand and soft on
   a HiDPI screen. Drawn in CSS instead, keeping iCheck's own 22px box and
   its .checked / .disabled classes so behaviour is untouched. */
body.skin-purple .icheckbox_square-blue,
body.skin-purple .iradio_square-blue {
    position: relative;
    width: 22px;
    height: 22px;
    background-image: none;
    background-color: #fff;
    border: 1.5px solid #C9CFDD;
    border-radius: 6px;
    transition: background-color .15s ease, border-color .15s ease;
}
body.skin-purple .iradio_square-blue {
    border-radius: 50%;
}

body.skin-purple .icheckbox_square-blue.hover,
body.skin-purple .iradio_square-blue.hover {
    border-color: var(--dt-purple-700);
}

body.skin-purple .icheckbox_square-blue.checked,
body.skin-purple .iradio_square-blue.checked {
    background-color: var(--dt-purple-700);
    border-color: var(--dt-purple-700);
}

/* Tick */
body.skin-purple .icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Dot */
body.skin-purple .iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    inset: 4.5px;
    border-radius: 50%;
    background: #fff;
}

body.skin-purple .icheckbox_square-blue.disabled,
body.skin-purple .iradio_square-blue.disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    body.skin-purple .icheckbox_square-blue,
    body.skin-purple .iradio_square-blue { transition: none; }
}

/* ---- Table headers ----------------------------------------------- */
/* Only the header rows carry .bg-green; green stays available anywhere it
   actually means "good". Deep purple here matches the sidebar, so headers
   read as structure rather than as another accent. */
body.skin-purple tr.bg-green,
body.skin-purple tr.bg-green > th,
body.skin-purple tr.bg-green > td {
    background-color: var(--dt-purple-800) !important;
    color: #fff !important;
    border-color: var(--dt-purple-800) !important;
}
body.skin-purple tr.bg-green > th:first-child { border-top-left-radius: 8px; }
body.skin-purple tr.bg-green > th:last-child { border-top-right-radius: 8px; }

/* ---- The product price table --------------------------------------
   Its header is painted by .add-product-price-table th, not .bg-green,
   so it needed its own rule. */
body.skin-purple .add-product-price-table th {
    background-color: var(--dt-purple-800) !important;
    color: #fff !important;
    border-color: var(--dt-purple-800) !important;
}
body.skin-purple .add-product-price-table th:first-child { border-top-left-radius: 8px; }
body.skin-purple .add-product-price-table th:last-child  { border-top-right-radius: 8px; }

/* ==================================================================
   Top bar: trimmed to the controls the shop actually uses
   ------------------------------------------------------------------
   Hidden with CSS rather than deleted, so every route, permission check
   and script binding behind them is left exactly as it was. Delete a
   rule here to bring a control back.
   ================================================================== */
body.skin-purple .header-quick-add,          /* (+) quick-add menu   */
body.skin-purple .header-date,               /* today's date         */
body.skin-purple li.notifications-menu {     /* bell                 */
    display: none !important;
}

/* POS is the button reached for all day, so it leads the row. The bar is
   already a flex container, so ordering it needs no markup change. */
body.skin-purple .header-pos-link {
    order: -1;
}

/* ==================================================================
   Bengali business name
   ------------------------------------------------------------------
   Days One carries no Bengali glyphs, so a Bengali name silently fell
   back to whatever the OS offered (Nirmala UI on Windows). Listing Hind
   Siliguri straight after it means Latin names still render in Days One
   and Bengali ones pick up Hind Siliguri — per character, no branching.
   ================================================================== */
body.skin-purple .side-bar-heading {
    font-family: 'Days One', 'Hind Siliguri', 'Nirmala UI', system-ui, sans-serif;
    /* Beats Tailwind's tw-text-lg on the element. Bengali needs a little more
       size than Latin to stay legible at the same optical weight. */
    font-size: 1.4rem;
    line-height: 1.25;
    padding: 0 10px;
    /* A long shop name wraps rather than spilling out of the sidebar */
    overflow-wrap: anywhere;
}

/* ---- Settings tab rail ------------------------------------------- */
/* The active tab is a coloured chip, so it is excluded from the sitewide
   purple link colour above and keeps white text. The stock gradient here
   is AdminLTE blue; pinned to the brand ramp so the contrast is known
   (white on #7C3AED is 4.69:1). Inactive tabs stay purple on white. */
body.skin-purple .pos-tab-menu .list-group-item.active,
body.skin-purple .pos-tab-menu .list-group-item.active:hover,
body.skin-purple .pos-tab-menu .list-group-item.active:focus {
    background-image: linear-gradient(to right, var(--dt-purple-700), #6D28D9);
    border-color: transparent;
}

/* ==================================================================
   Primary action buttons (Add / Download Excel / …)
   ------------------------------------------------------------------
   The stock button is an indigo→blue gradient written into the markup
   of 38 index screens. Recoloured once here rather than edited in 38
   views: the classes, the href and every behaviour on those buttons
   stay exactly as they shipped, and the whole app changes together.

   Same ramp as the login button (#7C3AED → #A855F7), so the first
   screen a user sees and every screen after it agree. White on
   #7C3AED is 4.69:1.
   ================================================================== */
body.skin-purple .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 {
    /* Tailwind paints from these two variables, so setting them keeps its
       own machinery intact; the background-image below is the belt to that
       braces, for anywhere the stops are resolved differently. */
    --tw-gradient-from: var(--dt-purple-700);
    --tw-gradient-to: var(--dt-purple-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--dt-purple-700), var(--dt-purple-500));
    color: #fff;
}
body.skin-purple .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body.skin-purple .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus {
    /* A gradient covers the background-colour DaisyUI swaps in on hover, so
       the hover state has to be a gradient too or the button looks dead. */
    background-image: linear-gradient(to right, #6D28D9, var(--dt-purple-600));
    color: #fff;
}
body.skin-purple .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus-visible {
    outline: 2px solid var(--dt-purple-800);
    outline-offset: 2px;
}