/* Settings Component Styles - Adapted from BarberShop Console styling */
/* Plain CSS (no Tailwind @apply) for tattoodotshop dark theme */

/* ========================================
   CSS Custom Properties for Settings
   ======================================== */
:root {
    /* Settings-specific colors (dark theme defaults) */
    --settings-bg: #0f172a;
    --settings-surface: #1e293b;
    --settings-border: #334155;

    /* Primary blue scale */
    --settings-primary-50: #eff6ff;
    --settings-primary-100: #dbeafe;
    --settings-primary-200: #bfdbfe;
    --settings-primary-300: #93c5fd;
    --settings-primary-400: #60a5fa;
    --settings-primary-500: #3b82f6;
    --settings-primary-600: #2563eb;
    --settings-primary-700: #1d4ed8;
    --settings-primary-800: #1e40af;
    --settings-primary-900: #1e3a8a;

    /* Slate scale */
    --settings-slate-50: #f8fafc;
    --settings-slate-100: #f1f5f9;
    --settings-slate-200: #e2e8f0;
    --settings-slate-300: #cbd5e1;
    --settings-slate-400: #94a3b8;
    --settings-slate-500: #64748b;
    --settings-slate-600: #475569;
    --settings-slate-700: #334155;
    --settings-slate-800: #1e293b;
    --settings-slate-900: #0f172a;

    /* Status colors */
    --settings-green-100: #dcfce7;
    --settings-green-300: #86efac;
    --settings-green-700: #15803d;
    --settings-green-900-30: rgba(20, 83, 45, 0.3);

    --settings-amber-100: #fef3c7;
    --settings-amber-300: #fcd34d;
    --settings-amber-700: #b45309;
    --settings-amber-900-30: rgba(120, 53, 15, 0.3);

    --settings-red-50: #fef2f2;
    --settings-red-100: #fee2e2;
    --settings-red-200: #fecaca;
    --settings-red-300: #fca5a5;
    --settings-red-400: #f87171;
    --settings-red-600: #dc2626;
    --settings-red-700: #b91c1c;
    --settings-red-800: #991b1b;
    --settings-red-900-20: rgba(127, 29, 29, 0.2);
}

/* ========================================
   Base Page Styles
   ======================================== */
.settings-page {
    background-color: var(--settings-bg);
    min-height: 100vh;
}

/* ========================================
   Card Styles
   ======================================== */
.console-card {
    background-color: var(--settings-surface);
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid var(--settings-border);
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

/* Legacy settings-card alias */
.settings-card {
    background-color: var(--settings-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--settings-border);
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ========================================
   Navigation Items
   ======================================== */
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.15s ease, color 0.15s ease;
    color: var(--settings-slate-400);
    text-decoration: none;
    cursor: pointer;
}

.settings-nav-item:hover {
    background-color: var(--settings-slate-800);
}

.settings-nav-item.active {
    background-color: rgba(30, 58, 138, 0.2); /* primary-900/20 */
    color: var(--settings-primary-400);
    font-weight: 500; /* font-medium */
}

/* ========================================
   Loading Skeleton
   ======================================== */
.skeleton {
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: var(--settings-slate-700);
    border-radius: 0.25rem; /* rounded */
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Legacy settings-skeleton alias */
.settings-skeleton {
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: var(--settings-slate-700);
    border-radius: 0.25rem;
}

/* ========================================
   Section Headers
   ======================================== */
.settings-section-header {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem;
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    margin-bottom: 1.5rem; /* mb-6 */
}

/* ========================================
   Form Labels & Helper Text
   ======================================== */
.settings-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    font-weight: 500; /* font-medium */
    color: var(--settings-slate-300);
    margin-bottom: 0.5rem; /* mb-2 */
}

.settings-helper {
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    color: var(--settings-slate-400);
    margin-top: 0.25rem; /* mt-1 */
}

/* ========================================
   Toggle Rows
   ======================================== */
.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem; /* p-4 */
    background-color: var(--settings-slate-800);
    border-radius: 0.5rem; /* rounded-lg */
}

.settings-toggle-label {
    font-weight: 500; /* font-medium */
    color: #ffffff;
}

.settings-toggle-description {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    color: var(--settings-slate-400);
}

/* ========================================
   Danger Zone
   ======================================== */
.settings-danger-zone {
    background-color: var(--settings-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--settings-red-800, #991b1b);
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.settings-danger-zone h2 {
    color: var(--settings-red-400);
}

.settings-danger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem; /* p-4 */
    background-color: var(--settings-red-900-20);
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid var(--settings-red-800);
}

/* ========================================
   Theme Preview Cards
   ======================================== */
.settings-theme-preview {
    padding: 1rem; /* p-4 */
    border-radius: 0.75rem; /* rounded-xl */
    border-width: 2px;
    border-style: solid;
    transition: all 0.15s ease;
    cursor: pointer;
}

.settings-theme-preview.selected {
    border-color: var(--settings-primary-500);
    box-shadow: 0 0 0 2px var(--settings-primary-800);
}

.settings-theme-preview:not(.selected) {
    border-color: var(--settings-slate-700);
}

.settings-theme-preview:not(.selected):hover {
    border-color: var(--settings-slate-600);
}

/* ========================================
   Accent Color Picker
   ======================================== */
.settings-accent-btn {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 9999px; /* rounded-full */
    transition: all 0.15s ease;
    border: none;
    cursor: pointer;
}

.settings-accent-btn:hover {
    transform: scale(1.05);
}

.settings-accent-btn.selected {
    box-shadow: 0 0 0 2px var(--settings-bg), 0 0 0 4px currentColor;
    transform: scale(1.1);
}

/* ========================================
   Fade-in Animation
   ======================================== */
.settings-fade-in {
    animation: settings2FadeIn 0.3s ease-in-out;
}

@keyframes settings2FadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Badge Styles
   ======================================== */
.settings-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem; /* px-2.5 py-0.5 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    font-weight: 500; /* font-medium */
}

.settings-badge-primary {
    background-color: rgba(30, 58, 138, 0.3); /* primary-900/30 */
    color: var(--settings-primary-300);
}

.settings-badge-success {
    background-color: var(--settings-green-900-30);
    color: var(--settings-green-300);
}

.settings-badge-warning {
    background-color: var(--settings-amber-900-30);
    color: var(--settings-amber-300);
}

.settings-badge-danger {
    background-color: var(--settings-red-900-20);
    color: var(--settings-red-300);
}

/* ========================================
   Form Inputs (Radzen dark mode overrides)
   ======================================== */
/* These carry !important on purpose, and the reason is specificity, not laziness.
   Radzen's default-base.css is linked AFTER settings.css in App.razor and styles
   inputs through selectors like

       .rz-textbox:not(:disabled):not(.rz-state-disabled):focus

   which scores 0,4,0 — higher than any reasonable scoped override here. Its focus
   rule sets background-color to var(--rz-input-focus-background-color), which
   resolves to the base background: WHITE.

   So the field turned white the moment it was focused, while color:#ffffff from
   this file still applied to the text — white on white, exactly and only while
   someone was typing in it. Unfocused fields stayed dark, which is why one field
   on a form could look fine while its neighbour looked broken.

   Out-specifying Radzen by lengthening selectors is an arms race that the next
   Radzen upgrade wins, so the background and foreground of an input in a dark
   settings surface are declared non-negotiable instead. */
.settings-page .rz-textbox,
.settings-page .rz-textarea,
.settings-page .rz-dropdown,
.settings-page .rz-textbox:hover,
.settings-page .rz-textarea:hover,
.settings-page .rz-dropdown:hover,
.settings-page .rz-textbox:focus,
.settings-page .rz-textarea:focus,
.settings-page .rz-dropdown:focus {
    background-color: var(--settings-slate-800) !important;
    color: #ffffff !important;
}

.settings-page .rz-textbox,
.settings-page .rz-textarea,
.settings-page .rz-dropdown {
    border-color: var(--settings-slate-700);
}

.settings-page .rz-textbox:focus,
.settings-page .rz-textarea:focus,
.settings-page .rz-dropdown:focus {
    border-color: var(--settings-primary-500) !important;
    box-shadow: 0 0 0 1px var(--settings-primary-500) !important;
}

/* Placeholders inherit the same problem when Radzen restyles them on focus. */
.settings-page .rz-textbox::placeholder,
.settings-page .rz-textarea::placeholder {
    color: var(--settings-slate-400) !important;
}

/* Chrome/Edge/Safari: when the browser pre-fills a field, it forces its own
   background and text colour through the autofill pseudo-class, which a plain
   background-color cannot override. The workaround is an inset box-shadow in the
   dark surface colour plus -webkit-text-fill-color.

   Three changes from the first attempt, which did not hold on the onboarding form:

   1. :autofill as well as :-webkit-autofill. The unprefixed pseudo-class is the
      standard one; relying on the prefixed form alone is a bet on a vendor alias.
   2. Spread 1000px, not 30px. The spread has to exceed the element in BOTH
      dimensions, and these inputs are full-width — the standard snippet uses a
      deliberately absurd value for exactly this reason.
   3. Not scoped to .settings-page. settings.css is only linked by pages that want
      this dark treatment, so the narrower scope bought nothing and one container
      without the class silently disabled the whole rule.

   Worth knowing when testing: Chrome does not RENDER an autofilled value until the
   user interacts with the page. A pre-filled field therefore looks empty while
   already carrying the autofill background — which reads as "white box, invisible
   text" and is what made this look like a text-colour bug. */
.rz-textbox:-webkit-autofill,
.rz-textbox:-webkit-autofill:hover,
.rz-textbox:-webkit-autofill:focus,
.rz-textbox:-webkit-autofill:active,
.rz-textbox:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--settings-slate-800) inset !important;
    box-shadow: 0 0 0 1000px var(--settings-slate-800) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s; /* defeat WebKit's autofill animation */
}

/* ========================================
   Switch Styling
   ======================================== */
.settings-page .rz-switch.rz-switch-checked {
    background-color: var(--settings-primary-600);
}

/* ========================================
   Social Media Input Prefix
   ======================================== */
.settings-input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem; /* px-3 */
    background-color: var(--settings-slate-700);
    border: 1px solid var(--settings-slate-600);
    border-right: 0;
    border-radius: 0.375rem 0 0 0.375rem; /* rounded-l-md */
    color: var(--settings-slate-400);
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
}

/* ========================================
   Subscription Card
   ======================================== */
.settings-subscription-card {
    padding: 1rem; /* p-4 */
    background-color: rgba(30, 58, 138, 0.2); /* primary-900/20 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid var(--settings-primary-800);
}

/* ========================================
   Activity Log
   ======================================== */
.settings-activity-row {
    transition: background-color 0.15s ease;
}

.settings-activity-row:hover {
    background-color: var(--settings-slate-800);
}

/* ========================================
   Dialog Container
   ======================================== */
.change-plan-dialog-container {
    max-width: 700px !important;
    min-width: 320px !important;
}

@media (max-width: 640px) {
    .change-plan-dialog-container {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* Blazor's FocusOnNavigate (Routes.razor) focuses the <h1> after every navigation, and the browser
   draws a focus ring around it — a box around the page heading on load. Salon and barber suppress
   this in their site.css; tattoo links no such file, so every heading showed it. */
h1:focus,
h2:focus,
h3:focus,
h4:focus {
    outline: none;
}

/* Radzen's default primary is orange (--rz-primary: #ff6d41), so every RadzenButton
   ButtonStyle.Primary — Add Location, Add Service, Save Changes — rendered orange instead of
   tattoo violet. app.css sets these under .rz-dark-theme, a class this app never applies.
   Declared on `body`, not `:root`: Radzen's stylesheet is linked AFTER this one and defines the
   same variables on :root, so an override there loses the cascade. Buttons inherit from body. */
body {
    --rz-primary: #7c3aed;
    --rz-primary-light: #8b5cf6;
    --rz-primary-lighter: rgba(124, 58, 237, 0.16);
    --rz-primary-dark: #6d28d9;
    --rz-primary-darker: #5b21b6;
}

/* Account menu in the site header. Plain <details> so it works on statically rendered pages
   (ShopsListPage has no render mode); the Radzen menu it replaced could never open there. */
.site-profile { position: relative; }
.site-profile__trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.site-profile__trigger::-webkit-details-marker { display: none; }
.site-profile__avatar { height: 32px; width: 32px; border-radius: 50%; display: block; }
.site-profile__menu {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 1000;
    min-width: 13rem; padding: 0.25rem; border-radius: 0.5rem;
    background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.site-profile__item {
    display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem;
    color: #1e293b; text-decoration: none; font-size: 0.875rem; white-space: nowrap;
}
.site-profile__item:hover { background: #f1f5f9; }
.site-profile__item--logout { border-top: 1px solid #e2e8f0; margin-top: 0.25rem; }
.site-profile__signin {
    display: inline-block; padding: 0.4rem 0.9rem; border-radius: 0.375rem;
    background: var(--rz-primary, #7c3aed); color: #fff; text-decoration: none; font-size: 0.875rem;
}
.site-profile__signin:hover { background: var(--rz-primary-darker, #6d28d9); color: #fff; }
@media (max-width: 768px) { .site-profile__console { display: none; } }

/* Outlined and text Radzen buttons paint their label in --rz-primary. On the
   settings page's dark slate cards the brand violet lands at 2.6:1 against
   slate-800 — the "Generate" button on the business page was the one that gave
   it away. Lift the label (and the outline) to violet-400 (5.4:1 there) on
   those surfaces only; solid buttons keep the brand violet behind white text.

   The .rz-shade-default class is load-bearing. Radzen sets this colour from
   .rz-button.rz-variant-outlined.rz-primary.rz-shade-default — four classes,
   the same specificity a .settings-page-prefixed three-class selector has — and
   default-base.css is linked after this file, so the tie goes to Radzen on
   source order. Matching its shade class puts us one class ahead. Same trap as
   the --rz-primary override at the top of this block, which had to move off
   :root onto body for exactly this reason. */
.settings-page .rz-button.rz-variant-outlined.rz-primary.rz-shade-default,
.settings-page .rz-button.rz-variant-text.rz-primary.rz-shade-default {
    color: #a78bfa;
    border-color: #a78bfa;
}

.settings-page .rz-button.rz-variant-outlined.rz-primary.rz-shade-default:hover,
.settings-page .rz-button.rz-variant-text.rz-primary.rz-shade-default:hover {
    color: #c4b5fd;
    border-color: #c4b5fd;
}

/* ========================================
   Radzen dialogs in dark mode
   ========================================

   Radzen renders a dialog into its own host at the END of <body>, outside the
   page's .settings-page container. So every dark-surface rule in this file —
   all of which are scoped to .settings-page — stops at the dialog boundary and
   the dialog keeps Radzen's default WHITE background.

   The contents, meanwhile, do go dark: the markup uses Tailwind variants like
   text-slate-700 dark:text-slate-300, and `dark` is on the document element, so
   the labels switch to light grey. Light grey on white is the result — the
   "Add Location" dialog shipped with labels that were nearly unreadable.

   Keyed on .dark rather than .settings-page precisely because the dialog is not
   inside the page. !important for the same reason as the inputs above: Radzen's
   own selectors are more specific and load later. */
.dark .rz-dialog,
.dark .rz-dialog-content,
.dark .rz-dialog-titlebar {
    background-color: var(--settings-slate-900) !important;
    color: #ffffff !important;
}

.dark .rz-dialog-titlebar,
.dark .rz-dialog-content {
    border-color: var(--settings-slate-700) !important;
}

.dark .rz-dialog-title,
.dark .rz-dialog-titlebar-icon {
    color: #ffffff !important;
}

/* Inputs inside a dialog need the same treatment the page-level rule gives
   them, and cannot inherit it through .settings-page for the reason above. */
.dark .rz-dialog .rz-textbox,
.dark .rz-dialog .rz-textarea,
.dark .rz-dialog .rz-dropdown,
.dark .rz-dialog .rz-textbox:hover,
.dark .rz-dialog .rz-textbox:focus,
.dark .rz-dialog .rz-textarea:focus,
.dark .rz-dialog .rz-dropdown:focus {
    background-color: var(--settings-slate-800) !important;
    border-color: var(--settings-slate-700) !important;
    color: #ffffff !important;
}

.dark .rz-dialog .rz-textbox::placeholder,
.dark .rz-dialog .rz-textarea::placeholder {
    color: var(--settings-slate-400) !important;
}

/* ========================================
   Radzen POPUPS in dark mode
   ========================================

   Third surface with the same root cause as the dialog block above: Radzen
   renders autocomplete panels, dropdown panels and multiselect panels into a
   popup host at the END of <body>, outside .settings-page. The panel keeps
   Radzen's white background while the item text picks up the app's dark-mode
   colour, so suggestions render as near-white on white — the address
   autocomplete listed five matches that were effectively invisible.

   Written for the whole family rather than the one control that was reported,
   because the next popup to be noticed would have had exactly this bug. */
.dark .rz-autocomplete-panel,
.dark .rz-dropdown-panel,
.dark .rz-multiselect-panel,
.dark .rz-datepicker,
.dark .rz-autocomplete-items,
.dark .rz-dropdown-items,
.dark .rz-multiselect-items {
    background-color: var(--settings-slate-800) !important;
    border-color: var(--settings-slate-700) !important;
    color: #ffffff !important;
}

.dark .rz-autocomplete-list-item,
.dark .rz-dropdown-item,
.dark .rz-multiselect-item {
    background-color: transparent !important;
    color: #ffffff !important;
}

.dark .rz-autocomplete-list-item:hover,
.dark .rz-dropdown-item:hover,
.dark .rz-multiselect-item:hover,
.dark .rz-autocomplete-list-item.rz-state-highlight,
.dark .rz-dropdown-item.rz-state-highlight,
.dark .rz-multiselect-item.rz-state-highlight {
    background-color: var(--settings-slate-700) !important;
    color: #ffffff !important;
}

/* ========================================
   Radzen NUMERIC / spinner inputs in dark mode
   ========================================

   RadzenNumeric does not render .rz-textbox — it renders a .rz-spinner wrapper
   around .rz-spinner-input — so the textbox rules above missed it entirely and
   Duration, Price and Deposit amount stayed white inside an otherwise dark
   "Add Service" dialog.

   Enumerated by RENDERED class rather than by control name, and covering the
   whole input family in one place, because the previous three fixes each
   caught one surface and left the next one broken. Checkboxes and radios are
   excluded: forcing a background on those destroys their own styling. */
.settings-page .rz-numeric,
.settings-page .rz-spinner,
.settings-page .rz-spinner-input,
.settings-page .rz-mask,
.settings-page .rz-datepicker-input,
.dark .rz-dialog .rz-numeric,
.dark .rz-dialog .rz-spinner,
.dark .rz-dialog .rz-spinner-input,
.dark .rz-dialog .rz-mask,
.dark .rz-dialog .rz-datepicker-input,
.settings-page .rz-spinner-input:focus,
.dark .rz-dialog .rz-spinner-input:focus {
    background-color: var(--settings-slate-800) !important;
    border-color: var(--settings-slate-700) !important;
    color: #ffffff !important;
}

/* Catch-all for anything in this family the class list above misses. Typed
   inputs only — a checkbox or radio must keep its native rendering. */
.dark .rz-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark .rz-dialog textarea {
    background-color: var(--settings-slate-800) !important;
    color: #ffffff !important;
}

/* The spinner arrows ship bright Radzen blue, which reads as an error state
   against this palette. */
.settings-page .rz-spinner-up,
.settings-page .rz-spinner-down,
.dark .rz-dialog .rz-spinner-up,
.dark .rz-dialog .rz-spinner-down {
    background-color: var(--settings-slate-700) !important;
    color: #ffffff !important;
    border-color: var(--settings-slate-700) !important;
}