/* ===================================================================
   DesireApp Brand Theme
   ===================================================================
   This file is the SINGLE SOURCE for the app's brand colors, font,
   and motion/transition feel. It loads AFTER both
   public/css/tailwind/app.css and the AdminLTE skin CSS (see
   resources/views/layouts/partials/css.blade.php), so every rule here
   wins by source order alone — no need for heavy use of !important.

   To change the brand color or font in the future, this is the ONLY
   file that needs editing; every page in the app pulls from here
   because every page loads app.css.
   =================================================================== */

/* -------------------------------------------------------------
   1. Font — Nunito (self-hosted fallback chain if the Google
   Fonts request is ever blocked/slow, the app still looks clean
   with a similar-shaped system font rather than the browser
   default serif).
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    --font-app: 'Nunito', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* -------------------------------------------------------------
       2. Brand color scale — deep red/maroon, in the same shade
       structure (50/200/300/500/600/700/800/900) that the compiled
       Tailwind CSS already uses for tw-*-primary-* utilities, so
       overriding these few values re-colors every tw-bg-primary-*,
       tw-text-primary-*, tw-border-primary-*, etc. class at once.
       ------------------------------------------------------------- */
    --brand-50:  #FDECEC;
    --brand-200: #F8C4C2;
    --brand-300: #F2A29E;
    --brand-500: #D32F2F;  /* primary brand red */
    --brand-600: #B71C1C;  /* hover/active state */
    --brand-700: #971515;
    --brand-800: #7A1010;
    --brand-900: #5C0B0B;

    /* Logo accent — warm orange, used ONLY for the "DesireApp"
       wordmark, never for buttons/links (keeps the orange reserved
       as a brand accent rather than diluting it into a UI color). */
    --brand-logo-orange: #FF7A00;
    --brand-logo-orange-dark: #E25C00;
}

html, body {
    font-family: var(--font-app) !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* AdminLTE and Bootstrap both set their own font-family on specific
   elements (headings, buttons, form controls) that a blanket
   body { font-family } rule doesn't reliably cascade through in
   every browser — naming them explicitly avoids occasional fallback
   to the browser default serif on inputs/buttons. */
h1, h2, h3, h4, h5, h6,
.btn, button, input, select, textarea,
.box, .panel, table, .form-control,
.tw-dw-btn, .nav, .navbar {
    font-family: var(--font-app) !important;
}

/* -------------------------------------------------------------
   3. Tailwind utility color override — re-point every shade of
   tw-*-primary-* at the brand red scale above. This list covers
   bg/text/border/ring (the property types actually used in this
   codebase's tw-*-primary-* classes, per the audit of
   public/css/tailwind/app.css).
   ------------------------------------------------------------- */
.tw-bg-primary-50   { background-color: var(--brand-50) !important; }
.tw-bg-primary-200  { background-color: var(--brand-200) !important; }
.tw-bg-primary-300  { background-color: var(--brand-300) !important; }
.tw-bg-primary-500  { background-color: var(--brand-500) !important; }
.tw-bg-primary-600  { background-color: var(--brand-600) !important; }
.tw-bg-primary-700  { background-color: var(--brand-700) !important; }
.tw-bg-primary-800  { background-color: var(--brand-800) !important; }
.tw-bg-primary-900  { background-color: var(--brand-900) !important; }

.tw-text-primary-50   { color: var(--brand-50) !important; }
.tw-text-primary-200  { color: var(--brand-200) !important; }
.tw-text-primary-300  { color: var(--brand-300) !important; }
.tw-text-primary-500  { color: var(--brand-500) !important; }
.tw-text-primary-600  { color: var(--brand-600) !important; }
.tw-text-primary-700  { color: var(--brand-700) !important; }
.tw-text-primary-800  { color: var(--brand-800) !important; }
.tw-text-primary-900  { color: var(--brand-900) !important; }

.tw-border-primary-50   { border-color: var(--brand-50) !important; }
.tw-border-primary-200  { border-color: var(--brand-200) !important; }
.tw-border-primary-300  { border-color: var(--brand-300) !important; }
.tw-border-primary-500  { border-color: var(--brand-500) !important; }
.tw-border-primary-600  { border-color: var(--brand-600) !important; }
.tw-border-primary-700  { border-color: var(--brand-700) !important; }
.tw-border-primary-800  { border-color: var(--brand-800) !important; }
.tw-border-primary-900  { border-color: var(--brand-900) !important; }

/* Gradient utility classes (e.g. tw-from-indigo-500 tw-to-blue-500,
   and the -600/-700 variants) — used on ~35 buttons app-wide ("Add
   Sale", "Add Purchase", login/register submit, etc.) — every
   variant actually in use re-pointed to the brand red at once,
   rather than tracking down and editing 35 separate files. */
.tw-from-indigo-500,
.tw-from-indigo-600,
.tw-from-indigo-700 { --tw-gradient-from: var(--brand-500) !important; --tw-gradient-to: rgb(211 47 47 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.tw-to-blue-500,
.tw-to-blue-700     { --tw-gradient-to: var(--brand-600) !important; }
.hover\:tw-from-indigo-600 { --tw-gradient-from: var(--brand-600) !important; }
.hover\:tw-to-blue-600     { --tw-gradient-to: var(--brand-700) !important; }
.active\:tw-from-indigo-700 { --tw-gradient-from: var(--brand-700) !important; }
.active\:tw-to-blue-700     { --tw-gradient-to: var(--brand-800) !important; }
.tw-bg-blue-600 { background-color: var(--brand-600) !important; }
.tw-bg-blue-700 { background-color: var(--brand-700) !important; }

/* -------------------------------------------------------------
   4. AdminLTE skin override — header uses a clean white bar with
   dark text; action buttons (btn-primary) keep the brand red.
   ------------------------------------------------------------- */
.main-header .navbar,
.main-header .logo,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-green .main-header .navbar,
.skin-green-light .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-purple-light .main-header .navbar,
.skin-yellow .main-header .navbar,
.skin-yellow-light .main-header .navbar,
.skin-black .main-header .navbar,
.skin-black-light .main-header .navbar {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.btn-primary,
.label-primary,
.bg-primary {
    background-color: var(--brand-500) !important;
    border-color: var(--brand-600) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-700) !important;
}
.text-primary, a.text-primary { color: var(--brand-500) !important; }

/* -------------------------------------------------------------
   5. Smooth tabs & transitions — Bootstrap's default tab switch
   (.nav-tabs) and AdminLTE's box-tools tabs have no transition at
   all by default (instant, jarring swap). This adds a gentle
   fade+lift so switching tabs feels deliberate rather than abrupt,
   without touching any JS (pure CSS transition on the existing
   .tab-pane / .active toggle Bootstrap's own JS already performs).
   ------------------------------------------------------------- */
.tab-content > .tab-pane {
    transition: opacity 0.18s ease-in-out;
    opacity: 0;
}
.tab-content > .tab-pane.active {
    opacity: 1;
}

.nav-tabs > li > a,
.nav-pills > li > a,
.nav-tabs-custom > .nav-tabs > li > a {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Generic smoothing for interactive surfaces across the app —
   buttons, cards/boxes, and sidebar menu items all get a quick,
   consistent hover transition instead of each component defining
   (or omitting) its own. */
.btn, .tw-dw-btn,
.box, .panel,
.sidebar-menu > li > a,
.side-bar a {
    transition: background-color 0.15s ease, color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active, .tw-dw-btn:active {
    transform: scale(0.98);
}

/* -------------------------------------------------------------
   6. Rounded, friendly card/box corners — Vyapar-style softness
   instead of AdminLTE's default sharp-cornered boxes.
   ------------------------------------------------------------- */
.box, .panel, .modal-content, .form-control, .btn, .tw-dw-btn {
    border-radius: 10px;
}
.box-header.with-border {
    border-radius: 10px 10px 0 0;
}

/* -------------------------------------------------------------
   7. DesireApp wordmark — orange, bold, used in the sidebar
   top-left brand slot and the login/register page header (see
   resources/views/layouts/partials/logo.blade.php and
   resources/views/auth/*.blade.php). Kept as a CSS class rather
   than inline styles so the look stays in this one file.
   ------------------------------------------------------------- */
.desireapp-logo {
    font-family: var(--font-app);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--brand-logo-orange);
    letter-spacing: -0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.desireapp-logo:hover {
    color: var(--brand-logo-orange-dark);
    text-decoration: none;
}
.desireapp-logo .desireapp-logo-accent {
    color: var(--brand-500);
}

/* -------------------------------------------------------------
   8. App-wide smaller font size — only the font size, nothing else
   about spacing/padding/layout touched.
   ------------------------------------------------------------- */
html, body {
    font-size: 11px !important;
}

.content-wrapper, .right-side, .main-footer,
.box, .box-body, .box-header,
.form-control, label, .control-label,
table, .table, th, td,
.dataTables_wrapper, .dataTables_info, .dataTables_length, .dataTables_filter,
.nav-tabs > li > a, .nav-pills > li > a,
.modal-body, .modal-title,
p, span, div, a, li, ul,
.btn, .sidebar-menu, .sidebar-menu > li > a,
.sidebar-menu li.treeview-menu > li > a,
.main-header .navbar, .main-header .navbar .dropdown-menu, .main-header .logo,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered,
.select2-results__option,
.select2-search__field {
    font-size: 1rem !important;
}

.btn-xs { font-size: 0.85rem !important; }
.btn-sm { font-size: 0.9rem !important; }
.label, .badge { font-size: 0.8rem !important; }
.small, small { font-size: 0.85rem !important; }
.box-title { font-size: 1.05rem !important; }

h1 { font-size: 1.6rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.2rem !important; }
h4 { font-size: 1.05rem !important; }
h5 { font-size: 0.95rem !important; }

/* -------------------------------------------------------------
   9. jQuery UI autocomplete inside a Bootstrap modal — the
   suggestion dropdown renders behind the modal by default (modal
   z-index is higher than jQuery UI's), making search results look
   like they never loaded even though they did. Forces the dropdown
   above any modal.
   ------------------------------------------------------------- */
.ui-autocomplete {
    z-index: 99999 !important;
}

/* -------------------------------------------------------------
   10. Sidebar — light theme: white background, dark text, subtle
   gray highlight on hover/active.
   ------------------------------------------------------------- */
:root {
    --sidebar-bg: #ffffff;
    --sidebar-bg-hover: #f3f4f6;
    --sidebar-bg-active: #e5e7eb;
    --sidebar-text: #374151;
    --sidebar-text-active: #111827;
    --sidebar-heading: #6b7280;
}

aside.side-bar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid #e5e7eb !important;
}

#side-bar {
    border-color: #e5e7eb !important;
}

/* Top-level links + dropdown toggles */
#side-bar > a,
#side-bar .drop_down {
    color: var(--sidebar-text) !important;
}

#side-bar > a:hover,
#side-bar .drop_down:hover,
#side-bar .drop_down:focus {
    background-color: var(--sidebar-bg-hover) !important;
    color: var(--sidebar-text-active) !important;
}

/* Active top-level item / active-parent state */
#side-bar > a.tw-bg-gray-200,
#side-bar > div.tw-bg-gray-200,
#side-bar .drop_down.tw-bg-gray-200 {
    background-color: var(--sidebar-bg-active) !important;
    color: var(--sidebar-text-active) !important;
}
#side-bar > a.tw-text-primary-700,
#side-bar .drop_down.tw-text-primary-700 {
    color: var(--sidebar-text-active) !important;
}

/* Sub-menu (dropdown) items — the actual classes rendered by
   getChildMenuItems() in AdminlteCustomPresenter.php are ".chiled"
   (its own wrapper) and ".tw-space-y-3.5" (the items list), not the
   "tw-space-y-1" guessed the first time around, which is why the
   submenu text stayed invisible-on-dark after that first pass. */
#side-bar .chiled a,
#side-bar .tw-space-y-3\.5 a {
    color: var(--sidebar-text) !important;
}
#side-bar .chiled a:hover {
    color: var(--sidebar-text-active) !important;
}
#side-bar .chiled a.tw-text-primary-700 {
    color: var(--sidebar-text-active) !important;
    font-weight: 600;
}
/* The vertical connector line down the left of a submenu — was a
   light gray meant for a white background, invisible against navy. */
#side-bar .chiled .tw-bg-gray-200 {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

/* Section headings (e.g. group labels, if any) */
#side-bar > div.tw-uppercase {
    color: var(--sidebar-heading) !important;
}

/* Icons and the dropdown chevron inherit the current text color
   already (stroke="currentColor" / fill="currentColor" in the SVGs
   AdminlteCustomPresenter.php outputs), so no separate icon rule is
   needed — they follow the link color rules above automatically. */

/* Scrollbar, to match the dark background instead of a bright
   default one down the side of the menu. */
#side-bar::-webkit-scrollbar {
    width: 6px;
}
#side-bar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
#side-bar::-webkit-scrollbar-track {
    background-color: transparent;
}

/* -------------------------------------------------------------
   11. Top header — light/white bar with dark text (matches sidebar).
   ------------------------------------------------------------- */

/* Business name slot above the sidebar menu */
.side-bar a[href*="home"],
.small-view-button {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.side-bar a[href*="home"] .side-bar-heading,
.side-bar a[href*="home"] p {
    color: #111827 !important;
}

/* -------------------------------------------------------------
   12. Compact dashboards — Home (login-landing) dashboard and the
   Repair module's own dashboard both stack a lot of boxes/widgets
   vertically, needing a lot of scrolling to see everything.
   Tightening spacing/padding (not touching the widgets' own
   structure or data, which is too risky to rewrite blind) gets more
   on screen at once without a risky full rebuild.
   ------------------------------------------------------------- */
.content-wrapper .box,
.content-wrapper .small-box {
    margin-bottom: 12px !important;
}
.content-wrapper .box-body,
.content-wrapper .box-header {
    padding: 10px 14px !important;
}
.content-wrapper .row {
    margin-bottom: 0 !important;
}
.content-wrapper .small-box .inner {
    padding: 10px !important;
}
.content-wrapper .small-box .inner h3 {
    font-size: 22px !important;
    margin: 0 0 4px 0 !important;
}
.content-wrapper .small-box .icon {
    font-size: 60px !important;
    top: 8px !important;
}
.content-header {
    padding: 10px 15px !important;
}
.content > .row:first-child {
    margin-top: 0 !important;
}

/* -------------------------------------------------------------
   13. Header background — the header's own gradient is tied to
   session('business.theme_color') via tw-from-{color}-800 /
   tw-to-{color}-900 classes directly on its wrapper div, which is
   currently set to a dark teal/navy in Business Settings — not
   something a class-name-based override could reliably catch (no
   stable selector existed before). Targeted directly via the id
   added to that div in header.blade.php instead.
   ------------------------------------------------------------- */
#app_header_bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
#app_header_bar,
#app_header_bar .tw-text-white,
#app_header_bar a,
#app_header_bar button,
#app_header_bar span,
#app_header_bar * {
    color: #111827 !important;
}
#app_header_bar svg {
    color: #111827 !important;
    stroke: #111827 !important;
}
/* Header icon/toggle buttons — light gray chips instead of dark navy */
#app_header_bar .tw-bg-primary-800,
#app_header_bar [class*="tw-bg-primary-8"],
#app_header_bar .small-view-button,
#app_header_bar .side-bar-collapse {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}
#app_header_bar .tw-ring-white\/10 {
    --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
}
#app_header_bar .add-sale-btn,
#app_header_bar .add-challan-btn,
#app_header_bar .add-purchase-btn,
#app_header_bar .add-repair-btn,
#app_header_bar .hdr-mod-list,
#app_header_bar .hdr-mod-add {
    background-color: #ffffff !important;
    color: #111827 !important;
}
#app_header_bar .hdr-mod-group {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}
#app_header_bar .hdr-mod-add {
    background-color: #f3f4f6 !important;
}

/* -------------------------------------------------------------
   14. App-wide light surfaces — white page background, dark text.
   ------------------------------------------------------------- */
.tw-bg-gray-100,
.content-wrapper,
.right-side,
.main-footer,
#scrollable-container,
.content,
main.tw-flex {
    background-color: #ffffff !important;
}
.box,
.panel,
.modal-content,
.form-control {
    background-color: #ffffff !important;
    color: #111827 !important;
}
.box-header,
.content-header {
    color: #111827 !important;
}
.table > thead > tr > th {
    background-color: #f9fafb !important;
    color: #111827 !important;
}