/*
 * GadVerify design system, centralized Bootstrap-component overrides.
 *
 * Loaded after any Bootstrap CSS (and after this project's own per-page
 * stylesheets) in every layout, so it wins on cascade order without
 * needing !important for equally-specific selectors. Every color here
 * comes from the --gv-* tokens defined in partials/theme-vars.blade.php, 
 * never a literal hex value, so changing the primary color from the
 * admin Platform Settings screen propagates through every component
 * below with no template edits.
 *
 * Covers both real Bootstrap (auth/register.blade.php loads the actual
 * bootstrap.min.css for its wizard JS) and this project's own hand-written
 * CSS files that use the same class names (app-shell.css, admin-shell.css,
 * public-shell.css, etc.), both get the same visual system from this one
 * file rather than two separate overrides.
 */

:root {
    --gv-radius: 10px;
    --gv-radius-sm: 8px;
    --gv-control-height: 44px;
    --gv-border: #E2E8F0;
    --gv-focus-ring: color-mix(in srgb, var(--gv-primary) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--gv-control-height);
    padding: 0 20px;
    border-radius: var(--gv-radius);
    font-weight: 650;
    font-size: 14px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--gv-focus-ring);
}

/* Links previously had no visible focus state at all (keyboard nav had
   nothing to show where focus was); buttons and form fields already did. */
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gv-focus-ring);
    border-radius: 3px;
}

/* A brief shake draws the eye to a form that was just rejected, paired
   with the existing global prefers-reduced-motion override below, which
   already zeroes every animation-duration, including this one. */
.alert-danger.gv-shake,
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    animation: gv-shake 0.4s ease;
}

@keyframes gv-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: gv-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-loading::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.5);
    }
}

@keyframes gv-spin {
    to { transform: rotate(360deg); }
}

.btn-primary {
    background: var(--gv-primary);
    border-color: var(--gv-primary);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--gv-primary-dark); border-color: var(--gv-primary-dark); }

.btn-secondary {
    background: #fff;
    border-color: var(--gv-border);
    color: var(--gv-navy);
}
.btn-secondary:hover:not(:disabled) { background: var(--gv-background); border-color: var(--gv-muted); }

.btn-success {
    background: var(--gv-success);
    border-color: var(--gv-success);
    color: #fff;
}
.btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--gv-success) 85%, black); }

.btn-warning {
    background: var(--gv-warning);
    border-color: var(--gv-warning);
    color: #1a1200;
}
.btn-warning:hover:not(:disabled) { background: color-mix(in srgb, var(--gv-warning) 85%, black); }

/* -----------------------------------------------------------------------
   Device scanner button, DeviceScanner.attach() (device-scanner.js)
   inserts this next to any identifier field across the app (POS search,
   purchase receiving, public verification). Previously it fell back to a
   plain inline-styled button with no visual weight, easy to miss next to
   a plain text field. This is the shared, properly-designed default; a
   page can still layer its own positioning (see pos-create.css) on top
   via the same class.
----------------------------------------------------------------------- */

.device-scan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--gv-radius-sm);
    border: 1.5px solid var(--gv-primary);
    background: color-mix(in srgb, var(--gv-primary) 8%, white);
    color: var(--gv-primary);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.device-scan-btn i {
    font-size: 15px;
}

.device-scan-btn:hover {
    background: var(--gv-primary);
    color: #fff;
}

/* -----------------------------------------------------------------------
   Quick-links grid, shared by the business dashboard (NavigationService)
   and the admin dashboard (AdminNavigationService), both of which now
   have an "everything you can do, one click away" section instead of
   just stat cards. One shared component so both stay visually consistent
   and a future change only has to happen once.
----------------------------------------------------------------------- */

.quick-links-section {
    margin-bottom: 28px;
}

.quick-links-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gv-muted);
    margin: 0 0 12px;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius);
    background: var(--gv-surface);
    text-decoration: none;
    color: var(--gv-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.quick-link-card:hover {
    border-color: var(--gv-primary);
    box-shadow: 0 4px 14px rgba(11, 18, 32, 0.08);
    transform: translateY(-1px);
}

.quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gv-primary) 12%, white);
    color: var(--gv-primary);
    font-size: 19px;
}

.quick-link-label {
    font-weight: 650;
    font-size: 13.5px;
    line-height: 1.3;
}

.btn-danger {
    background: var(--gv-danger);
    border-color: var(--gv-danger);
    color: #fff;
}
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--gv-danger) 85%, black); }

.btn-info {
    background: var(--gv-violet);
    border-color: var(--gv-violet);
    color: #fff;
}
.btn-info:hover:not(:disabled) { background: color-mix(in srgb, var(--gv-violet) 85%, black); }

.btn-outline-primary { background: transparent; border-color: var(--gv-primary); color: var(--gv-primary); }
.btn-outline-primary:hover:not(:disabled) { background: var(--gv-primary); color: #fff; }

.btn-outline-secondary { background: transparent; border-color: var(--gv-border); color: var(--gv-navy); }
.btn-outline-secondary:hover:not(:disabled) { background: var(--gv-background); }

.btn-outline-danger { background: transparent; border-color: var(--gv-danger); color: var(--gv-danger); }
.btn-outline-danger:hover:not(:disabled) { background: var(--gv-danger); color: #fff; }

.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }

/* -----------------------------------------------------------------------
   Forms
----------------------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
textarea,
select {
    width: 100%;
    min-height: var(--gv-control-height);
    padding: 0 14px;
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-text);
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea { padding: 12px 14px; min-height: 100px; }

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gv-primary);
    box-shadow: 0 0 0 4px var(--gv-focus-ring);
}

.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--gv-danger);
}
.form-control.is-invalid:focus,
input.is-invalid:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gv-danger) 20%, transparent);
}

.form-control.is-valid,
input.is-valid {
    border-color: var(--gv-violet);
}

.invalid-feedback {
    color: var(--gv-danger);
    font-size: 13px;
    margin-top: 4px;
}

.valid-feedback {
    color: var(--gv-violet);
    font-size: 13px;
    margin-top: 4px;
}

label,
.form-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--gv-navy);
    margin-bottom: 6px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gv-primary);
    cursor: pointer;
}

.form-switch .form-check-input,
input[type="checkbox"].form-switch {
    width: 36px;
    height: 20px;
}

.input-group {
    display: flex;
    align-items: stretch;
}
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-top-left-radius: var(--gv-radius-sm); border-bottom-left-radius: var(--gv-radius-sm); }
.input-group .form-control:last-child { border-top-right-radius: var(--gv-radius-sm); border-bottom-right-radius: var(--gv-radius-sm); }

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--gv-background);
    border: 1px solid var(--gv-border);
    color: var(--gv-muted);
    font-size: 14px;
}

input[type="file"] {
    border: 1px dashed var(--gv-border);
    border-radius: var(--gv-radius-sm);
    padding: 10px 14px;
    background: var(--gv-background);
    min-height: auto;
}

/* -----------------------------------------------------------------------
   Dropdowns / navs / pagination
----------------------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius);
    box-shadow: 0 12px 32px rgba(11, 18, 32, 0.12);
    padding: 6px;
}

.dropdown-item {
    border-radius: var(--gv-radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--gv-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gv-background);
    color: var(--gv-primary);
}
.dropdown-item.active {
    background: var(--gv-primary);
    color: #fff;
}

.nav-link {
    color: var(--gv-muted);
    font-weight: 600;
}
.nav-link:hover { color: var(--gv-primary); }
.nav-link.active { color: var(--gv-primary); }

.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
}
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: var(--gv-radius-sm);
    border: 1px solid var(--gv-border);
    color: var(--gv-text);
    text-decoration: none;
}
.page-item.active .page-link {
    background: var(--gv-primary);
    border-color: var(--gv-primary);
    color: #fff;
}
.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------
   Alerts / badges / toasts
----------------------------------------------------------------------- */

.alert {
    border-radius: var(--gv-radius);
    padding: 14px 18px;
    border: 1px solid transparent;
    font-size: 14px;
}
.alert-success,
.alert.alert-success {
    background: color-mix(in srgb, var(--gv-success) 12%, white);
    border-color: color-mix(in srgb, var(--gv-success) 35%, white);
    color: color-mix(in srgb, var(--gv-success) 55%, black);
}
.alert-danger {
    background: color-mix(in srgb, var(--gv-danger) 10%, white);
    border-color: color-mix(in srgb, var(--gv-danger) 30%, white);
    color: color-mix(in srgb, var(--gv-danger) 60%, black);
}
.alert-warning {
    background: color-mix(in srgb, var(--gv-warning) 14%, white);
    border-color: color-mix(in srgb, var(--gv-warning) 35%, white);
    color: color-mix(in srgb, var(--gv-warning) 55%, black);
}
.alert-info,
.alert-primary {
    background: color-mix(in srgb, var(--gv-primary) 10%, white);
    border-color: color-mix(in srgb, var(--gv-primary) 30%, white);
    color: var(--gv-primary-dark);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}
.badge-active,
.badge-success,
.badge.bg-success {
    background: color-mix(in srgb, var(--gv-success) 16%, white);
    color: color-mix(in srgb, var(--gv-success) 55%, black);
}
.badge-beta,
.badge-info,
.badge.bg-info,
.badge.bg-primary {
    background: color-mix(in srgb, var(--gv-primary) 14%, white);
    color: var(--gv-primary-dark);
}
.badge-inactive,
.badge.bg-secondary {
    background: #eef1f5;
    color: var(--gv-muted);
}
.badge-maintenance,
.badge.bg-warning {
    background: color-mix(in srgb, var(--gv-warning) 18%, white);
    color: color-mix(in srgb, var(--gv-warning) 60%, black);
}
.badge.bg-danger {
    /* !important: Bootstrap's own .bg-danger utility sets its background
       with !important, which otherwise wins regardless of selector
       specificity -- silently leaving this rule's red text sitting on
       Bootstrap's solid red background instead of this light tint,
       making the label unreadable (confirmed on the inventory "Stolen"
       and "Low Stock" badges, subscription-plan "Retired" status, and
       admin platform-history "Failed" status, everywhere this class
       combination is used). */
    background: color-mix(in srgb, var(--gv-danger) 14%, white) !important;
    color: var(--gv-danger);
}

.toast {
    border-radius: var(--gv-radius);
    border: 1px solid var(--gv-border);
    box-shadow: 0 12px 32px rgba(11, 18, 32, 0.14);
}

/* -----------------------------------------------------------------------
   Cards / modals / offcanvas
----------------------------------------------------------------------- */

.card {
    /* A whisper of brand tint at the top of every card, fading to the
       plain surface color -- deliberately too subtle to affect the
       readability of a table/form inside it. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--gv-primary) 3%, var(--gv-surface)) 0%, var(--gv-surface) 160px);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius);
}

.modal-content {
    border-radius: var(--gv-radius);
    border: none;
    box-shadow: 0 24px 60px rgba(11, 18, 32, 0.25);
}
.modal-header,
.modal-footer {
    border-color: var(--gv-border);
}

.offcanvas {
    background: var(--gv-surface);
}

/* -----------------------------------------------------------------------
   Tables
----------------------------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th {
    text-align: left;
    color: var(--gv-muted);
    font-weight: 650;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gv-border);
}
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gv-border);
    color: var(--gv-text);
}
.table-primary td { background: color-mix(in srgb, var(--gv-primary) 8%, white); }
.table-success td { background: color-mix(in srgb, var(--gv-success) 8%, white); }
.table-warning td { background: color-mix(in srgb, var(--gv-warning) 10%, white); }
.table-danger td { background: color-mix(in srgb, var(--gv-danger) 8%, white); }

/* -----------------------------------------------------------------------
   Accordion / list group
----------------------------------------------------------------------- */

.accordion-item {
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius);
    overflow: hidden;
}
.accordion-button {
    background: var(--gv-surface);
    color: var(--gv-text);
    font-weight: 650;
}
.accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--gv-primary) 8%, white);
    color: var(--gv-primary-dark);
}
.accordion-button:focus {
    box-shadow: 0 0 0 4px var(--gv-focus-ring);
}

.list-group-item {
    border-color: var(--gv-border);
    color: var(--gv-text);
}
.list-group-item.active {
    background: var(--gv-primary);
    border-color: var(--gv-primary);
    color: #fff;
}

/* -----------------------------------------------------------------------
   Loading / progress
----------------------------------------------------------------------- */

.progress {
    height: 8px;
    border-radius: 999px;
    background: var(--gv-background);
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--gv-navy), var(--gv-primary), var(--gv-violet));
}

.gv-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid var(--gv-border);
    border-top-color: var(--gv-primary);
    animation: gv-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .gv-spinner {
        animation: none;
        border-top-color: var(--gv-border);
    }
}

/* -----------------------------------------------------------------------
   Offline sync status (Phase 6 POS)
----------------------------------------------------------------------- */

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--gv-radius-sm);
    font-size: 13px;
    font-weight: 650;
    margin-bottom: 14px;
}

.sync-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sync-status-online {
    background: color-mix(in srgb, var(--gv-success) 14%, white);
    color: color-mix(in srgb, var(--gv-success) 55%, black);
}
.sync-status-online::before { background: var(--gv-success); }

.sync-status-weak {
    background: color-mix(in srgb, var(--gv-warning) 16%, white);
    color: color-mix(in srgb, var(--gv-warning) 55%, black);
}
.sync-status-weak::before { background: var(--gv-warning); }

.sync-status-offline {
    background: color-mix(in srgb, var(--gv-danger) 12%, white);
    color: var(--gv-danger);
}
.sync-status-offline::before { background: var(--gv-danger); }

.sync-pending {
    background: var(--gv-background);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--gv-muted);
    margin-bottom: 14px;
}

/* -----------------------------------------------------------------------
   Breadcrumbs (partials/breadcrumbs.blade.php) -- a neutral, data-dense
   surface per theme-vars.blade.php's own convention ("never on data-heavy
   surfaces"), not the gradient. Deliberately plain text + a subtle
   separator, not another colored pill/badge competing with real content.
----------------------------------------------------------------------- */
.gv-breadcrumbs {
    margin-bottom: 16px;
    font-size: 13px;
}
.gv-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
}
.gv-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gv-breadcrumbs li:not(:first-child)::before {
    content: '/';
    color: var(--gv-muted);
}
.gv-breadcrumbs a {
    color: var(--gv-muted);
    text-decoration: none;
}
.gv-breadcrumbs a:hover {
    color: var(--gv-primary);
    text-decoration: underline;
}
.gv-breadcrumbs li:last-child span {
    color: var(--gv-navy);
    font-weight: 650;
}

/* -----------------------------------------------------------------------
   "What's New" banner (partials/whats-new-banner.blade.php) -- one of the
   rare "sparingly used" surfaces theme-vars.blade.php calls out for the
   full gradient, a single small dismissible card, never a full-width
   hero, so it reads as a highlight, not another primary CTA competing
   with the page's own content.
----------------------------------------------------------------------- */
.gv-whats-new {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--gv-gradient-brand, linear-gradient(135deg, #0B1220, #2563EB, #7C3AED));
    color: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.gv-whats-new-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.gv-whats-new-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.5;
}
.gv-whats-new-body strong {
    font-size: 14px;
}
.gv-whats-new-body span {
    color: rgba(255, 255, 255, 0.85);
}
.gv-whats-new-body a {
    color: #fff;
    font-weight: 650;
    text-decoration: underline;
    align-self: flex-start;
}
.gv-whats-new-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 6px;
    font-size: 13px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.gv-whats-new-dismiss:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}