/* tinee.link QR Code Tracker - shared brand overrides for CoreUI/Bootstrap.
   Keep this as the single place for brand color, buttons, inputs, and text
   sizing so the login page and the admin panel always match. */

:root {
    /* Inter, loaded in dashboard/layouts/head.blade.php - falls back to the
       system stack if the Google Fonts request is ever blocked/offline. */
    --cui-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* "Google Sans" is Google's own in-house typeface - it isn't published
       on Google Fonts and there's no legitimate way to self-host or link it
       here, so this can only ever apply for a visitor who happens to have
       it installed locally (e.g. ChromeOS, some Google Workspace setups).
       Listing it first is harmless for everyone else - it just falls
       through to Inter/system-ui exactly like today. */
    --font-google-sans: 'Google Sans', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Checkbox/radio checked state - CoreUI's compiled stylesheet reads
       these as custom properties (falling back to its own purple) but
       never actually defines them at :root, so they were silently using
       that purple fallback everywhere. Defining them here covers every
       .form-check-input (checkboxes and radios) on both the dashboard and
       the public site, since both load this stylesheet. */
    --cui-form-check-input-checked-bg-color: #cf8771;
    --cui-form-check-input-checked-border-color: #944c36;
    --cui-form-check-input-indeterminate-bg-color: #cf8771;
    --cui-form-check-input-indeterminate-border-color: #944c36;

    /* Brand palette - the only 5 colors allowed for any "colorful" UI element
       (buttons, badges, stat icons, accents). Neutral greys/whites used for
       page chrome, borders, and text are not part of this constraint. */
    --palette-navy: #264653;
    --palette-teal: #2a9d8f;
    --palette-gold: #e9c46a;
    --palette-orange: #f4a261;
    --palette-coral: #e76f51;

    --brand: var(--palette-teal);
    --brand-dark: var(--palette-navy);
    --brand-light: var(--palette-teal);

    /* Plain hyperlinks (breadcrumbs, table cell links, footer links, etc.) -
       CoreUI defaults to a purple (#321fdb) that clashes with the brand
       used everywhere else; every var(--cui-link-color) consumer picks this
       up automatically since it's the same custom property, just redefined. */
    --cui-link-color: var(--brand);
    --cui-link-hover-color: var(--brand-dark);

    /* Secondary action colors - kept distinct from the brand so buttons read
       at a glance (edit vs. delete vs. activate, etc). Every colorful one
       maps onto the 5-color palette above; -dark variants are the same hue,
       manually darkened ~15-20% for hover/active feedback. */
    --clr-secondary: #55697d;
    --clr-secondary-dark: #40515f;
    --clr-info: var(--palette-navy);
    --clr-info-dark: #1b333c;
    --clr-success: var(--palette-teal);
    --clr-success-dark: #218074;
    --clr-warning: var(--palette-gold);
    --clr-warning-dark: var(--palette-orange);
    --clr-danger: var(--palette-coral);
    --clr-danger-dark: #c85a3f;
    --clr-dark: var(--palette-navy);
    --clr-dark-dark: #1b333c;

    /* CoreUI/Bootstrap's own theme variables - every generated utility
       (.bg-*, .text-*, .border-*, .btn-outline-*, badges, etc.) reads these
       directly, not the --clr-* aliases above, so they need the same
       palette mapping or things like a stock .badge.bg-primary would still
       render CoreUI's default purple instead of an on-palette color. */
    --cui-primary: var(--palette-teal);
    --cui-primary-rgb: 42, 157, 143;
    --cui-secondary: #55697d;
    --cui-secondary-rgb: 85, 105, 125;
    --cui-success: var(--palette-teal);
    --cui-success-rgb: 42, 157, 143;
    --cui-info: var(--palette-navy);
    --cui-info-rgb: 38, 70, 83;
    --cui-warning: var(--palette-gold);
    --cui-warning-rgb: 233, 196, 106;
    --cui-danger: var(--palette-coral);
    --cui-danger-rgb: 231, 111, 81;
    --cui-dark: var(--palette-navy);
    --cui-dark-rgb: 38, 70, 83;

    /* Page chrome - lighter, neutral greys (not part of the brand palette). */
    --page-bg: #ffffff;
    --section-bg: #f6f7f9;
    --section-border: #e8eaee;
}

body {
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    font-feature-settings: "cv11", "tnum";
}

.card-header h3,
.card-header h4 {
    font-family: var(--font-google-sans);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Dashboard titles (card headers, page headings like "Create QR Code",
   section headings like "Basic Info") - Google Sans where a visitor has it
   installed, Inter everywhere else. Scoped to .wrapper so the sidebar and
   the public marketing/login pages are unaffected. */
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
.wrapper h6,
.wrapper .step-title {
    font-family: var(--font-google-sans);
}

.form-label {
    font-weight: 500;
    color: #4a4a4a;
}

/* CoreUI's default .text-muted (rgba(44,56,74,0.38)) is too light for form
   labels/explanations to read comfortably - darken it everywhere it's used
   (field sub-labels, helper text, captions) without losing the "secondary
   emphasis" it's meant to convey. */
.text-muted {
    color: rgba(44, 56, 74, 0.72) !important;
}

/* The indeterminate checkbox state (the QR Codes list's "select all"
   checkbox when only some rows are checked) is hardcoded to CoreUI's
   purple directly in the compiled stylesheet rather than reading the
   --cui-form-check-input-indeterminate-* custom properties, so it needs
   its own explicit override here to match the checked-state color above. */
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #457b9d;
    border-color: #457b9d;
}

/* Buttons - solid fills, one color per action so buttons are
   distinguishable at a glance instead of all sharing one outline style. */
.btn {
    border-radius: 0.5rem;
    font-weight: 600;
}

/* Pill-shaped submit buttons (Save Changes, Generate QR Code, Cancel,
   Update Password, etc.) - fully rounded ends (a true stadium shape, the
   left/right edges are half-circles matching the button's height) to match
   the circular icon buttons, while keeping their action text so it's
   always clear what submitting/cancelling the button does. !important
   because it must always win over the plain .btn radius above regardless
   of source order. */
.btn-pill {
    border-radius: 999px !important;
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    /* CoreUI reads a separate --cui-btn-disabled-* token set (not the
       plain background-color/border-color above) for :disabled buttons -
       without this a disabled primary button still renders CoreUI's
       stock purple. */
    --cui-btn-disabled-bg: var(--brand);
    --cui-btn-disabled-border-color: var(--brand);
    --cui-btn-disabled-color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-secondary);
    --cui-btn-disabled-border-color: var(--clr-secondary);
    --cui-btn-disabled-color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--clr-secondary-dark) !important;
    border-color: var(--clr-secondary-dark) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--clr-info);
    border-color: var(--clr-info);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-info);
    --cui-btn-disabled-border-color: var(--clr-info);
    --cui-btn-disabled-color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--clr-info-dark) !important;
    border-color: var(--clr-info-dark) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--clr-success);
    border-color: var(--clr-success);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-success);
    --cui-btn-disabled-border-color: var(--clr-success);
    --cui-btn-disabled-color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--clr-success-dark) !important;
    border-color: var(--clr-success-dark) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--clr-warning);
    border-color: var(--clr-warning);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-warning);
    --cui-btn-disabled-border-color: var(--clr-warning);
    --cui-btn-disabled-color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--clr-warning-dark) !important;
    border-color: var(--clr-warning-dark) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--clr-danger);
    border-color: var(--clr-danger);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-danger);
    --cui-btn-disabled-border-color: var(--clr-danger);
    --cui-btn-disabled-color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--clr-danger-dark) !important;
    border-color: var(--clr-danger-dark) !important;
    color: #fff !important;
}

.btn-dark {
    background-color: var(--clr-dark);
    border-color: var(--clr-dark);
    color: #fff;
    --cui-btn-disabled-bg: var(--clr-dark);
    --cui-btn-disabled-border-color: var(--clr-dark);
    --cui-btn-disabled-color: #fff;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--clr-dark-dark) !important;
    border-color: var(--clr-dark-dark) !important;
    color: #fff !important;
}

/* Outline buttons - CoreUI's compiled stylesheet hardcodes these per-variant
   as literal hex (not var(--cui-primary) etc.), so overriding the theme
   custom properties above doesn't reach them; they need the same palette
   mapping repeated explicitly here. */
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
    --cui-btn-disabled-color: var(--brand);
    --cui-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    --cui-btn-disabled-color: var(--clr-secondary);
    --cui-btn-disabled-border-color: var(--clr-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--clr-secondary) !important;
    border-color: var(--clr-secondary) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--clr-danger);
    border-color: var(--clr-danger);
    --cui-btn-disabled-color: var(--clr-danger);
    --cui-btn-disabled-border-color: var(--clr-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--clr-danger) !important;
    border-color: var(--clr-danger) !important;
    color: #fff !important;
}

/* Pagination (every paginated table - QR codes, admin reports/users/QR
   codes, scan history). The plain page-number color already inherits the
   themed --cui-link-color, but the CURRENT page's highlight and the
   keyboard-focus ring are set to CoreUI's stock purple-blue as literal
   hex on .pagination itself, not tied to any already-themed variable -
   so they need overriding the same way the outline buttons above do. */
.pagination {
    --cui-pagination-active-bg: var(--brand);
    --cui-pagination-active-border-color: var(--brand);
    --cui-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}

/* Page chrome - the wrapper (everything right of the sidebar) is plain
   white; only the breadcrumb bar and the main content area behind the
   cards carry the light grey section tint, so white cards read as raised
   panels sitting on a grey section rather than the whole page being grey. */
.wrapper {
    background-color: var(--page-bg) !important;
}

.header-divider + .container-fluid.mb-2 {
    background-color: var(--section-bg);
    border-bottom: 1px solid var(--section-border);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.body {
    background-color: var(--section-bg);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Cards - a soft, thin-bordered white panel sitting on the grey section
   background, spaced generously so each card reads as its own container
   rather than a dense stack. */
.card {
    border: 1px solid var(--section-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.35rem rgba(20, 38, 71, 0.04);
    margin-bottom: 1.5rem !important;
    /* Without this, a card whose last element (header, table, etc.) has
       square corners pokes past the card's own rounded corners - most
       visible on a header-only card, which looks clipped at the bottom. */
    overflow: hidden;
}

.card-header {
    background: #fff;
    border-bottom-color: var(--section-border);
}

/* Stat tiles (dashboard) - colored icon badge on a white card instead of
   a flat grey box, so each stat reads as its own thing at a glance. */
.stat-card {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(42, 157, 143, 0.08);
    background: #fff;
}

.stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--brand);
}

.stat-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.stat-card.stat-info .stat-icon {
    background: var(--clr-info);
}

.stat-card.stat-success .stat-icon {
    background: var(--clr-success);
}

.stat-card.stat-warning .stat-icon {
    background: var(--clr-warning);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1b1b1b;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* Top-branches quick-insight bars (dashboard overview). */
.branch-bar {
    height: 0.4rem;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

/* Scans pill (QR codes list) - a bolder, more legible stand-in for a bare
   number, colored to distinguish "has traffic" from "never scanned". */
.scan-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #8a94a6;
    background: #eef1f5;
}

.scan-pill .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.scan-pill-active {
    color: var(--brand);
    background: rgba(42, 157, 143, 0.1);
}

/* Custom parameter tags (Branch, Brochure, etc.) - a QR code can carry any
   number of these now, so they render as small pills rather than a fixed
   table column. */
.param-badge {
    display: inline-block;
    margin: 0.1rem 0.25rem 0.1rem 0;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--brand);
    background: rgba(42, 157, 143, 0.08);
}

/* Step badges (Create/Edit QR Code forms) - a rounded, dark, high-contrast
   number marking each major section (Basic Info / Custom Parameters /
   Design) so the form reads as a guided sequence instead of one long list
   of fields. */
.step-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.step-heading .step-title {
    font-weight: 600;
    font-size: 1rem;
    color: #2c384a;
}

/* Destination Type toggle (Single Link / Landing Page) - the default
   outline-primary reads flat/grayish until picked. A dedicated teal accent
   (reusing the same brand teal as .btn-info) keeps it on-theme while giving
   the active choice a clear, colorful highlight. */
.method-toggle .btn {
    /* Bootstrap's default .btn-group > .btn is flex: 1 1 auto - grow/shrink
       an equal AMOUNT from each button's own content width, not an equal
       SHARE of the row. Two labels of different lengths (e.g. "Single Link"
       vs "Landing Page") end up close but not an exact 50/50 split, which
       reads as misaligned against a true col-6/col-6 grid row below it.
       flex-basis: 0 makes both start from zero and grow to fill evenly. */
    flex-basis: 0;
    border-color: rgba(38, 70, 83, 0.35);
    color: var(--clr-info-dark);
    font-weight: 600;
    background: #fff;
}

/* !important throughout this block because every label here also carries
   the generic .btn-outline-primary class, whose own :hover/:focus/:active
   state is teal with !important (see below) - without matching !important
   here, that generic rule wins regardless of specificity and the unselected
   side of the toggle flashes brand-teal on hover/click, clashing with the
   selected side's navy right next to it. */
.method-toggle .btn:hover,
.method-toggle .btn:focus,
.method-toggle .btn:active {
    background: rgba(38, 70, 83, 0.08) !important;
    border-color: var(--clr-info) !important;
    color: var(--clr-info-dark) !important;
}

/* Selected state uses the same lighter blue as a checked checkbox/radio
   (--cui-form-check-input-checked-bg-color) rather than the darker navy
   --clr-info used elsewhere - solid navy across a whole button read as too
   heavy/clashing next to the rest of the form. */
.method-toggle .btn-check:checked + .btn,
.method-toggle .btn-check:checked + .btn:hover,
.method-toggle .btn-check:checked + .btn:focus,
.method-toggle .btn-check:checked + .btn:active {
    background: var(--cui-form-check-input-checked-bg-color) !important;
    border-color: var(--cui-form-check-input-checked-bg-color) !important;
    color: #fff !important;
}


/* A second cue beyond the fill color alone - color contrast can be subtle
   at a glance (and doesn't help colorblind users), so the selected option
   also gets a checkmark, matching how the choice would read on an iOS
   segmented control or a Material toggle button. */
.method-toggle .btn-check:checked + .btn::before {
    content: "\2713";
    display: inline-block;
    margin-right: 0.4rem;
    font-weight: 700;
}

.method-toggle .btn-check:focus + .btn {
    box-shadow: 0 0 0 0.2rem rgba(38, 70, 83, 0.25);
}

/* Icon-only circular button - the default shape for every button in the app
   except the two primary form-submit actions (Save Changes / Create QR),
   which keep their text label. Used for row-remove/add actions, and for
   any secondary action (Back, Edit, Download, Logout, bulk actions, etc.)
   converted from a labeled button to an icon. `.btn-icon-square` is kept as
   an alias for existing markup that still uses the old class name - it's
   circular now too, not literally square. */
.btn-icon-square,
.btn-icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-square .icon,
.btn-icon-circle .icon {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 !important;
}

.btn-icon-circle.btn-sm {
    width: 2.1rem;
    height: 2.1rem;
}

.btn-icon-circle.btn-sm .icon {
    width: 1rem;
    height: 1rem;
}

/* Usage-limit cards (Total Scans This Month / Active Assets) on the
   dashboard overview - a plain Bootstrap progress bar re-themed to the
   brand palette, with warning/danger colors kicking in as an account
   approaches or hits its plan's cap. */
.usage-card .stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(44, 56, 74, 0.6);
}

.usage-card .progress {
    height: 10px;
    border-radius: 999px;
    background-color: rgba(38, 70, 83, 0.08);
    overflow: hidden;
}

.usage-card .progress-bar {
    background-color: var(--brand);
    transition: width 0.3s ease;
}

.usage-card .progress-bar.usage-near-cap {
    background-color: var(--palette-orange);
}

.usage-card .progress-bar.usage-at-cap {
    background-color: var(--clr-danger);
}

.branch-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--brand);
}

/* Tables - swap CoreUI's flat black-tinted zebra stripe/hover for a
   faint brand-tinted one, and give headers a lighter, modern label style
   instead of the default grey cap background. */
.table {
    --cui-table-striped-bg: rgba(42, 157, 143, 0.035);
    --cui-table-hover-bg: rgba(42, 157, 143, 0.06);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.85rem 1rem;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #8a94a6;
    background: transparent;
    border-bottom: 2px solid #eef1f5;
}

.table td,
.table th {
    border-bottom-color: #eef1f5;
    vertical-align: middle;
}

/* Inputs - softer border + a brand-tinted focus ring (instead of CoreUI's
   flat grey/purple) so a focused field reads clearly without being harsh. */
.form-control,
.form-select {
    padding: 0.55rem 0.9rem;
    border-radius: 0.6rem;
    border-color: #dde2e8;
    background-color: #fbfcfd;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-select {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not([readonly]):not(:focus) {
    border-color: #c2cad4;
}

.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 0.2rem rgba(42, 157, 143, 0.14);
}

.form-control::placeholder {
    color: #a3acba;
}

.form-control:disabled,
.form-select:disabled {
    background-color: #f2f4f7;
    border-color: #e7eaef;
}

.input-group-text {
    padding: 0.55rem 0.9rem;
    background: #f5f7f6;
    border-color: #dde2e8;
    border-right: none;
    color: var(--brand);
    transition: border-color 0.15s ease;
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 0.6rem 0.6rem 0;
}

.input-group .input-group-text {
    border-radius: 0.6rem 0 0 0.6rem;
}

.input-group:focus-within .input-group-text {
    background: rgba(42, 157, 143, 0.08);
    border-color: var(--brand-light);
}

.input-group:focus-within .form-control {
    border-color: var(--brand-light);
    box-shadow: 0 0 0 0.2rem rgba(42, 157, 143, 0.14);
}

/* Sidebar - same navy-to-blue brand gradient as the login/landing pages
   (.login-shell/.landing-hero), instead of CoreUI's stock flat grey-blue, so
   the dashboard reads as the same product as the marketing/auth pages. Every
   other --cui-sidebar-* token (nav-link colors, hover/active overlays, the
   brand/footer/toggler backgrounds) is already a semi-transparent white or
   black overlay, so they keep working unchanged over the new background -
   only the base fill itself needs overriding. */
.sidebar {
    --cui-sidebar-bg: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 130%);
}

/* Sidebar footer (e.g. Logout) - CoreUI only sizes .nav-link/.nav-icon
   inside .sidebar-nav, so anything placed in .sidebar-footer needs the
   same rules repeated here to match the rest of the nav. */
.sidebar-footer {
    /* .sidebar-footer normally carries its own padding; zero it out so the
       .nav-link's padding below is the only spacing, matching Home/QR Codes
       above it instead of being indented an extra step. */
    padding: 0;
}

.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    padding: var(--cui-sidebar-nav-link-padding-y) var(--cui-sidebar-nav-link-padding-x);
    color: var(--cui-sidebar-nav-link-color);
    text-decoration: none;
    white-space: nowrap;
    background: var(--cui-sidebar-nav-link-bg);
    border-radius: var(--cui-sidebar-nav-link-border-radius);
}

.sidebar-footer .nav-link:hover,
.sidebar-footer .nav-link:focus {
    color: var(--cui-sidebar-nav-link-hover-color);
    background: var(--cui-sidebar-nav-link-hover-bg);
}

.sidebar-footer .nav-icon {
    flex: 0 0 var(--cui-sidebar-nav-icon-width);
    height: var(--cui-sidebar-nav-icon-height);
    font-size: var(--cui-sidebar-nav-icon-font-size);
    color: var(--cui-sidebar-nav-link-icon-color);
    text-align: center;
    fill: currentcolor;
}

/* Design-section helper note (create/edit QR forms) - a soft tinted callout
   instead of a bare text-muted line, so the scanning-reliability tip reads
   as guidance rather than blending into the rest of the form copy. */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    background: rgba(38, 70, 83, 0.06);
    border: 1px solid rgba(38, 70, 83, 0.18);
    color: rgba(20, 35, 41, 0.85);
    font-size: 0.85rem;
    line-height: 1.5;
}

.info-box .icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    color: var(--clr-info);
}

/* Same layout as .info-box, but amber-toned - reserved for things worth
   actually pausing on (e.g. a logo/color choice that could make a code
   unscannable), not just general context. */
.warning-box {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    background: rgba(233, 196, 106, 0.1);
    border: 1px solid rgba(233, 196, 106, 0.3);
    color: rgba(70, 46, 12, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
}

.warning-box .icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    color: var(--clr-warning);
}

/* Section Order list - a hidden (but not removed) section stays in place
   so it can still be reordered, just visually muted to make its state
   obvious at a glance. */
.section-hidden {
    opacity: 0.55;
}

/* Pro-plan feature gating - a consistent small gold badge marking anything
   that's locked behind the Pro plan, used next to labels/buttons/nav links
   for a Free-plan user. */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(233, 196, 106, 0.12);
    border: 1px solid rgba(233, 196, 106, 0.35);
    color: var(--clr-warning-dark);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.pro-badge .icon {
    width: 0.8rem;
    height: 0.8rem;
}

/* Settings' "Current Plan" badge when on Pro - solid orange rather than the
   green success color, so it doesn't read as a generic "good/active"
   status the way bg-success does elsewhere. Distinct from the gold used by
   .pro-badge/bg-warning above, since a subscription-status badge (Past
   due, etc.) can sit right next to this one on the same page. */
.badge-plan-pro {
    background-color: var(--palette-orange);
    color: #fff;
}

/* Business is the top tier - navy (already the "premium/dark" brand color
   used for header chrome) reads as a step up from Pro's orange without
   introducing a 6th color outside the constrained brand palette. */
.badge-plan-business {
    background-color: var(--palette-navy);
    color: #fff;
}

/* A field disabled for being Pro-only still needs to read as "locked", not
   just grayed out like any other disabled input. */
.pro-locked-field {
    background-color: #f2f4f7 !important;
    cursor: not-allowed;
}

/* Login page */
.login-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-light) 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.login-card .card-body {
    padding: 2.5rem 2.25rem;
}

/* Dashboard footer - center the copyright line instead of CoreUI's default
   space-between (which just left-aligns a single child). */
.footer {
    justify-content: center;
    text-align: center;
}

.login-logo {
    max-width: 190px;
    margin: 0 auto 1.25rem;
    display: block;
}

.login-title {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #1b1b1b;
}

.login-subtitle {
    color: #8a8a8a;
    font-size: 0.9rem;
}

/* "Back to Home" link above the login/register card - sits directly on the
   navy gradient .login-shell background, so it needs light text rather than
   the default link color. */
.back-to-home-link {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-decoration: none;
}

.back-to-home-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Month picker (bootstrap-datepicker, months view) - restyle the default
   Bootstrap-3-era popup to match the rest of the UI's cards/buttons. */
.datepicker.dropdown-menu {
    padding: 0.75rem;
    border: 1px solid #eef1f5;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(20, 38, 71, 0.12);
}

.datepicker table {
    width: 100%;
}

.datepicker table tr td,
.datepicker table tr th {
    font-family: var(--cui-font-sans-serif);
    border-radius: 0.5rem;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    font-weight: 600;
    color: var(--brand);
}

.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover {
    background: rgba(42, 157, 143, 0.08);
}

.datepicker-months .month {
    padding: 0.55rem 0;
    transition: background-color 0.15s ease;
}

.datepicker-months .month:hover {
    background: rgba(42, 157, 143, 0.08);
}

.datepicker-months .month.focused {
    background: rgba(42, 157, 143, 0.12);
}

.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active {
    background-color: var(--brand);
    background-image: none;
    border-color: var(--brand);
    box-shadow: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: rgba(233, 196, 106, 0.18);
    background-image: none;
}

/* Plan-choice cards (sign-up page, Danger Zone) - a light highlight on the
   whole card when its radio is checked, not just the tiny radio dot itself,
   so the selected plan/option is obvious at a glance. */
.plan-option {
    align-items: flex-start;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Inside a flex row, an <input type="radio"> has no intrinsic flex-basis of
   its own - when a sibling (like the Pro card's "Popular" badge) demands
   more width than the row has, the browser shrinks/stretches the radio dot
   instead of wrapping text, making it look squished or oval rather than a
   clean circle. Every geometry-related property is pinned explicitly here
   (rather than relying on Bootstrap's .form-check-input defaults) so it
   stays a perfect circle no matter what its siblings do. */
.plan-option input[type="radio"] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0.15rem 0 0;
    padding: 0;
}

.plan-option:hover {
    border-color: var(--brand-light);
}

.plan-option:has(input:checked) {
    border-color: var(--brand);
    background: rgba(42, 157, 143, 0.05);
}

.plan-option ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.plan-option ul li {
    line-height: 1.45;
    margin-bottom: 0.3rem;
}

.plan-option ul li:last-child {
    margin-bottom: 0;
}

/* ===========================================================================
   Public landing page (resources/views/public/landing.blade.php)
   =========================================================================== */
.landing-nav {
    padding: 1.25rem 1.5rem;
}

.landing-nav .brand-logo {
    height: 40px;
}

.landing-hero {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-light) 100%);
    color: #fff;
    padding: 4rem 1.5rem 6rem;
}

.landing-hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.landing-hero .lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin: 0 auto 2rem;
}

.landing-hero .btn-light {
    font-weight: 700;
}

.landing-section {
    padding: 4rem 1.5rem;
}

/* Same "grey section, white bordered container" rhythm as the dashboard -
   applied to the sections that actually hold a grid of white cards
   (feature cards, pricing cards), so those cards read as containers sitting
   on the section rather than blending into a plain white page. */
.landing-section-tinted {
    background: var(--section-bg);
}

.landing-section h2 {
    font-weight: 700;
    color: var(--palette-navy);
    text-align: center;
    margin-bottom: 0.5rem;
}

.landing-section .section-sub {
    text-align: center;
    color: rgba(44, 56, 74, 0.72);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.feature-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    height: 100%;
}

.feature-card .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: rgba(42, 157, 143, 0.08);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--palette-navy);
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: rgba(44, 56, 74, 0.72);
    font-size: 0.92rem;
    margin-bottom: 0;
}

.forever-banner {
    background: rgba(42, 157, 143, 0.08);
    border: 1px solid rgba(42, 157, 143, 0.25);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.forever-banner h3 {
    color: var(--palette-navy);
    font-weight: 700;
}

.pricing-toggle {
    display: inline-flex;
    background: #eef1f5;
    border-radius: 999px;
    padding: 0.25rem;
    margin: 0 auto 2rem;
    gap: 0.25rem;
}

.pricing-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(44, 56, 74, 0.65);
    cursor: pointer;
}

.pricing-toggle-btn.is-active {
    background: #fff;
    color: var(--palette-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pricing-toggle-save {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand);
    background: rgba(42, 157, 143, 0.12);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.pricing-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
}

.pricing-card.featured {
    border: 2px solid var(--brand);
    box-shadow: 0 1rem 2.5rem rgba(42, 157, 143, 0.15);
}

.pricing-card .price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--palette-navy);
}

.pricing-card .price small {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(44, 56, 74, 0.6);
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.pricing-card ul li {
    padding: 0.4rem 0;
    color: #333;
}

.showcase-frame {
    position: relative;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(38, 70, 83, 0.08);
    overflow: hidden;
}

.showcase-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 1.75rem;
    min-height: 420px;
}

.showcase-slide.is-active {
    display: flex;
}

.showcase-slide img {
    max-width: 100%;
    max-height: 380px;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
}

.showcase-caption {
    text-align: center;
    margin-top: 1.25rem;
}

.showcase-caption-title {
    display: block;
    font-weight: 700;
    color: var(--palette-navy);
    font-size: 1.1rem;
}

.showcase-caption-text {
    display: block;
    color: rgba(44, 56, 74, 0.72);
    font-size: 0.92rem;
    margin-top: 0.25rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.showcase-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.showcase-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(38, 70, 83, 0.18);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.showcase-dot.is-active {
    background: var(--brand);
    transform: scale(1.2);
}

.showcase-dot:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .showcase-slide {
        min-height: 340px;
        padding: 1.5rem 1rem;
    }

    .showcase-slide img {
        max-height: 300px;
    }
}

.landing-footer {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: 0.85rem;
}

.landing-footer a {
    color: rgba(255, 255, 255, 0.9);
}

.qr-generator-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 1rem;
    padding: 2rem;
}

/* On a phone-width screen, .landing-section's 1.5rem side padding plus this
   card's own 2rem eats ~56px off each side before any form field even
   starts - cramped enough that the per-link URL input (already splitting a
   row with its label field) was down to a barely-typeable width. Trimming
   both paddings here gives every field back real room without touching
   spacing at any width that actually had space to spare. */
@media (max-width: 576px) {
    .landing-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .qr-generator-card {
        padding: 1.25rem;
    }

    /* "Landing Page"/"Single Link" (plus the selected side's checkmark)
       still wrapped to two lines at this width even after the padding trim
       above - each half of the toggle is only ~45vw here, not enough room
       for the default 1rem button text. Trimming font-size/padding (rather
       than shortening the labels further, which would cost clarity) is
       enough on its own to keep both to one line. */
    .method-toggle .btn {
        font-size: 0.85rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .method-toggle .btn-check:checked + .btn::before {
        margin-right: 0.25rem;
    }
}

/* Stripe.com-style slowly drifting color field, background only - the
   existing static linear-gradient on these two elements stays as the base
   tone (so there's never a bare gap), with all 5 brand palette colors
   layered on top as large blurred blobs that independently drift via
   transform (cheap to animate, no layout/paint thrashing). Everything
   real (nav links, hero text, the login card) gets position+z-index so it
   reliably paints above the blobs regardless of source order. */
.landing-hero,
.login-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landing-hero > *,
.login-shell > * {
    position: relative;
    z-index: 1;
}

.landing-hero::before,
.landing-hero::after,
.login-shell::before,
.login-shell::after {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: 0;
    filter: blur(70px);
    pointer-events: none;
}

.landing-hero::before,
.login-shell::before {
    background-image:
        radial-gradient(32% 32% at 18% 24%, var(--palette-teal) 0%, transparent 70%),
        radial-gradient(36% 36% at 88% 12%, var(--palette-navy) 0%, transparent 70%),
        radial-gradient(34% 34% at 22% 88%, var(--palette-coral) 0%, transparent 70%);
    animation: brand-drift-a 24s ease-in-out infinite alternate;
}

.landing-hero::after,
.login-shell::after {
    background-image:
        radial-gradient(30% 30% at 80% 82%, var(--palette-gold) 0%, transparent 70%),
        radial-gradient(34% 34% at 55% 45%, var(--palette-orange) 0%, transparent 70%);
    animation: brand-drift-b 29s ease-in-out infinite alternate;
    opacity: 0.85;
}

@keyframes brand-drift-a {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(7%, -5%) scale(1.1); }
    100% { transform: translate(-6%, 6%) scale(0.94); }
}

@keyframes brand-drift-b {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-7%, 6%) scale(1.06); }
    100% { transform: translate(6%, -7%) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero::before,
    .landing-hero::after,
    .login-shell::before,
    .login-shell::after {
        animation: none;
    }
}

/* Deliberately not reusing .section-sub here - that class centers itself
   with max-width + margin:0 auto for the page's other (centered) sections,
   which left a visible gap on the left even with text-align overridden to
   left, since the block itself stayed centered rather than the text inside
   it. This card's intro text is left-aligned to match its heading. */
.qr-generator-intro {
    color: rgba(44, 56, 74, 0.72);
}

.qr-result-panel {
    text-align: center;
    border-top: 1px solid #eef1f5;
    padding-top: 1.5rem;
}

.qr-result-panel img {
    border: 1px solid #eef1f5;
    border-radius: 0.5rem;
}

.qr-upsell-banner {
    background: rgba(42, 157, 143, 0.06);
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.9rem;
}

/* Guest QR generator: shown once a guest has already generated a code, then
   keeps editing the form - a gentle amber nudge (not a red error, nothing
   actually went wrong) that the code/preview they can already see is now
   stale until they generate again. Distinct from .qr-upsell-banner's teal so
   it doesn't read as another promo. */
.qr-stale-notice {
    background: rgba(233, 196, 106, 0.18);
    color: #8a6d23;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Bare clickable icon (not a full button) for copying the tracking link
   next to where it's displayed - deliberately no background/border so it
   reads as an inline affordance on the code text, not a competing button. */
.copy-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.2rem;
    color: var(--clr-secondary);
    cursor: pointer;
    line-height: 1;
}

.copy-link-icon .icon {
    width: 1rem;
    height: 1rem;
}

.copy-link-icon:hover {
    color: var(--brand);
}

/* Plain icon+text navigation link (Back, Cancel) - deliberately NOT a
   button (no fill, no border, no padding box) even though it sits right
   next to real buttons, so it visually reads as "leave/go back" rather
   than a same-weight action alongside Save/Submit. */
.icon-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand);
    text-decoration: none;
}

.icon-text-link:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

.icon-text-link .icon {
    width: 1rem;
    height: 1rem;
}

/* Cancel next to a form's primary submit (Generate QR Code / Save Changes) -
   red rather than brand-teal so it doesn't read as just another neutral
   action, and pulled further away with margin (beyond the row's own gap) so
   a mis-click reaching for the submit button next to it lands on empty
   space instead. */
.icon-text-link-danger {
    color: var(--clr-danger);
    margin-right: 1.5rem;
}

.icon-text-link-danger:hover {
    color: var(--clr-danger-dark);
}

/* Emoji picker (multi-link Label field, every plan including the signed-out
   guest generator - only the SIZE of the emoji set differs by plan) - a
   small popover of curated emoji anchored under its row's button, not a
   full picker library. Needs position:relative on .link-emoji-wrap (set
   inline via the d-flex/position-relative classes on the wrapping div in
   the Blade/JS templates) so the menu anchors to that specific row, not
   the page. */
.emoji-picker-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    margin-top: 0.25rem;
    width: 224px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(20, 38, 71, 0.12);
    padding: 0.4rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.15rem;
    /* 44 emoji options at 6/row runs ~8 rows - cap the height and scroll
       rather than let the popover grow tall enough to run off-screen. */
    max-height: 220px;
    overflow-y: auto;
}

.emoji-picker-menu .emoji-option {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.4rem 0;
    border-radius: 0.4rem;
    cursor: pointer;
}

.emoji-picker-menu .emoji-option:hover {
    background: rgba(42, 157, 143, 0.08);
}

/* Bulk-action toolbar (QR Codes index) - Activate/Deactivate/Delete stay
   visible but greyed out until at least one row checkbox is selected. The
   :disabled rule only ever applies while the button is actually disabled,
   so it can't fight with .btn-success/.btn-warning/.btn-danger over which
   rule wins by source order - JS toggles both the `disabled` attribute and
   the color class together, so the grey look and the real color are never
   in effect at the same time. */
.bulk-action-btn:disabled {
    background-color: #ccd0d6;
    border-color: #ccd0d6;
    color: #6c757d;
    opacity: 1;
    cursor: not-allowed;
}

/* Password show/hide toggle (login, sign-up, Settings). Only one eye icon
   ships in the free CoreUI set, so both states reuse it and communicate via
   the tooltip text plus a brand-colored tint while the password is
   currently shown, rather than swapping glyphs. */
.password-toggle-btn {
    background: transparent;
    border: none;
    color: #8a93a2;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-btn:hover,
.password-toggle-btn.is-visible {
    color: var(--brand);
}

/* Standalone .form-control password fields (sign-up, Settings) aren't
   inside a Bootstrap .input-group, so the toggle is overlaid on the input
   itself instead of added as a trailing input-group segment. */
.password-field-wrap {
    position: relative;
}

.password-field-wrap .form-control {
    padding-right: 2.5rem;
}

.password-field-wrap .password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
}

/* Inside a Bootstrap .input-group (login page), render as a trailing
   segment the same size as the existing prepended icon box. */
.input-group .password-toggle-btn {
    padding: 0 0.85rem;
}