/* ==========================================================================
   Yaigo Admin — header, sidebar & menu theme
   Reuses the same palette as the login page (login-auth.css):
     brand blue   #2F6FEE   — primary / active state / links
     brand green  #2ED47A   — secondary accent / online status
     brand green (dark) #16A34A
     ink navy     #0B1B33 / #0C1B33 — dark surfaces & headings
     paper        #F5F7FB  — light surfaces

   IMPORTANT: this file intentionally overrides `.theme-header-bg`,
   `.theme-btn-bg` and `.theme-logo-bg` with !important. Those classes are
   normally colored per-business via the `skin-{color}` class on <body>
   (Settings > theme color). This file makes every business use the same
   fixed Yaigo brand colors instead of their own picked skin color.
   Remove the !important overrides below (or drop this file) to restore
   the per-business color picker.
   ========================================================================== */

:root {
    --brand-ink-900: #0B1B33;
    --brand-ink-800: #0C1B33;
    --brand-teal-700: #10523F;
    --brand-navy-2: #12275C;
    --brand-blue-600: #2F6FEE;
    --brand-blue-600-rgb: 47, 111, 238;
    --brand-green-500: #2ED47A;
    --brand-green-500-rgb: 46, 212, 122;
    --brand-green-600: #16A34A;
    --brand-paper-50: #F5F7FB;
    --brand-border: #E2E6EE;
}

/* ---------------------------------------------------------------------- */
/* Global type + surface                                                  */
/* ---------------------------------------------------------------------- */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.tw-bg-gray-100 {
    background-color: var(--brand-paper-50) !important;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-blue-600);
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-border);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c7cee0;
}

/* ---------------------------------------------------------------------- */
/* Sidebar                                                                 */
/* ---------------------------------------------------------------------- */

.side-bar {
    border-color: var(--brand-border) !important;
    box-shadow: 1px 0 0 rgba(11, 27, 51, .02);
    background-color: rgb(20, 21, 26);
    min-height: 100vh;
}

.admin-sidebar-logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem !important;
    width: 15rem !important;
    /* border-radius: .55rem; */
    background: rgb(255 255 255 / 23%);
    flex-shrink: 0;
}

.admin-sidebar-logo-mark {
    height: 3rem !important;
    width: 15rem !important;
    object-fit: contain;
}

/* Logo / business-name band at the top of the sidebar */
.theme-logo-bg {
    background: linear-gradient(135deg, var(--brand-teal-700) 0%, var(--brand-ink-900) 55%, var(--brand-navy-2) 100%) !important;
    border-color: transparent !important;
}

.theme-logo-bg .side-bar-heading {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
}

.admin-sidebar-logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.85rem;
    width: 1.85rem;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .18);
    flex-shrink: 0;
}

.admin-sidebar-logo-mark {
    height: 1.1rem;
    width: 1.1rem;
    object-fit: contain;
}

/* "Online" status dot next to the business name */
.theme-logo-bg .tw-bg-green-400 {
    background-color: var(--brand-green-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-green-500-rgb), .25);
}

/* Sidebar search box */
.side-bar .tw-bg-gray-100 {
    background-color: var(--brand-paper-50) !important;
    border-color: var(--brand-border) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.side-bar .tw-bg-gray-100:focus-within {
    border-color: var(--brand-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-blue-600-rgb), .12);
}

#sidebar-search {
    font-family: 'Inter', sans-serif;
}

/* Sidebar navigation menu — generated by App\Http\AdminlteCustomPresenter
   (nwidart/laravel-menus). Targets the presenter's real classes:
   theme-sidebar-hover / theme-sidebar-active (top-level links),
   theme-sidebar-child-hover / theme-sidebar-child-active (submenu links),
   theme-sidebar-header (section labels), theme-sidebar-chevron (dropdown
   arrow), theme-sidebar-children / theme-sidebar-child-line (submenu tree). */

.theme-sidebar-menu {
    font-family: 'Inter', sans-serif;
}

.theme-sidebar-link {
    position: relative;
}

.theme-sidebar-hover:hover {
    background: var(--brand-paper-50);
    color: var(--brand-blue-600) !important;
}

.theme-sidebar-hover:hover svg,
.theme-sidebar-hover:hover .theme-sidebar-icon {
    color: var(--brand-blue-600);
}

.theme-sidebar-active {
    background: linear-gradient(90deg, rgba(var(--brand-blue-600-rgb), .10), rgba(var(--brand-green-500-rgb), .10));
    color: var(--brand-blue-600) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-blue-600);
}

.theme-sidebar-active svg,
.theme-sidebar-active .theme-sidebar-icon {
    color: var(--brand-blue-600);
}

/* Section headers (getHeaderWrapper) */
.theme-sidebar-header {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .08em;
    color: #9aa3b5 !important;
}

/* Dropdown chevron */
.theme-sidebar-chevron {
    transition: transform .15s ease, color .15s ease;
}

.theme-sidebar-active .theme-sidebar-chevron,
.drop_down.theme-sidebar-active .theme-sidebar-chevron {
    color: var(--brand-blue-600) !important;
    transform: rotate(90deg);
}

/* Submenu (children) */
.theme-sidebar-child-line {
    background: var(--brand-border) !important;
}

.theme-sidebar-child-link {
    padding-left: .5rem;
}

.theme-sidebar-child-hover:hover {
    color: var(--brand-blue-600) !important;
}

.theme-sidebar-child-active {
    color: var(--brand-blue-600) !important;
    font-weight: 600;
}

#sidebar-no-results {
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Top header bar                                                         */
/* ---------------------------------------------------------------------- */

.theme-header-bg {
    /*background: linear-gradient(90deg, var(--brand-ink-900) 0%, var(--brand-navy-2) 100%) !important;*/
    /*background: rgb(20, 21, 26);*/
    background: rgb(238 242 246/var(--tw-bg-opacity));
    border-color: transparent !important;
}

.theme-btn-bg {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    transition: background-color .15s ease;
}

.theme-btn-bg:hover {
    background: rgba(255, 255, 255, .16) !important;
}

.theme-header-bg .tw-font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .04em;
}

/* Primary CTA button in the header (e.g. "POS Sale") — add class
   `btn-brand-cta` alongside `theme-btn-bg` on any header button you want
   to stand out as the main action. */
.btn-brand-cta.theme-btn-bg {
    background: linear-gradient(90deg, var(--brand-green-500), var(--brand-blue-600)) !important;
    border-color: transparent !important;
}

.btn-brand-cta.theme-btn-bg:hover {
    opacity: .92;
}

/* Dropdown menus opened from the header (profile menu, quick-actions menu) */
.theme-header-bg [role="menu"],
.theme-header-bg .tw-dw-menu {
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(11, 27, 51, .14);
}

.theme-header-bg [role="menuitem"]:hover {
    background: var(--brand-paper-50) !important;
    color: var(--brand-ink-800) !important;
}

/* Notification / count badges anywhere in the header */
.theme-header-bg .badge,
.theme-header-bg .label-danger,
.theme-header-bg .navbar-badge {
    background: var(--brand-blue-600) !important;
    border-color: var(--brand-blue-600) !important;
}

/* ---------------------------------------------------------------------- */
/* Misc chrome                                                            */
/* ---------------------------------------------------------------------- */

.scrolltop .icon {
    background: var(--brand-blue-600);
    color: #fff;
}

.scrolltop .icon:hover {
    background: #1d4fd8;
}

/* ===== Page container (this is the piece meant to sit inside @yield('content')) ===== */

.launch-container {
    /*max-width: 72rem;*/
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.launch-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brand-blue-600);
    margin: 0;
}

.launch-heading {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--brand-ink-800);
    margin: .4rem 0 .3rem;
}

.launch-subheading {
    font-size: .9rem;
    color: var(--brand-text-muted);
    margin: 0 0 2rem;
}

.launch-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 560px) {
    .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
    .launch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.launch-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.launch-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--brand-blue-600-rgb), .35);
    box-shadow: 0 12px 24px -12px rgba(11, 27, 51, .18);
}

.launch-card:active {
    transform: translateY(-1px);
}

.launch-card:focus-visible {
    outline: 2px solid var(--brand-blue-600);
    outline-offset: 2px;
}

.launch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--brand-green-500) 0%, var(--brand-blue-600) 100%);
    box-shadow: 0 6px 14px -6px rgba(var(--brand-blue-600-rgb), .45);
    flex-shrink: 0;
}

.launch-icon svg {
    height: 1.6rem;
    width: 1.6rem;
    color: #fff;
}

.launch-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--brand-ink-800);
    margin: 0;
}

.launch-desc {
    font-size: .82rem;
    color: var(--brand-text-muted);
    margin: .2rem 0 0;
    line-height: 1.45;
}

.launch-title {
    overflow-wrap: anywhere;
}

.launch-icon i {
    font-size: 1.4rem;
    color: #fff;
}

.launch-group + .launch-group {
    margin-top: 2rem;
}

.launch-group-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-ink-800);
    margin: 0 0 1rem;
}

.launch-group-icon {
    display: inline-flex;
    color: var(--brand-blue-600);
}

.launch-group-icon svg,
.launch-group-icon i {
    height: 1.25rem;
    width: 1.25rem;
    font-size: 1.1rem;
}


/* -- Page background (replaces the old indigo/blue gradient) -- */

/*.pos-price-page {*/
/*    background: radial-gradient(120% 140% at 15% 0%, var(--brand-teal-700) 0%, var(--brand-ink-900) 45%, var(--brand-navy-2) 100%);*/
/*    padding-bottom: 3rem;*/
/*}*/

.pos-price-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brand-green-500);
}

.pos-price-heading {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.pos-price-toggle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pos-price-toggle-row span {
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    font-weight: 500;
}

/* Monthly/annual toggle — recolor the existing daisyUI toggle to brand blue */
.duration_check.tw-dw-toggle {
    border-color: rgba(255, 255, 255, .4) !important;
    background-color: rgba(255, 255, 255, .15) !important;
}

.duration_check.tw-dw-toggle:checked {
    background-color: var(--brand-blue-600) !important;
    border-color: var(--brand-blue-600) !important;
}

/* -- Pricing card -- */

.pos-price-card {
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 40px -22px rgba(11, 27, 51, .4);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pos-price-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 54px -20px rgba(11, 27, 51, .5);
}

.pos-price-badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--brand-green-500), var(--brand-blue-600));
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 16px -4px rgba(var(--brand-blue-600-rgb), .5);
    white-space: nowrap;
}

.pos-price-name {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-ink-800);
    margin: 0;
}

.pos-price-amount {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    background: linear-gradient(90deg, var(--brand-green-600), var(--brand-blue-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: .35rem 0 0;
}

.pos-price-amount .display_currency {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pos-price-interval {
    font-size: .9rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    -webkit-text-fill-color: var(--brand-text-muted);
}

.pos-price-free {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    background: linear-gradient(90deg, var(--brand-green-600), var(--brand-blue-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pos-price-desc {
    font-size: .85rem;
    color: var(--brand-text-muted);
    margin-top: .5rem;
    line-height: 1.5;
}

.pos-price-features {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
}

.pos-price-feature {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .875rem;
    color: var(--brand-ink-800);
    padding: .4rem 0;
}

.pos-price-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.35rem;
    width: 1.35rem;
    border-radius: 999px;
    background: rgba(var(--brand-green-500-rgb), .15);
    color: var(--brand-green-600);
    font-size: .65rem;
    flex-shrink: 0;
}

.pos-price-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border-radius: .85rem;
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, var(--brand-green-500), var(--brand-blue-600));
    transition: opacity .15s ease, transform .15s ease;
}

.pos-price-cta:hover {
    opacity: .92;
    color: #fff;
}

.pos-price-cta:active {
    transform: translateY(1px);
}

.top-navbar{
    background-color: rgb(11 42 77);
}

.pos-button, .pos-button:hover {
    background-color: #18ccee !important;
}
#side-bar .theme-sidebar-active {
    background-color: #18ccee !important;
    Color: #fff !important;
}
#side-bar a:hover svg, #side-bar a:hover i, #side-bar a.theme-sidebar-active svg, #side-bar a.theme-sidebar-active i {
    Color: #fff;
}