/* ============================================================
   Firma Elettronica Avanzata — Design System
   Studio Tenca / CE4U S.r.l.
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ============================================================
   1. CSS Custom Properties (Token)
   ============================================================ */
:root {
    /* ── Typography ── */
    --ds-font-face: 'Open Sans', -apple-system, 'Segoe UI', sans-serif, Arial;
    --ds-font-size: 13px;
    --ds-font-size-small: 12px;
    --ds-line-height: 1.538;

    /* ── Brand Colors (Navy Blue) ── */
    --color-brand-50:  #f0f4f8;
    --color-brand-100: #d9e2ec;
    --color-brand-200: #bcccdc;
    --color-brand-300: #9fb3c8;
    --color-brand-400: #627d98;
    --color-brand-500: #245580;
    --color-brand-600: #1a3a5c;
    --color-brand-700: #143050;
    --color-brand-800: #102a43;
    --color-brand-900: #0a1929;

    /* ── Neutral Warm Grays ── */
    --color-neutral-50:  #FAFAF9;
    --color-neutral-100: #F5F5F3;
    --color-neutral-200: #E8E7E4;
    --color-neutral-300: #D5D4D0;
    --color-neutral-400: #A9A8A3;
    --color-neutral-500: #797873;
    --color-neutral-600: #5C5B57;
    --color-neutral-700: #434240;
    --color-neutral-800: #2D2D2B;
    --color-neutral-900: #1A1A19;

    /* ── DocSpace Accent ── */
    --ds-accent:             #4781D1;
    --ds-accent-hover:       #4074BC;
    --ds-accent-element:     #5299E0;
    --ds-accent-light:       #E4ECF8;
    --ds-accent-light-hover: #BED3EF;
    --ds-accent-light-text:  #316DAA;

    /* ── DocSpace Backgrounds ── */
    --ds-bg-main:   #FFFFFF;
    --ds-bg-hover:  #F3F4F4;
    --ds-bg-dark:   #ECEEF1;
    --ds-bg-darker: #DFE2E3;
    --ds-bg-plain:  #F8F9F9;

    /* ── DocSpace Text ── */
    --ds-text-main:         #333333;
    --ds-text-max-contrast: #657077;
    --ds-text-medium:       #555F65;
    --ds-text-muted:        #A3A9AE;

    /* ── DocSpace Borders ── */
    --ds-border-light:  #ECEEF1;
    --ds-border-medium: #D0D5DA;
    --ds-border-heavy:  #A3A9AE;

    /* ── Semantic Status ── */
    --ds-error:        #F24724;
    --ds-error-bg:     #FFE7E7;
    --ds-error-text:   #8A0000;
    --ds-warning:      #ED7309;
    --ds-warning-bg:   #FFEEC5;
    --ds-warning-text: #664700;
    --ds-success:      #35AD17;
    --ds-success-bg:   #D8F3DA;
    --ds-success-text: #005416;
    --ds-info:         #4781D1;
    --ds-info-bg:      #D5F1FA;
    --ds-info-text:    #0066AC;

    /* ── Shadows ── */
    --shadow-card:              0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --shadow-card-hover:        0 4px 12px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.06);
    --shadow-premium:           0 1px 2px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.03),
                                0 4px 8px rgba(0,0,0,0.03), 0 8px 16px rgba(0,0,0,0.03);
    --shadow-glow-brand:        0 0 20px rgba(26, 58, 92,0.15), 0 0 40px rgba(26, 58, 92,0.05);
    --shadow-glow-brand-strong: 0 0 20px rgba(26, 58, 92,0.25), 0 4px 16px rgba(26, 58, 92,0.15);
    --ds-shadow-dropdown:       0px 12px 28px rgba(4,15,27,0.12), 0px 2px 6px rgba(4,15,27,0.04);
    --ds-shadow-modal:          0px 20px 40px rgba(4,15,27,0.12), 0px 4px 12px rgba(4,15,27,0.04);

    /* ── Layout ── */
    --ds-header-height:  64px;
    --ds-clickable-area: 36px;

    /* ── Radius ── */
    --ds-radius:         6px;
    --ds-radius-large:   8px;
    --ds-radius-rounded: 12px;
    --ds-radius-pill:    100px;

    /* ── Transitions ── */
    --ds-transition-fast:   150ms ease;
    --ds-transition-medium: 200ms ease;
    --ds-transition-slow:   300ms ease;
    --ds-ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   2. DaisyUI Theme Override — [data-theme="docuseal"]
   ============================================================ */
[data-theme="docuseal"] {
    /* Force white base background — override DaisyUI's beige */
    background-color: #FFFFFF !important;

    --p:  210 65% 30%;          /* primary: #1a3a5c */
    --pf: 210 55% 25%;         /* primary-focus: #143050 */
    --pc: 0 0% 100%;           /* primary-content: white */

    --s:  210 58% 32%;         /* secondary: #245580 */
    --sf: 210 50% 28%;         /* secondary-focus: #1a3a5c */
    --sc: 0 0% 100%;           /* secondary-content: white */

    --a:  210 50% 36%;         /* accent: #2a6090 */
    --af: 210 45% 32%;
    --ac: 0 0% 100%;

    --n:  60 2% 10%;           /* neutral: #1A1A19 */
    --nf: 60 1% 17%;
    --nc: 40 6% 95%;           /* neutral-content: #F5F5F3 */

    --b1: 0 0% 100%;          /* base-100: white */
    --b2: 60 3% 97%;          /* base-200: #F8F9F9 */
    --b3: 216 14% 93%;        /* base-300: #ECEEF1 */
    --bc: 0 1% 20%;           /* base-content: #333333 */

    --in:  213 56% 55%;       /* info: #4781D1 */
    --inc: 0 0% 100%;
    --su:  108 75% 38%;       /* success: #35AD17 */
    --suc: 0 0% 100%;
    --wa:  28 88% 48%;        /* warning: #ED7309 */
    --wac: 0 0% 100%;
    --er:  10 89% 55%;        /* error: #F24724 */
    --erc: 0 0% 100%;

    --rounded-box:   12px;
    --rounded-btn:   8px;
    --rounded-badge: 100px;
    --tab-radius:    6px;
    --animation-btn: 200ms;
    --animation-input: 200ms;
    --btn-focus-scale: 0.97;
}

/* ============================================================
   3. Global Typography
   ============================================================ */
html, body {
    font-family: var(--ds-font-face) !important;
    font-size: var(--ds-font-size);
    line-height: var(--ds-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-50);
}

h1, .text-4xl {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--color-neutral-900);
}

h2, .text-2xl {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.15px;
    line-height: 1.35;
    color: var(--color-neutral-800);
}

h3, .text-xl {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    color: var(--color-neutral-800);
}

h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.538;
}

/* ============================================================
   4. Selection
   ============================================================ */
::selection {
    background-color: rgba(26, 58, 92, 0.15);
    color: var(--color-neutral-900);
}

/* ============================================================
   5. Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ============================================================
   6. Navbar / Header
   ============================================================ */
.gestce-navbar {
    background: linear-gradient(135deg, #1a3a5c 0%, #245580 50%, #2a6090 100%);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(26, 58, 92, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gestce-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gestce-navbar a:not(.gestce-new-doc-btn),
.gestce-navbar span,
.gestce-navbar label.cursor-pointer span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.gestce-navbar a:not(.gestce-new-doc-btn):hover {
    color: #ffffff !important;
}

/* Fallback for old navbar structure (non-custom pages) */
body > div.max-w-6xl.mx-auto:first-of-type,
div.max-w-6xl.mb-4.mx-auto {
    max-width: 100% !important;
    background: linear-gradient(135deg, #1a3a5c 0%, #245580 50%, #2a6090 100%);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(26, 58, 92, 0.15);
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ── "Nuovo Documento" button in navbar ── */
.gestce-new-doc-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    padding: 6px 14px !important;
    border-radius: var(--ds-radius-large) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.gestce-new-doc-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: white !important;
}

.gestce-new-doc-btn:active {
    transform: scale(0.96) translateY(0) !important;
    box-shadow: none !important;
}

.gestce-new-doc-btn svg {
    stroke-width: 2;
    transition: transform 200ms var(--ds-ease-bounce);
}

.gestce-new-doc-btn:hover svg {
    transform: translateY(-1px);
}

/* Brand name in navbar */
.gestce-brand-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: -0.3px;
}

.text-2xl.font-bold {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: -0.3px;
}

/* Navbar links */
.text-lg.font-medium,
a.font-medium.text-lg {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 150ms ease, background-color 150ms ease;
}

a.font-medium.text-lg:hover {
    color: #ffffff !important;
}

/* Avatar in navbar — blue theme */
.gestce-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 150ms ease !important;
}

.gestce-avatar:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   7. Buttons — Brand (base-button / btn-neutral)
   ============================================================ */
.base-button,
.btn-neutral {
    background: linear-gradient(135deg, #245580, #1a3a5c) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 10px 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 36px !important;
    height: auto !important;
}

.base-button:hover,
.btn-neutral:hover {
    background: linear-gradient(135deg, #1a3a5c, #143050) !important;
    box-shadow: var(--shadow-glow-brand) !important;
    transform: translateY(-1px);
}

.base-button:active,
.btn-neutral:active {
    transform: scale(0.97) translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ── White / Outline Button ── */
.white-button,
.btn-outline {
    background: white !important;
    color: var(--ds-text-main) !important;
    border: 1px solid var(--ds-border-medium) !important;
    border-radius: var(--ds-radius) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    min-height: 36px !important;
    padding: 0 20px !important;
    transition: all 200ms ease !important;
}

.white-button:hover,
.btn-outline:hover {
    background: var(--ds-bg-hover) !important;
    border-color: var(--ds-border-heavy) !important;
    color: var(--ds-text-main) !important;
}

/* ── Error / Destructive Button ── */
.btn-error {
    background: var(--ds-error) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ds-radius) !important;
    font-weight: 600;
    font-size: 13px;
}
.btn-error:hover {
    background: #d93d1e !important;
}

/* Global button press feedback */
button:active, [role="button"]:active {
    transform: scale(0.97);
    transition: transform 80ms ease;
}

/* ============================================================
   8. Form Inputs
   ============================================================ */
.base-input,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"],
select.select,
.base-select,
.base-textarea,
textarea.textarea {
    font-family: var(--ds-font-face) !important;
    background: white !important;
    border: 1px solid var(--ds-border-medium) !important;
    border-radius: var(--ds-radius) !important;
    color: var(--ds-text-main) !important;
    font-size: 13px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

textarea.textarea,
.base-textarea {
    padding: 8px 12px !important;
    min-height: auto !important;
}

.base-input:focus,
.input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-brand-400) !important;
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1),
                0 0 20px rgba(26, 58, 92, 0.05) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ds-text-muted) !important;
}

/* Label */
label.label,
.label-text {
    color: var(--ds-text-max-contrast) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Checkbox */
.base-checkbox,
.checkbox {
    border-radius: 4px !important;
    border-color: var(--ds-border-medium) !important;
}
.checkbox:checked {
    border-color: var(--color-brand-500) !important;
    background-color: var(--color-brand-500) !important;
}

/* ============================================================
   9. Cards (content containers)
   ============================================================ */
.card:not(template-builder .card),
.bg-base-100.rounded-2xl:not(template-builder *),
.bg-base-100.rounded-xl:not(template-builder *),
div[class*="rounded-2xl"][class*="shadow"]:not(template-builder *),
div[class*="rounded-xl"][class*="shadow"]:not(template-builder *) {
    background: white !important;
    border-radius: var(--ds-radius-rounded) !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}


.card:hover,
div[class*="rounded-2xl"][class*="shadow"]:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   10. Content Area
   ============================================================ */

/* Force dark text on content area headings (not navbar, not login hero) */
div.max-w-6xl.mx-auto.px-4.mb-8 h1:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 h2:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 h3:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 h4:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 .text-4xl:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 .text-3xl:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 .text-2xl:not(.login-hero *),
div.max-w-6xl.mx-auto.px-4.mb-8 .text-xl:not(.login-hero *) {
    color: var(--color-neutral-900) !important;
}

/* Login hero text must be white */
.login-hero h1,
.login-hero p {
    color: #ffffff !important;
}

/* btn-neutral inside content area: keep white text on blue button */
div.max-w-6xl.mx-auto.px-4.mb-8 .btn-neutral {
    color: white !important;
}

/* Navbar brand text must stay white */
.gestce-navbar .gestce-brand-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

div.max-w-6xl.mx-auto.px-4.mb-8 {
    max-width: 1200px;
    padding: 20px 24px !important;
    animation: gestce-fadeInUp 0.3s ease-out;
}

/* ============================================================
   11. Tables
   ============================================================ */
table thead,
table thead tr {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6) !important;
}

table th {
    padding: 12px 24px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-neutral-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

table td {
    padding: 16px 24px !important;
}

table tbody tr {
    transition: all 150ms ease;
}

table tbody tr:hover {
    background-color: rgba(26, 58, 92, 0.03) !important;
}

table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

/* ============================================================
   12. Flash Messages
   ============================================================ */
#flash {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    height: auto !important;
    pointer-events: none;
}

#flash > div {
    pointer-events: auto;
    padding-top: 8px !important;
}

#flash .rounded-2xl,
#flash > div > div {
    border-radius: var(--ds-radius-large) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-left: 3px solid var(--ds-info) !important;
    background: var(--ds-info-bg) !important;
    box-shadow: var(--ds-shadow-dropdown) !important;
    animation: gestce-fadeInDown 0.3s ease-out;
}

#flash .stroke-info ~ div span {
    color: var(--ds-info-text) !important;
}

#flash .stroke-error ~ div span {
    color: var(--ds-error-text) !important;
}

#flash .bg-base-200 {
    background: var(--ds-info-bg) !important;
}

/* Error flash */
#flash:has(.stroke-error) .rounded-2xl,
#flash:has(.stroke-error) > div > div {
    border-left-color: var(--ds-error) !important;
    background: var(--ds-error-bg) !important;
}

/* ============================================================
   13. Dropdown Menu
   ============================================================ */
.dropdown-content {
    border-radius: var(--ds-radius-rounded) !important;
    background: white !important;
    border: 1px solid var(--ds-border-light) !important;
    box-shadow: var(--ds-shadow-dropdown) !important;
    animation: gestce-fadeInDown 0.2s ease-out;
    overflow: hidden;
}

.dropdown-content li a,
.dropdown-content li button {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 10px !important;
    min-height: 40px !important;
    border-radius: var(--ds-radius-large) !important;
    transition: background 150ms ease, padding-left 200ms ease !important;
}

.dropdown-content li a:hover,
.dropdown-content li button:hover {
    background: var(--ds-bg-hover) !important;
    padding-left: 14px !important;
}

/* Avatar button in header (dropdown) */
.gestce-navbar .dropdown label.cursor-pointer {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 150ms ease !important;
}

.gestce-navbar .dropdown label.cursor-pointer:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Dropdown text should be dark (dropdown itself has white bg) */
.gestce-navbar .dropdown-content a,
.gestce-navbar .dropdown-content span,
.gestce-navbar .dropdown-content button,
.gestce-navbar .dropdown-content label {
    color: var(--ds-text-main) !important;
}

/* ============================================================
   14. Modal / Dialog (Turbo Modal)
   ============================================================ */
turbo-modal .modal-box,
.modal-box {
    background: white !important;
    border-radius: var(--ds-radius-large) !important;
    box-shadow: var(--ds-shadow-modal) !important;
    animation: gestce-scaleIn 0.2s ease-out;
}

/* ============================================================
   15. Login Page Styling
   ============================================================ */
body.gestce-login {
    background: #0f172a !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(82,153,224,0.08), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(56,120,200,0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(30,64,120,0.05), transparent 60%) !important;
    min-height: 100vh;
}

body.gestce-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.4) 100%),
        linear-gradient(135deg, rgba(15,23,42,0.3) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Login card container */
.gestce-login-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--ds-radius-large) !important;
    box-shadow: 0 8px 40px rgba(4, 15, 27, 0.12),
                0 2px 8px rgba(4, 15, 27, 0.06) !important;
    padding: 40px 44px !important;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: gestce-fadeInScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Login title */
.gestce-login-card h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--color-neutral-900) !important;
    margin-bottom: 24px;
}

/* Login submit button */
.gestce-login-card .base-button,
.gestce-login-card .btn-neutral {
    background: linear-gradient(135deg, #5299E0, #4781D1, #5299E0) !important;
    background-size: 200% 200% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--ds-radius) !important;
    width: 100%;
}

.gestce-login-card .base-button:hover,
.gestce-login-card .btn-neutral:hover {
    animation: gestce-gradientShift 3s ease infinite;
    box-shadow: 0 0 20px rgba(82, 153, 224, 0.3) !important;
}

/* Login input */
.gestce-login-card .base-input,
.gestce-login-card input {
    height: 40px !important;
    min-height: 40px !important;
}

.gestce-login-card .base-input:focus,
.gestce-login-card input:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(82, 153, 224, 0.15),
                0 0 20px rgba(82, 153, 224, 0.05) !important;
}

/* Login footer text */
.gestce-login-footer {
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.gestce-login-footer a {
    color: rgba(255, 255, 255, 0.5) !important;
}

.gestce-login-footer a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================
   16. Logo & Footer
   ============================================================ */
/* Navbar logo image — invert for white-on-dark readability */
.gestce-navbar img[alt="RAVENG"] {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 150ms ease;
}

.gestce-navbar img[alt="RAVENG"]:hover {
    opacity: 1;
}

/* Plain page header (password reset, etc.) */
.gestce-plain-header {
    padding: 16px 24px;
    background: linear-gradient(135deg, #1a3a5c 0%, #245580 50%, #2a6090 100%);
    box-shadow: 0 2px 12px rgba(26, 58, 92, 0.15);
}

.gestce-plain-header img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Footer */
.gestce-footer {
    text-align: center;
    padding: 24px 16px;
    margin-top: 40px;
    border-top: 1px solid var(--ds-border-light);
    font-size: 11px;
    color: var(--ds-text-muted);
    line-height: 1.6;
}

.gestce-footer strong {
    color: var(--ds-text-medium);
    font-weight: 600;
}

.gestce-footer a {
    color: #1a3a5c;
    text-decoration: none;
    font-weight: 500;
}

.gestce-footer a:hover {
    text-decoration: underline;
    color: #245580;
}

/* ============================================================
   17. Animations & Keyframes
   ============================================================ */
@keyframes gestce-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gestce-fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gestce-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gestce-fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gestce-gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gestce-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   18. Transitions on interactive elements
   ============================================================ */
a, button, input, select, textarea {
    transition: color 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease,
                box-shadow 150ms ease,
                opacity 150ms ease;
}

/* ============================================================
   19. Focus Visible (Accessibility)
   ============================================================ */
:focus-visible {
    outline: 2px solid rgba(71, 129, 209, 0.5);
    outline-offset: 2px;
}

/* ============================================================
   20. Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   21. Stagger Animation for lists
   ============================================================ */
.max-w-6xl > div > div,
table tbody tr,
.space-y-2 > div,
.space-y-4 > div {
    animation: gestce-fadeInUp 0.4s ease-out both;
}

.max-w-6xl > div > div:nth-child(1) { animation-delay: 0ms; }
.max-w-6xl > div > div:nth-child(2) { animation-delay: 50ms; }
.max-w-6xl > div > div:nth-child(3) { animation-delay: 100ms; }
.max-w-6xl > div > div:nth-child(4) { animation-delay: 150ms; }
.max-w-6xl > div > div:nth-child(5) { animation-delay: 200ms; }
.max-w-6xl > div > div:nth-child(6) { animation-delay: 250ms; }

/* ============================================================
   22. Tooltip enhancements
   ============================================================ */
.tooltip::before {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(8px);
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: var(--ds-radius) !important;
}

/* ============================================================
   23. Badge overrides
   ============================================================ */
.badge {
    border-radius: 9999px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ============================================================
   24. Toggle (test mode) overrides
   ============================================================ */
.toggle:checked {
    background-color: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
}

/* ============================================================
   25. Links
   ============================================================ */
a:not(.btn):not(.base-button):not(.white-button) {
    transition: color 150ms ease;
}

a:not(.btn):not(.base-button):not(.white-button):hover {
    color: var(--ds-accent);
}

/* ============================================================
   26. Settings page nav items
   ============================================================ */
.menu a, .menu button {
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--ds-radius) !important;
    min-height: 36px !important;
    transition: background 150ms ease, color 150ms ease,
                padding-left 200ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.menu a:hover, .menu button:hover {
    background: var(--ds-bg-dark) !important;
    color: var(--ds-text-main) !important;
}

.menu a.active, .menu a[aria-current="page"] {
    background: var(--ds-accent-light) !important;
    color: var(--ds-accent) !important;
    font-weight: 700 !important;
}

/* ============================================================
   27. Form page (signing) styling
   ============================================================ */
body[data-signing="true"] {
    background: var(--color-neutral-50) !important;
}

/* ============================================================
   28. Responsive adjustments
   ============================================================ */
@media (max-width: 640px) {
    .gestce-login-card {
        padding: 28px 24px !important;
        margin: 16px;
    }

    div.max-w-6xl.mx-auto.px-4.mb-8 {
        padding: 16px 12px !important;
    }
}

/* ============================================================
   29. Print
   ============================================================ */
@media print {
    nav, .navbar, .dropdown, #flash {
        display: none !important;
    }
    body {
        background: white !important;
    }
    div.max-w-6xl {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================================
   30. Template Builder — Complete Redesign
   ============================================================ */

/* ── Kill the #faf7f5 beige background on template builder ── */
/* DaisyUI sets --b1 to a warm beige. Vue also hardcodes #faf7f5 as inline style.
   We override both with direct background-color values. */

/* Page background */
body:has(template-builder),
body.gestce-login:has(template-builder),
html:has(template-builder) {
    background: #F0F2F5 !important;
    background-color: #F0F2F5 !important;
    background-image: none !important;
}

/* The custom element and its Vue-created wrapper */
template-builder,
template-builder > div {
    background-color: #F0F2F5 !important;
}

/* All inner containers — override both CSS variable-based and inline styles */
template-builder > div > div,
template-builder > div > div > div,
template-builder div[style*="background"],
template-builder .title-container,
template-builder #title_container,
template-builder #main_container,
template-builder #pages_container,
template-builder #documents_container ~ div,
template-builder .sticky.bottom-0 {
    background-color: #F8F9FA !important;
}

/* Override any bg-base-100 usage inside template builder */
template-builder .bg-base-100,
template-builder [class*="bg-base"] {
    background-color: #FFFFFF !important;
}

body:has(template-builder) > div.max-w-6xl {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Top bar — glassmorphism header ── */
template-builder #title_container,
template-builder .title-container {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid #E2E5E9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
}

/* Template name */
template-builder .template-name {
    font-family: 'Open Sans', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1A1A19 !important;
    letter-spacing: -0.3px !important;
}

/* ── Save split button ── */
template-builder #save_button_container {
    display: inline-flex !important;
    border-radius: 10px !important;
    overflow: visible !important;
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.25) !important;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

template-builder #save_button_container:hover {
    box-shadow: 0 4px 20px rgba(26, 58, 92, 0.35), 0 0 40px rgba(26, 58, 92, 0.1) !important;
    transform: translateY(-1px) !important;
}

template-builder #save_button_container .base-button,
template-builder #save_button_container label.base-button {
    background: linear-gradient(135deg, #245580, #1a3a5c) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 150ms ease !important;
}

template-builder #save_button_container > button.base-button {
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

template-builder #save_button_container .base-button:hover,
template-builder #save_button_container label.base-button:hover {
    background: linear-gradient(135deg, #1a3a5c, #143050) !important;
    transform: none !important;
}

/* ── Send / Sign Yourself buttons ── */
template-builder .white-button,
template-builder a.btn.btn-outline {
    background: white !important;
    color: #333 !important;
    border: 1.5px solid #D0D5DA !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 200ms ease !important;
}

template-builder .white-button:hover,
template-builder a.btn.btn-outline:hover {
    background: #F3F4F6 !important;
    border-color: #A3A9AE !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* ── Left sidebar (thumbnails) ── */
template-builder #documents_container,
template-builder .overflow-y-auto.overflow-x-hidden.w-52 {
    background: #FFFFFF !important;
    border-right: 1px solid #E8E7E4 !important;
    border-radius: 0 !important;
    padding: 12px !important;
}

/* Thumbnail cards */
template-builder #documents_container img,
template-builder .overflow-y-auto.overflow-x-hidden.w-52 img {
    border-radius: 6px !important;
    border: 1px solid #E2E5E9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    transition: all 200ms ease !important;
}

template-builder #documents_container img:hover,
template-builder .overflow-y-auto.overflow-x-hidden.w-52 img:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #4781D1 !important;
}

/* AGGIUNGI button */
template-builder .add-blank-page-button,
template-builder .btn.btn-outline.w-full {
    background: #FFFFFF !important;
    border: 1.5px dashed #D0D5DA !important;
    border-radius: 8px !important;
    color: #657077 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 200ms ease !important;
}

template-builder .add-blank-page-button:hover,
template-builder .btn.btn-outline.w-full:hover {
    border-color: #245580 !important;
    background: #FFF7F2 !important;
    color: #1a3a5c !important;
}

/* ── Right sidebar (fields panel) ── */
template-builder .sticky.top-0:not(.title-container):not(#title_container) {
    background: #FFFFFF !important;
    border-left: 1px solid #E8E7E4 !important;
}


/* Ensure fields sidebar is not clipped */
template-builder #fields_list_container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 28px !important;
}

/* Submitter label */
template-builder .text-sm.font-medium,
template-builder span[class*="text-sm"] {
    font-family: 'Open Sans', -apple-system, sans-serif !important;
}

/* Field type grid buttons (Testo, Firma, Iniziali, etc.) */
template-builder div[class*="border-dashed"],
template-builder .grid > div[class*="border"] {
    background: #FFFFFF !important;
    border: 1.5px dashed #D5D4D0 !important;
    border-radius: 8px !important;
    font-family: 'Open Sans', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #5C5B57 !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: grab !important;
}

template-builder div[class*="border-dashed"]:hover,
template-builder .grid > div[class*="border"]:hover {
    border-color: #4781D1 !important;
    border-style: solid !important;
    background: #E4ECF8 !important;
    color: #4781D1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(71, 129, 209, 0.15) !important;
}

/* "RILEVA CAMPI" button */
template-builder .btn-sm.btn-neutral,
template-builder .btn.btn-sm.btn-neutral {
    background: linear-gradient(135deg, #5299E0, #4781D1) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(71, 129, 209, 0.25) !important;
    transition: all 200ms ease !important;
}

template-builder .btn-sm.btn-neutral:hover {
    background: linear-gradient(135deg, #4781D1, #3A68A8) !important;
    box-shadow: 0 4px 16px rgba(71, 129, 209, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* "INIZIA IL TOUR" button */
template-builder .btn-neutral.text-white:not(#save_button_container .base-button) {
    background: linear-gradient(135deg, #245580, #1a3a5c) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.2) !important;
}

/* ── Document page controls (prev/next/zoom) ── */
template-builder .document-control-button {
    background: #FFFFFF !important;
    border: 1px solid #E2E5E9 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 150ms ease !important;
}

template-builder .document-control-button:hover {
    background: #E4ECF8 !important;
    border-color: #4781D1 !important;
    color: #4781D1 !important;
    box-shadow: 0 2px 6px rgba(71, 129, 209, 0.12) !important;
}

/* ── Submitter circle (colored dot) ── */
template-builder .rounded-full.bg-base-content {
    background: linear-gradient(135deg, #5299E0, #4781D1) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(71, 129, 209, 0.3) !important;
}

/* ── Dropdown menus ── */
template-builder .dropdown-content {
    background: #FFFFFF !important;
    border: 1px solid #E2E5E9 !important;
    border-radius: 12px !important;
    box-shadow: 0px 12px 28px rgba(4,15,27,0.12), 0px 2px 6px rgba(4,15,27,0.04) !important;
    animation: gestce-fadeInDown 0.15s ease-out !important;
    overflow: hidden !important;
}

template-builder .dropdown-content a,
template-builder .dropdown-content button {
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: background 150ms ease !important;
}

template-builder .dropdown-content a:hover,
template-builder .dropdown-content button:hover {
    background: #F3F4F4 !important;
}

/* ── Alert bar ── */
template-builder .alert {
    background: #D5F1FA !important;
    border: 1px solid rgba(71, 129, 209, 0.15) !important;
    border-radius: 8px !important;
    border-left: 3px solid #4781D1 !important;
    font-size: 13px !important;
}

/* ── Draw field container / dropzone ── */
template-builder .draw-field-container {
    background: #F5F5F3 !important;
    border-radius: 12px !important;
    border: 2px dashed #D5D4D0 !important;
}

/* ── Global font ── */
template-builder,
template-builder * {
    font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif !important;
}

/* ── Entry animation ── */
template-builder > div {
    animation: gestce-fadeInUp 0.3s ease-out !important;
}

/* ── Document preview name ── */
template-builder .document-preview-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #5C5B57 !important;
}

/* ============================================================
   31. POLISH & WOW — Premium Refinements
   ============================================================ */

/* ── Disabled states ── */
button:disabled,
button[disabled],
.base-button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(30%);
}

.toggle:hover {
    border-color: var(--color-brand-400) !important;
}

.toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.15) !important;
}

/* ── Invalid / Error form states ── */
input:invalid:not(:placeholder-shown),
input[aria-invalid="true"],
textarea:invalid:not(:placeholder-shown) {
    border-color: var(--ds-error) !important;
    box-shadow: 0 0 0 3px rgba(242, 71, 36, 0.08) !important;
}

/* ── Focus states for interactive elements ── */
.dropdown-content li a:focus-visible,
.dropdown-content li button:focus-visible {
    background: var(--ds-accent-light) !important;
    color: var(--ds-accent) !important;
    outline: none !important;
}

.menu a:focus-visible,
.menu button:focus-visible {
    background: var(--ds-accent-light) !important;
    color: var(--ds-accent) !important;
    outline: none !important;
}

/* ── Navbar avatar — premium feel ── */
.dropdown label.cursor-pointer {
    background: linear-gradient(135deg, var(--ds-accent-light), #d4e4f7) !important;
    transition: all var(--ds-transition-medium) !important;
    box-shadow: 0 1px 3px rgba(71, 129, 209, 0.12);
}

.dropdown label.cursor-pointer:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 12px rgba(71, 129, 209, 0.25) !important;
}

.dropdown label.cursor-pointer:active {
    transform: scale(0.95);
}

/* ── Cards — refined interaction ── */
.card:not(template-builder .card):focus-within,
div[class*="rounded-2xl"][class*="shadow"]:not(template-builder *):focus-within {
    border-color: var(--ds-accent) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* ── Tables — row highlight accent ── */
table tbody tr {
    position: relative;
}

table tbody tr::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600));
    border-radius: 0 3px 3px 0;
    transition: width 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

table tbody tr:hover::after {
    width: 3px;
}

/* ── Template builder field grid — refined ── */
template-builder .grid > div[class*="border"]:active {
    transform: scale(0.93) !important;
    box-shadow: 0 1px 3px rgba(71, 129, 209, 0.2) !important;
    transition: transform 80ms ease !important;
}

/* ── Template builder sidebar — refined spacing ── */
template-builder #fields_list_container .field-card,
template-builder #fields_list_container > div > div {
    transition: all 200ms ease;
}

/* ── Template builder thumbnail — active indicator ── */
template-builder #documents_container img[class*="border-neutral"],
template-builder #documents_container img.border-2 {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(71, 129, 209, 0.15),
                0 3px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ── Login page — animated gradient background ── */
body.gestce-login {
    background: #0f172a !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(82,153,224,0.1), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(56,120,200,0.08), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(26, 58, 92,0.04), transparent 60%) !important;
    animation: gestce-bgShift 20s ease-in-out infinite alternate !important;
}

@keyframes gestce-bgShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* ── Login card — glass shine effect ── */
.gestce-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.04),
        transparent
    );
    transition: left 600ms ease;
    pointer-events: none;
    z-index: 0;
}

.gestce-login-card:hover::before {
    left: 150%;
}

.gestce-login-card > * {
    position: relative;
    z-index: 1;
}

/* ── Login input — subtle glow on focus ── */
.gestce-login-card .base-input:focus,
.gestce-login-card input:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(82, 153, 224, 0.15),
                0 0 20px rgba(82, 153, 224, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ── Login submit — pulse glow on hover ── */
.gestce-login-card .base-button:hover {
    animation: gestce-loginPulse 2s ease-in-out infinite !important;
}

@keyframes gestce-loginPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(82, 153, 224, 0.3); }
    50% { box-shadow: 0 0 30px rgba(82, 153, 224, 0.5), 0 0 60px rgba(82, 153, 224, 0.15); }
}

/* ── SALVA button — glow pulse when hovered ── */
template-builder #save_button_container:hover {
    animation: gestce-savePulse 2s ease-in-out infinite;
}

@keyframes gestce-savePulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(26, 58, 92, 0.3); }
    50% { box-shadow: 0 4px 24px rgba(26, 58, 92, 0.45), 0 0 40px rgba(26, 58, 92, 0.1); }
}

/* ── Smooth page transitions (Turbo) ── */
.turbo-progress-bar {
    height: 3px !important;
    background: linear-gradient(90deg, var(--color-brand-500), var(--ds-accent-element), var(--color-brand-400)) !important;
    background-size: 200% 100%;
    animation: gestce-progressShimmer 1s linear infinite;
}

@keyframes gestce-progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Dropdown menu — stagger animation ── */
.dropdown-content li:nth-child(1) { animation: gestce-fadeInUp 0.2s ease-out 0ms both; }
.dropdown-content li:nth-child(2) { animation: gestce-fadeInUp 0.2s ease-out 30ms both; }
.dropdown-content li:nth-child(3) { animation: gestce-fadeInUp 0.2s ease-out 60ms both; }
.dropdown-content li:nth-child(4) { animation: gestce-fadeInUp 0.2s ease-out 90ms both; }
.dropdown-content li:nth-child(5) { animation: gestce-fadeInUp 0.2s ease-out 120ms both; }
.dropdown-content li:nth-child(6) { animation: gestce-fadeInUp 0.2s ease-out 150ms both; }
.dropdown-content li:nth-child(7) { animation: gestce-fadeInUp 0.2s ease-out 180ms both; }

/* ── Settings nav — active indicator bar ── */
.menu a.active::before,
.menu a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, var(--ds-accent), var(--ds-accent-element));
    border-radius: 0 3px 3px 0;
}

.menu a.active,
.menu a[aria-current="page"] {
    position: relative;
}

/* ── Flash messages — auto-dismiss progress bar ── */
#flash > div > div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.2;
    animation: gestce-flashProgress 5s linear forwards;
    border-radius: 0 0 var(--ds-radius-large) var(--ds-radius-large);
}

@keyframes gestce-flashProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── Smooth text selection ── */
::selection {
    background-color: rgba(71, 129, 209, 0.15) !important;
    color: inherit;
}

/* ── Template builder field buttons — icon bounce on hover ── */
template-builder div[class*="border-dashed"]:hover svg,
template-builder .grid > div[class*="border"]:hover svg {
    transform: scale(1.1);
    transition: transform 200ms var(--ds-ease-bounce);
}

/* ── Better scrollbar for sidebar ── */
template-builder #fields_list_container::-webkit-scrollbar {
    width: 4px;
}

template-builder #fields_list_container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

template-builder #fields_list_container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

template-builder #documents_container::-webkit-scrollbar {
    width: 4px;
}

template-builder #documents_container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* ── Pagination buttons polish ── */
.join .btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 32px !important;
    height: 32px !important;
}

.join .btn.btn-active {
    background: var(--ds-accent) !important;
    color: white !important;
    border-color: var(--ds-accent) !important;
}

/* ── Search input — magnifying glass icon enhancement ── */
input[type="search"] {
    padding-left: 14px !important;
}

/* ── Modal overlay — premium blur ── */
.modal::before,
.modal-backdrop {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
}

/* ── Empty state text ── */
.text-center.text-lg {
    color: var(--ds-text-muted) !important;
    font-weight: 500 !important;
}

/* ── Template builder INVIA button — outline accent ── */
template-builder .white-button:hover svg,
template-builder a.btn.btn-outline:hover svg {
    transform: translateX(2px);
    transition: transform 200ms ease;
}

/* ── Navbar link — underline slide animation ── */
a.font-medium.text-lg {
    position: relative;
}

a.font-medium.text-lg::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--ds-accent);
    border-radius: 1px;
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.font-medium.text-lg:hover::after {
    width: 100%;
    left: 0;
}

/* ============================================================
   32. Settings page polish
   ============================================================ */

/* Settings nav sidebar */
#account_settings_menu .menu-title span {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--ds-text-muted) !important;
}

/* Settings content cards */
.form-control label.label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ds-text-max-contrast) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================================
   33. Signing form page refinements
   ============================================================ */

/* Signing form header */
#signing_form_header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid var(--ds-border-light) !important;
    border-radius: 0 !important;
}

/* Submit/Sign button on signing page */
#submit_form_button,
button[data-action*="submit"] {
    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600)) !important;
    border-radius: var(--ds-radius-large) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.25) !important;
    transition: all 200ms ease !important;
}

#submit_form_button:hover,
button[data-action*="submit"]:hover {
    box-shadow: var(--shadow-glow-brand) !important;
    transform: translateY(-1px);
}

/* ============================================================
   34. Empty states & micro-copy
   ============================================================ */

/* Empty state containers */
.text-center.py-16,
.text-center.py-12,
.text-center.py-8 {
    color: var(--ds-text-muted);
}

.text-center.py-16 svg,
.text-center.py-12 svg {
    opacity: 0.4;
    margin-bottom: 12px;
}

/* ============================================================
   35. Print refinements
   ============================================================ */
@media print {
    .gestce-new-doc-btn,
    .dropdown,
    #flash {
        display: none !important;
    }
}