/*
 * Cuốn Studio brand stylesheet: the colour tokens as CSS variables, and the brand look of the Filament panels
 * (/admin, /dai-ly) and the error pages. A plain committed file (no build step); BrandTheme registers it after
 * Filament's own styles, so these rules win. Colours come only from the variables below; the values mirror
 * App\Support\BrandTokens (BrandTokensTest keeps them equal). Filament's own palettes (--primary-*, --gray-*, ...)
 * come from BrandTokens::palettes().
 * Sources: Cuốn Studio brand page ("05 Màu", "06 Chữ") and the app design system (8 px containers, 4 px controls).
 */

:root {
    --cs-background: #FBF8FC;
    --cs-surface: #FFFFFF;
    --cs-surface-alt: #FDF7EE;
    --cs-surface-tint: #F3ECF6;
    --cs-border: #E4D9EA;
    --cs-text-strong: #2B1E5C;
    --cs-text-muted: #5B5178;
    --cs-link: #6A3FB5;
    --cs-accent: #6A3FB5;
    --cs-accent-hover: #7A50C4;
    --cs-accent-pressed: #5C35A0;
    --cs-on-accent: #FFFFFF;
    --cs-primary-from: #B03A7E;
    --cs-primary-to: #3F63C9;
    --cs-highlight: #E8A33C;
    --cs-highlight-ink: #8A5A00;
    --cs-highlight-soft: #FFF4DB;
    --cs-thistle: #CDB4DB;
    --cs-pink: #FFAFCC;
    --cs-sky: #A2D2FF;
    --cs-success: #1F7A4D;
    --cs-success-soft: #E6F6EE;
    --cs-warning: #9A4D00;
    --cs-warning-soft: #FFEBD6;
    --cs-danger: #B3261E;
    --cs-danger-soft: #FDE7E9;
    --cs-dark-background: #140D2C;
    --cs-dark-surface: #1E1440;
    --cs-dark-text: #F3ECF6;
    --cs-dark-text-muted: #B9AECB;
    --cs-dark-accent: #C3A6F2;
    --cs-dark-on-accent: #1E1440;

    --cs-border-strong: #8E7AA6;
    --cs-page-wash: linear-gradient(180deg, #FBF8FC 0%, #FFF4F8 45%, #F0F6FF 100%);
    --cs-gradient: linear-gradient(90deg, var(--cs-primary-from), var(--cs-primary-to));
    --cs-pastel: linear-gradient(120deg, #FFE4EE 0%, #EEE4F7 50%, #DDEEFF 100%);
    --cs-mica: radial-gradient(900px 600px at 0% 0%, rgb(255 175 204 / 0.22), transparent 70%),
        radial-gradient(700px 600px at 100% 100%, rgb(162 210 255 / 0.2), transparent 70%);
    --cs-mica-dark: radial-gradient(900px 600px at 0% 0%, rgb(110 70 130 / 0.3), transparent 70%),
        radial-gradient(700px 600px at 100% 100%, rgb(46 58 86 / 0.26), transparent 70%);
    --cs-shadow-1: 0 2px 4px rgb(43 30 92 / 0.04);
    --cs-shadow-2: 0 8px 16px rgb(43 30 92 / 0.1);
    --cs-font: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
    --cs-font-wordmark: 'Baloo 2', 'Be Vietnam Pro', ui-sans-serif, sans-serif;

    /* Filament (Tailwind) radii: 8 px for containers, 4 px for controls. */
    --radius-xl: 0.5rem;
    --radius-lg: 0.25rem;
    --radius-md: 0.25rem;
    --radius-sm: 0.125rem;
}

/* Dark mode: the lavender greys become the app's deep indigo surfaces. Text and borders keep their roles. */
html.dark {
    --gray-950: var(--cs-dark-background);
    --gray-900: var(--cs-dark-surface);
    --gray-800: #2A1F52;
    --gray-700: #3A2F66;
    --gray-600: #554A7E;
    --gray-500: #8A80A6;
    --gray-400: var(--cs-dark-text-muted);
    --gray-300: #D6CDE2;
    --gray-200: var(--cs-border);
    --gray-100: var(--cs-surface-tint);
    --gray-50: var(--cs-background);
}

/* ---------- Panels ---------- */

.fi-body {
    background: var(--cs-mica), var(--cs-background);
    background-attachment: fixed;
    color: var(--cs-text-strong);
}

html.dark .fi-body {
    background: var(--cs-mica-dark), var(--cs-dark-background);
    background-attachment: fixed;
    color: var(--cs-dark-text);
}

.fi-topbar {
    box-shadow: 0 1px 0 var(--cs-border);
}

html.dark .fi-topbar {
    background-color: var(--cs-dark-surface);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}

.fi-header-heading {
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* Navigation: active item gets the accent bar of the app's NavigationViewItem. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    border-radius: 2px;
    background: var(--cs-accent);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    background: var(--cs-dark-accent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--cs-accent);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--cs-dark-accent);
}

/* Cards, sections, tables: white surfaces, soft lavender shadow. */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    box-shadow: var(--cs-shadow-1), 0 0 0 1px var(--cs-border);
}

html.dark .fi-section:not(.fi-section-not-contained),
html.dark .fi-ta-ctn,
html.dark .fi-wi-stats-overview-stat {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.fi-ta-table > thead > tr {
    background-color: var(--cs-surface-tint);
}

.fi-ta-table > thead > tr > th {
    background-color: transparent;
}

html.dark .fi-ta-table > thead > tr {
    background-color: rgb(255 255 255 / 0.04);
}

/* Status pills (the app's license status chips are fully rounded). */
.fi-badge {
    border-radius: 9999px;
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.02em;
}

/* Logo (sidebar, topbar and login): symbol, wordmark in Baloo 2, panel area as a quiet chip. */
.cs-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    white-space: nowrap;
}

.cs-logo-symbol {
    height: 100%;
    width: auto;
    display: block;
}

.cs-logo-wordmark {
    font-family: var(--cs-font-wordmark);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1;
    padding-top: 0.15em;
    color: var(--cs-text-strong);
}

.cs-logo-area {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: var(--cs-surface-tint);
    color: var(--cs-text-muted);
}

html.dark .cs-logo-wordmark {
    color: var(--cs-dark-text);
}

html.dark .cs-logo-area {
    background: rgb(255 255 255 / 0.08);
    color: var(--cs-dark-text-muted);
}

/* Login (simple pages): the brand's pastel cover behind a white sign-in card. */
.fi-simple-layout {
    background: var(--cs-pastel);
    position: relative;
    overflow: hidden;
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    right: -140px;
    top: -160px;
    width: 620px;
    height: 620px;
    background: url('spiral.svg') center / contain no-repeat;
    opacity: 0.35;
    pointer-events: none;
}

html.dark .fi-simple-layout {
    background: var(--cs-mica-dark), var(--cs-dark-background);
}

html.dark .fi-simple-layout::before {
    opacity: 0.08;
}

.fi-simple-main-ctn {
    position: relative;
}

.fi-simple-main {
    box-shadow: var(--cs-shadow-2), 0 0 0 1px var(--cs-border);
    border-radius: 0.75rem;
}

html.dark .fi-simple-main {
    background-color: var(--cs-dark-surface);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.fi-simple-header-heading {
    letter-spacing: -0.015em;
}

/* Empty lists: the mascot instead of the round icon. */
.fi-ta-empty-state-icon-bg:has(img.fi-icon) {
    background: none;
    width: auto;
    height: auto;
    padding: 0;
}

.fi-ta-empty-state-icon-bg img.fi-icon {
    width: 112px;
    height: 112px;
}

/* ---------- Error pages (resources/views/errors) ---------- */

.cs-error {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cs-page-wash);
    color: var(--cs-text-strong);
    font-family: var(--cs-font);
    -webkit-font-smoothing: antialiased;
}

.cs-error a {
    color: var(--cs-link);
}

.cs-error a:hover {
    color: var(--cs-text-strong);
}

.cs-error :focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

.cs-error-header {
    height: 64px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.cs-error-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    text-decoration: none;
    color: var(--cs-text-strong) !important;
}

.cs-error-brand img {
    display: block;
    width: 30px;
    height: 30px;
}

.cs-error-brand span {
    font-family: var(--cs-font-wordmark);
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    padding-top: 3px;
}

.cs-error-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(20px, 4vw, 40px) 80px;
}

.cs-error-card {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.cs-error-mascot {
    width: clamp(160px, 30vw, 220px);
    height: auto;
    display: block;
}

.cs-error-code {
    font-family: var(--cs-font-wordmark);
    font-weight: 800;
    font-size: 20px;
    color: var(--cs-highlight-ink);
    background: var(--cs-highlight-soft);
    padding: 2px 12px;
    border-radius: 9999px;
}

.cs-error-title {
    margin: 0;
    font-family: var(--cs-font-wordmark);
    font-size: clamp(32px, 5vw, 44px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cs-error-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cs-text-muted);
    text-wrap: pretty;
}

.cs-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.cs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.cs-error a.cs-button-primary {
    background: var(--cs-gradient);
    color: var(--cs-on-accent);
}

.cs-error a.cs-button-primary:hover {
    color: var(--cs-on-accent);
    box-shadow: 0 8px 28px rgb(205 180 219 / 0.55);
}

.cs-error a.cs-button-secondary {
    background: var(--cs-surface);
    border: 1.5px solid var(--cs-border-strong);
    color: var(--cs-text-strong);
}

.cs-error a.cs-button-secondary:hover {
    background: var(--cs-surface-tint);
}

.cs-error-help {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--cs-text-muted);
}