/* Doc Solutions Center — Claude-Inspired Design System */
/* Warm Intellectual Minimalism */

/* ========================================
   CSS VARIABLES (Design Tokens)
   ======================================== */
:root {
    /* Primary Colors — Warm Terracotta */
    --o365-primary: #D97757;
    --o365-primary-dark: #C4623F;
    --o365-primary-light: #FDF0E9;

    /* Status Colors */
    --o365-red: #C4423E;
    --o365-green: #2E8540;
    --o365-yellow: #D4950C;
    --o365-orange: #D97757;
    --o365-purple: #7C6BAB;
    --o365-teal: #2E7D6E;

    /* Neutrals — Warm Parchment Scale */
    --o365-white: #ffffff;
    --o365-gray-10: #FAF6F0;
    --o365-gray-20: #F5EDE3;
    --o365-gray-30: #E8E0D3;
    --o365-gray-40: #DDD5C8;
    --o365-gray-50: #C8C0B3;
    --o365-gray-90: #9A9488;
    --o365-gray-130: #6B665C;
    --o365-gray-160: #1A1915;
    --o365-gray-190: #0F0E0C;

    /* Tint Backgrounds */
    --tint-blue-bg:   #FDF0E9;
    --tint-green-bg:  #E8F5E4;
    --tint-yellow-bg: #FDF5E0;
    --tint-red-bg:    #FCEAE8;
    --tint-purple-bg: #F0EBF8;
    --tint-teal-bg:   #E4F2EF;
    --tint-orange-bg: #FDF0E9;

    /* Semantic */
    --shadow-color: rgba(26, 25, 21, 0.04);
    --overlay-bg: rgba(26, 25, 21, 0.4);
    --header-bg: #1A1915;
    --yellow-text: #96700A;

    /* Layout */
    --rail-width: 72px;
    --header-height: 56px;
}

/* ========================================
   DARK MODE
   ======================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    --o365-primary:      #E89070;
    --o365-primary-dark:  #D97757;
    --o365-primary-light: #3D2A20;

    --o365-white:      #1A1915;
    --o365-gray-10:    #131210;
    --o365-gray-20:    #1F1E1B;
    --o365-gray-30:    #2D2B27;
    --o365-gray-40:    #3D3A35;
    --o365-gray-50:    #4D4A44;
    --o365-gray-90:    #8A8478;
    --o365-gray-130:   #B5AFA3;
    --o365-gray-160:   #E8E0D0;
    --o365-gray-190:   #F5F0E8;

    --o365-red:    #E87070;
    --o365-green:  #6BBF5C;
    --o365-yellow: #E8C040;
    --o365-orange: #E89070;
    --o365-purple: #B08CD8;
    --o365-teal:   #4DBFB0;

    --tint-blue-bg:   #3D2A20;
    --tint-green-bg:  #1E3518;
    --tint-yellow-bg: #352E15;
    --tint-red-bg:    #3D2420;
    --tint-purple-bg: #2A1E3D;
    --tint-teal-bg:   #1A3530;
    --tint-orange-bg: #3D2A20;

    --shadow-color: rgba(0, 0, 0, 0.25);
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --header-bg: #131210;
    --yellow-text: #E8C040;
}

[data-theme="dark"] .app-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--o365-gray-30);
}

[data-theme="dark"] .search-input:focus {
    background: var(--o365-gray-20);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--o365-white);
    border-color: var(--o365-gray-30);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .dropdown-item {
    color: var(--o365-gray-160);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: var(--o365-gray-20);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .modal-content {
    background: var(--o365-white);
    border-color: var(--o365-gray-30);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .modal-header {
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .modal-footer {
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--o365-gray-20);
    border-color: var(--o365-gray-40);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--o365-gray-40);
    border-color: var(--o365-gray-50);
}

[data-theme="dark"] .card {
    background: var(--o365-white);
    border-color: var(--o365-gray-30);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .card-header {
    background: var(--o365-gray-20);
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .card-footer {
    background: var(--o365-gray-20);
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .table {
    color: var(--o365-gray-160);
    --bs-table-bg: var(--o365-white);
    --bs-table-border-color: var(--o365-gray-30);
    --bs-table-hover-bg: var(--o365-gray-20);
    --bs-table-striped-bg: var(--o365-gray-20);
}

[data-theme="dark"] .table-danger {
    --bs-table-bg: var(--tint-red-bg);
    --bs-table-color: var(--o365-red);
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: var(--tint-yellow-bg);
    --bs-table-color: var(--o365-yellow);
}

[data-theme="dark"] .table-secondary {
    --bs-table-bg: var(--o365-gray-20);
    --bs-table-color: var(--o365-gray-130);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--o365-white);
    border-color: var(--o365-gray-30);
    color: var(--o365-gray-160);
}

[data-theme="dark"] .list-group-item-light {
    background-color: var(--o365-gray-20) !important;
}

[data-theme="dark"] .alert {
    border-color: var(--o365-gray-30);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--o365-primary);
    border-color: var(--o365-primary);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--o365-gray-130);
    border-color: var(--o365-gray-50);
}

[data-theme="dark"] .btn-outline-danger {
    color: var(--o365-red);
    border-color: var(--o365-red);
}

[data-theme="dark"] .page-link {
    background: var(--o365-white);
    border-color: var(--o365-gray-30);
    color: var(--o365-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background: var(--o365-primary);
    border-color: var(--o365-primary);
}

[data-theme="dark"] #blazor-error-ui {
    background: var(--tint-yellow-bg);
    color: var(--o365-gray-160);
}

/* ========================================
   RESET & BASE
   ======================================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--o365-gray-160);
    background: var(--o365-gray-10);
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    max-width: 100%;
}

h1:focus { outline: none; }

/* ========================================
   APP SHELL LAYOUT
   ======================================== */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* ========================================
   HEADER
   ======================================== */
.app-header {
    height: var(--header-height);
    min-height: var(--header-height);
    background: var(--header-bg);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
    z-index: 100;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo-img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.logo-text {
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.logo-text-sub {
    display: none;
}

.header-spacer {
    flex: 1;
}

/* Search */
.header-search {
    max-width: 400px;
    flex: 1;
}

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--o365-gray-90);
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    transition: all 0.15s;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
    outline: none;
    background: white;
    color: var(--o365-gray-160);
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.search-input:focus + .search-icon,
.search-input:focus ~ .search-icon {
    color: var(--o365-gray-130);
}

/* Header Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.1s;
    position: relative;
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.header-avatar-btn {
    padding: 0;
    width: auto;
}

.header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.header-user {
    display: flex;
    align-items: center;
}

/* ========================================
   BODY LAYOUT
   ======================================== */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========================================
   RAIL NAVIGATION
   ======================================== */
.app-rail {
    width: var(--rail-width);
    min-width: var(--rail-width);
    background: var(--o365-gray-20);
    border-right: 1px solid var(--o365-gray-40);
    overflow-y: auto;
    overflow-x: hidden;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    height: 100%;
}

.rail-item {
    width: var(--rail-width);
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--o365-gray-130);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    text-decoration: none;
    border: none;
    background: none;
}

.rail-item:hover {
    color: var(--o365-gray-160);
    background: var(--o365-gray-40);
    text-decoration: none;
}

.rail-item.active,
.rail-item:focus {
    color: var(--o365-primary);
    background: var(--o365-primary-light);
    text-decoration: none;
}

.rail-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--o365-primary);
    border-radius: 0 2px 2px 0;
}

.rail-item i {
    font-size: 20px;
}

.rail-text {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 64px;
}

/* Virtual archives section separator and label */
.rail-separator {
    height: 1px;
    background: var(--o365-gray-40);
    margin: 8px 12px;
}

.rail-section-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--o365-gray-110, #8a8886);
    text-align: center;
    padding: 4px 4px 2px;
    display: block;
}

.rail-spacer {
    flex: 1;
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.app-content {
    flex: 1;
    overflow: auto;
    background: var(--o365-gray-10);
    padding: 24px;
}

/* ========================================
   CARDS
   ======================================== */
.o365-card {
    background: var(--o365-white);
    border: 1px solid var(--o365-gray-30);
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--shadow-color);
}

.o365-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--o365-gray-30);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.o365-card-body {
    padding: 20px;
}

/* Version History - Card List */
.version-row:hover {
    background: var(--o365-gray-10);
}
.version-row:hover .version-actions {
    opacity: 1 !important;
}
.version-row:last-child {
    border-bottom: none !important;
}
.version-row .btn:hover {
    background: var(--o365-gray-20);
    border-radius: 4px;
}

/* Stat Cards */
.stat-card {
    background: var(--o365-white);
    border: 1px solid var(--o365-gray-30);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon.blue   { background: var(--tint-blue-bg); color: var(--o365-primary); }
.stat-icon.green  { background: var(--tint-green-bg); color: var(--o365-green); }
.stat-icon.yellow { background: var(--tint-yellow-bg); color: var(--yellow-text); }
.stat-icon.red    { background: var(--tint-red-bg); color: var(--o365-red); }
.stat-icon.purple { background: var(--tint-purple-bg); color: var(--o365-purple); }
.stat-icon.teal   { background: var(--tint-teal-bg); color: var(--o365-teal); }

.stat-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--o365-gray-190);
}

.stat-label {
    font-size: 13px;
    color: var(--o365-gray-130);
    margin-top: 2px;
}

/* ========================================
   BADGES
   ======================================== */
.badge-o365 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
}

.badge-blue   { background: var(--o365-primary-light); color: var(--o365-primary); }
.badge-green  { background: var(--tint-green-bg); color: var(--o365-green); }
.badge-yellow { background: var(--tint-yellow-bg); color: var(--yellow-text); }
.badge-red    { background: var(--tint-red-bg); color: var(--o365-red); }
.badge-gray   { background: var(--o365-gray-30); color: var(--o365-gray-130); }
.badge-purple { background: var(--tint-purple-bg); color: var(--o365-purple); }
.badge-teal   { background: var(--tint-teal-bg); color: var(--o365-teal); }
.badge-orange { background: var(--tint-orange-bg); color: var(--o365-orange); }

/* ========================================
   BUTTONS
   ======================================== */
.btn-o365 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
    border: none;
    /* La classe e' usata anche su <a> (es. il link "Word" nella toolbar documento): il
       Reboot di Bootstrap sottolinea gli <a>, e senza questo il link stona fra i pulsanti. */
    text-decoration: none;
}

.btn-o365:hover {
    text-decoration: none;
}

.btn-o365-primary {
    background: var(--o365-primary);
    color: white;
    /* Come per ghost: senza bordo il primary resta 2px piu' basso dei secondary e
       nella toolbar documento risulta disallineato rispetto ai vicini. */
    border: 1px solid transparent;
}

.btn-o365-primary:hover {
    background: var(--o365-primary-dark);
}

.btn-o365-secondary {
    background: var(--o365-white);
    color: var(--o365-gray-160);
    border: 1px solid var(--o365-gray-50);
}

.btn-o365-secondary:hover {
    background: var(--o365-gray-20);
}

.btn-o365-ghost {
    background: transparent;
    color: var(--o365-gray-160);
    /* Il bordo trasparente non si vede ma riserva lo spazio: senza, un ghost accanto a un
       secondary risulta 2px piu' basso e la fila non si allinea. Innocuo sulle dimensioni
       esterne perche' il Reboot di Bootstrap applica box-sizing: border-box a tutto. */
    border: 1px solid transparent;
}

.btn-o365-ghost:hover {
    background: var(--o365-gray-20);
}

.btn-o365-sm {
    padding: 4px 10px;
    font-size: 13px;
}

/* ========================================
   FORMS
   ======================================== */
.form-control-o365 {
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--o365-gray-50);
    border-radius: 4px;
    background: var(--o365-white);
    color: var(--o365-gray-160);
    transition: border-color 0.15s;
}

.form-control-o365:focus {
    outline: none;
    border-color: var(--o365-primary);
    box-shadow: 0 0 0 1px var(--o365-primary);
}

/* ========================================
   TABLES
   ======================================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    padding: 10px 16px;
    font-weight: 600;
    color: var(--o365-gray-130);
    background: var(--o365-gray-10);
    border-bottom: 1px solid var(--o365-gray-30);
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--o365-gray-30);
    color: var(--o365-gray-160);
}

.data-table tbody tr:hover {
    background: var(--o365-gray-20);
}

/* ========================================
   PANELS (Slide-in from right)
   ======================================== */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1000;
}

.panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 90vw;
    background: var(--o365-white);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.panel.open {
    transform: translateX(0);
}

.panel-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--o365-gray-30);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--o365-gray-30);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ========================================
   UTILITIES
   ======================================== */
.text-primary   { color: var(--o365-primary) !important; }
.text-success   { color: var(--o365-green) !important; }
.text-warning   { color: var(--o365-yellow) !important; }
.text-danger    { color: var(--o365-red) !important; }
.text-muted     { color: var(--o365-gray-130) !important; }

.fw-600 { font-weight: 600; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }
.fs-28 { font-size: 28px; }

/* ========================================
   LOADING SPINNER
   ======================================== */
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--o365-gray-40);
    border-top-color: var(--o365-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--o365-gray-130);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

/* ========================================
   BLAZOR ERROR UI — toast-style error banner
   ======================================== */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 440px;
    min-width: 320px;
    background: #ffffff;
    border: 1px solid #f1aeb5;
    border-left: 4px solid #d93025;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    z-index: 10000;
    font-family: inherit;
    animation: blazorErrorSlideIn 0.25s ease-out;
}

@keyframes blazorErrorSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#blazor-error-ui {
    display: none;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: flex-start;
}

#blazor-error-ui[style*="display: block"],
#blazor-error-ui[style*="display:block"] {
    display: grid !important;
}

.blazor-error-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fde7e9;
    color: #a4262c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.blazor-error-content {
    min-width: 0;
}

.blazor-error-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #201f1e;
    margin-bottom: 4px;
}

.blazor-error-text {
    font-size: 0.85rem;
    color: #605e5c;
    line-height: 1.4;
}

.blazor-error-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    flex-shrink: 0;
}

#blazor-error-ui .reload {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d93025;
    color: #ffffff;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s;
    white-space: nowrap;
}

#blazor-error-ui .reload:hover {
    background: #b3271e;
    color: #ffffff;
    text-decoration: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    color: #8a8886;
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s;
}

#blazor-error-ui .dismiss:hover {
    background: #f3f2f1;
    color: #201f1e;
}

/* Page-level error boundary fallback */
.page-error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.page-error-card {
    max-width: 520px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #edebe9;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.page-error-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fde7e9;
    color: #a4262c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 16px;
}

.page-error-card h2 {
    font-size: 1.3rem;
    margin: 0 0 8px;
    color: #201f1e;
}

.page-error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ========================================
   ACCOUNT PAGES — Doc Solutions Center
   ======================================== */

:root {
    --dsc-red: #D97757;
    --dsc-red-dark: #C4623F;
    --dsc-red-deep: #A34E2E;
    --dsc-charcoal: #1A1915;
    --dsc-warm-gray: #FAF6F0;
    --dsc-text: #1A1915;
    --dsc-text-muted: #6B665C;
    --dsc-border: #E5DED3;
    --dsc-input-bg: #ffffff;
    --dsc-form-bg: #ffffff;
    --dsc-shadow-sm: 0 1px 3px rgba(26,25,21,0.05);
    --dsc-shadow-md: 0 4px 24px rgba(26,25,21,0.07);
    --dsc-radius: 10px;
    --dsc-font-display: 'DM Serif Display', Georgia, serif;
    --dsc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-theme="dark"] {
    --dsc-red: #E89070;
    --dsc-red-dark: #D97757;
    --dsc-red-deep: #C4623F;
    --dsc-charcoal: #E8E0D0;
    --dsc-warm-gray: #1A1915;
    --dsc-text: #E8E0D0;
    --dsc-text-muted: #8A8478;
    --dsc-border: #3D3A35;
    --dsc-input-bg: #2D2B27;
    --dsc-form-bg: #1A1915;
    --dsc-shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --dsc-shadow-md: 0 4px 24px rgba(0,0,0,0.3);
}

/* — Layout — */

.account-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--dsc-font-body);
    background: var(--dsc-warm-gray);
}

/* — Brand Panel (Left) — */

.account-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45%;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(170deg, #1A1915 0%, #2D2B27 50%, #1A1915 100%);
    overflow: hidden;
    padding: 60px 48px;
}

.brand-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
}

.brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: brandFadeIn 0.8s ease-out both;
}

@keyframes brandFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brand-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
    margin-bottom: 32px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.brand-logo:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}

.brand-logo--sm {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    box-shadow: var(--dsc-shadow-sm);
    border: 2px solid var(--dsc-border);
}

.brand-title {
    font-family: var(--dsc-font-display);
    font-size: 2rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.brand-tagline {
    font-size: 0.95rem;
    font-weight: 400;
    color: #D97757;
    margin: 0 0 32px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-decorline {
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 0 auto 32px;
    border-radius: 0;
}

.brand-description {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.01em;
}

.brand-footer-badge {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.brand-footer-badge i {
    font-size: 0.85rem;
}

/* — Form Panel (Right) — */

.account-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--dsc-form-bg);
    overflow-y: auto;
}

.account-form-inner {
    width: 100%;
    max-width: 400px;
    animation: formSlideIn 0.6s ease-out 0.15s both;
}

@keyframes formSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.account-form-header {
    margin-bottom: 8px;
}

.account-mobile-logo {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.account-mobile-title {
    font-family: var(--dsc-font-display);
    font-size: 1.15rem;
    color: var(--dsc-text);
}

/* — Login Form Specifics — */

.login-heading {
    margin-bottom: 32px;
}

.login-heading h4 {
    font-family: var(--dsc-font-display);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--dsc-text);
    margin: 0 0 6px;
}

.login-subtitle {
    font-size: 0.9rem;
    color: var(--dsc-text-muted);
    margin: 0;
}

.login-field {
    margin-bottom: 20px;
}

.login-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dsc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--dsc-text-muted);
    transition: color 0.25s ease;
    pointer-events: none;
    z-index: 1;
}

.login-input {
    width: 100%;
    padding: 14px 16px 14px 44px !important;
    font-size: 0.925rem;
    font-family: var(--dsc-font-body);
    color: var(--dsc-text);
    background: var(--dsc-input-bg);
    border: 1px solid var(--dsc-border);
    border-radius: var(--dsc-radius);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.login-input::placeholder {
    color: var(--dsc-text-muted);
    opacity: 0.45;
}

.login-input:focus {
    border-color: var(--dsc-red);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
}

.login-input:focus + .login-input-wrap > i,
.login-input-wrap:focus-within > i {
    color: var(--dsc-red);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    font-size: 0.85rem;
}

.login-options .form-check-label {
    color: var(--dsc-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.login-options .form-check-input:checked {
    background-color: var(--dsc-red);
    border-color: var(--dsc-red);
}

.login-forgot {
    color: var(--dsc-red);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.login-forgot:hover {
    color: var(--dsc-red-dark);
    text-decoration: underline;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    font-family: var(--dsc-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--dsc-red);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    letter-spacing: 0.01em;
}

.login-submit:hover {
    background: var(--dsc-red-dark);
    box-shadow: 0 6px 24px rgba(217, 119, 87, 0.25);
}

.login-submit:active {
    transform: scale(0.985);
}

.login-submit i {
    transition: transform 0.25s ease;
    font-size: 1rem;
}

.login-submit:hover i {
    transform: translateX(3px);
}

.login-register {
    text-align: center;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--dsc-text-muted);
}

.login-register a {
    color: var(--dsc-red);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-register a:hover {
    color: var(--dsc-red-dark);
    text-decoration: underline;
}

/* — Footer — */

.account-form-footer {
    text-align: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--dsc-border);
    font-size: 0.75rem;
    color: var(--dsc-text-muted);
    letter-spacing: 0.03em;
}

.account-form-footer strong {
    font-weight: 600;
    color: var(--dsc-text);
}

/* #308: loghi fornitore in fondo alla colonna del form.
   Kartiq resta testuale (nessun asset grafico esiste ancora), alterBIT è un'immagine:
   il separatore verticale li tiene otticamente allineati nonostante siano due media
   diversi. Nascosti in blocco quando Branding.ShowPoweredBy è false. */
.account-vendor-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.account-vendor-logos .vendor-logo {
    /* 28px: sotto i 24 il lettering "ALTER BIT" del logo diventa illeggibile */
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* Il marchio Kartiq e' un simbolo quadrato, non un lettering: a 28px come quello
   alterBIT risulterebbe sproporzionato accanto al testo che lo accompagna. */
.account-vendor-logos .vendor-logo-mark {
    height: 20px;
}

.account-vendor-logos .vendor-sep {
    width: 1px;
    height: 18px;
    background: var(--dsc-border);
    flex-shrink: 0;
}

/* — Status message — */

.account-body .alert {
    font-size: 0.85rem;
    border-radius: var(--dsc-radius);
    margin-bottom: 20px;
}

/* — External login buttons — */

.external-login-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border-radius: var(--dsc-radius);
    border: 1.5px solid var(--dsc-border);
    background: var(--dsc-input-bg);
    color: var(--dsc-text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.external-login-buttons .btn:hover {
    border-color: var(--dsc-red);
    box-shadow: var(--dsc-shadow-sm);
}

/* — Validation — */

.account-body .text-danger {
    font-size: 0.78rem;
    margin-top: 4px;
}

/* — Responsive — */

@media (max-width: 900px) {
    .account-layout {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .account-brand-panel {
        width: 100%;
        min-height: auto;
        padding: 40px 32px;
    }

    .brand-monogram span {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .brand-title {
        font-size: 1.5rem;
    }

    .brand-description {
        display: none;
    }

    .brand-footer-badge {
        display: none;
    }

    .account-form-panel {
        flex: 0 0 auto;
        overflow: visible;
        padding: 36px 24px;
        padding-bottom: max(36px, env(safe-area-inset-bottom, 0));
    }
}

@media (max-width: 600px) {
    .account-brand-panel {
        padding: 32px 24px 28px;
    }

    .brand-tagline {
        margin-bottom: 0;
    }

    .brand-decorline {
        display: none;
    }

    .brand-monogram {
        margin-bottom: 20px;
    }

    .brand-monogram span {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .brand-title {
        font-size: 1.25rem;
    }

    .account-form-inner {
        max-width: 100%;
    }

    .login-heading h4 {
        font-size: 1.4rem;
    }
}

@media (max-width: 420px) {
    .account-brand-panel {
        padding: 24px 20px 20px;
    }

    .brand-tagline {
        font-size: 0.9rem;
    }

    .account-form-panel {
        padding: 28px 20px;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ========================================
   VISUAL WORKFLOW BUILDER
   ======================================== */

/* #319: l'altezza era inline, calc(100vh - 140px), un valore ereditato che non
   corrispondeva piu' al layout reale e lasciava ~79px di striscia morta sotto il
   designer. Sopra il designer ci sono 62px (padding-top 12 di .modern-content +
   toolbar 42 + margine mb-2 8) e sotto i 16px di padding-bottom: 78 in totale.
   Con il log di esecuzione aperto si aggiungono i suoi 160px. */
.wf-designer-row {
    display: flex;
    height: calc(100vh - 78px);
}

.wf-designer-row.has-log {
    height: calc(100vh - 78px - 160px);
}

/* #319: lo splitter canvas|proprieta' occupa tutto lo spazio residuo accanto alla
   palette. min-width:0 e' necessario: senza, il contenuto del canvas impone una
   larghezza minima al flex item e l'anta delle proprieta' non si allarga oltre. */
.wf-designer-splitter {
    flex: 1;
    min-width: 0;
}

.wf-canvas-wrap {
    position: relative;
    /* flex:1 valeva quando il canvas era figlio diretto del contenitore flex; ora e'
       il contenuto di un'anta dello splitter, che ne detta le dimensioni. */
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle, var(--o365-gray-30) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* #319: era width:320px inline sul div; ora la larghezza la decide l'anta dello splitter.
   Il padding e' passato a .wf-props-body: serve che l'header tocchi i bordi del pannello. */
.wf-props-pane {
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* #319: header del pannello. Sticky perche' il pannello scorre: su un nodo denso il
   toggle e l'elimina devono restare raggiungibili senza risalire in cima. */
.wf-props-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--o365-gray-10, #faf9f8);
    border-bottom: 1px solid #edebe9;
}

.wf-props-header-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--o365-gray-130, #605e5c);
}

.wf-props-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #d2d0ce;
    border-radius: 4px;
    background: #fff;
    color: var(--o365-gray-130, #605e5c);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.wf-props-header-btn:hover {
    background: var(--o365-gray-20, #f3f2f1);
    border-color: #b3b0ad;
    color: var(--o365-gray-160, #323130);
}

.wf-props-header-btn-danger:hover {
    background: #fdf3f4;
    border-color: #d13438;
    color: #d13438;
}

.wf-props-body {
    padding: 16px;
}

/* #301: valore di un metadato Data — selettore modalita' (calendario | espressione) + input.
   Va a capo quando il pannello e' stretto invece di comprimere l'input a pochi pixel:
   la riga ha gia' l'etichetta e la tendina dell'azione davanti. */
.wf-date-value {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 4px;
    flex-wrap: wrap;
}

.wf-date-mode {
    flex-shrink: 0;
}

.wf-date-mode .btn {
    padding: 2px 7px;
    line-height: 1.3;
}

.wf-date-input {
    flex: 1 1 120px;
    min-width: 0;
}

.wf-canvas-wrap .diagram-canvas {
    width: 100% !important;
    height: 100% !important;
}

.wf-canvas-wrap .diagram-svg-layer {
    z-index: 1;
}

.wf-canvas-wrap .diagram-link {
    stroke: var(--o365-gray-130);
    stroke-width: 2;
    fill: none;
}

.wf-canvas-wrap .diagram-link:hover {
    stroke: var(--o365-primary);
    stroke-width: 3;
}

.wf-canvas-wrap .diagram-link-selected {
    stroke: var(--o365-primary);
    stroke-width: 2.5;
}

/* ========================================
   ADMIN PAGES
   ======================================== */
.page-container {
    max-width: 1200px;
}

/* Full-bleed layout for designers (dashboard/report) */
/* Le pagine designer/viewer occupano tutta l'area contenuto: azzeriamo il padding del
   contenitore così .page-designer (height:100%) riempie esattamente, senza il gap di
   ~56px che restava in fondo (causato dal padding di .modern-content non compensato). */
.modern-content:has(> .page-designer) {
    padding: 0;
}

.page-designer {
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* Flex column: l'header di pagina prende la sua altezza naturale, l'area viewer il resto.
       Evita i numeri magici (es. calc(100vh - 180px)) che lasciavano gap verticali. */
    display: flex;
    flex-direction: column;
}

.page-designer .page-header {
    margin-bottom: 12px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.page-designer .designer-area {
    position: relative;
    /* Riempie tutto lo spazio verticale rimanente sotto l'header. min-height:0 è
       necessario perché un flex item possa rimpicciolirsi/espandersi correttamente. */
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--o365-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Force DevExpress JS components to fill their container */
.page-designer .designer-area > div {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

.page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--o365-gray-190);
    margin: 0;
}

.page-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--o365-gray-90);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.admin-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.admin-card {
    background: var(--o365-white);
    border: 1px solid var(--o365-gray-30);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.admin-card:hover {
    box-shadow: 0 4px 12px var(--shadow-color);
}

.admin-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--o365-gray-30);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--o365-gray-130);
}

.admin-card-header i {
    font-size: 16px;
}

.admin-card-body {
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--o365-gray-160);
    font-size: 14px;
    transition: background 0.1s;
}

.admin-link:hover {
    background: var(--o365-gray-20);
    text-decoration: none;
    color: var(--o365-primary);
}

.admin-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.system-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 4px 0;
}

.info-row .label {
    color: var(--o365-gray-130);
}

.info-row .value {
    font-weight: 500;
    color: var(--o365-gray-160);
}

/* Color Utilities */
.text-blue    { color: var(--o365-primary) !important; }
.text-green   { color: var(--o365-green) !important; }
.text-purple  { color: var(--o365-purple) !important; }
.text-orange  { color: var(--o365-orange) !important; }
.text-cyan    { color: #0097a7 !important; }
.text-pink    { color: #e91e63 !important; }
.text-teal    { color: var(--o365-teal) !important; }
.text-red     { color: var(--o365-red) !important; }

/* Gap Utilities */
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* Dashboard Stat Grid */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Quick Access Grid */
.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.quick-access-card {
    background: var(--o365-white);
    border: 1px solid var(--o365-gray-30);
    border-radius: 8px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--o365-gray-160);
    transition: all 0.15s;
    text-align: center;
}

.quick-access-card:hover {
    border-color: var(--o365-primary);
    box-shadow: 0 4px 12px var(--shadow-color);
    text-decoration: none;
    color: var(--o365-primary);
}

.quick-access-card i {
    font-size: 32px;
}

.quick-access-card span {
    font-size: 13px;
    font-weight: 600;
}

/* Settings Sections */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.settings-section {
    background: var(--o365-white);
    border: 1px solid var(--o365-gray-30);
    border-radius: 8px;
    overflow: hidden;
}

.settings-section-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--o365-gray-30);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.settings-section-body {
    padding: 16px 20px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--o365-gray-20);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row .label {
    color: var(--o365-gray-130);
}

.settings-row .value {
    font-weight: 500;
    color: var(--o365-gray-160);
}

/* Admin Header Icon Colors */
.admin-icon-blue   { background: var(--tint-blue-bg); color: var(--o365-primary); }
.admin-icon-green  { background: var(--tint-green-bg); color: var(--o365-green); }
.admin-icon-orange { background: var(--tint-orange-bg); color: var(--o365-orange); }
.admin-icon-teal   { background: var(--tint-teal-bg); color: var(--o365-teal); }
.admin-icon-purple { background: var(--tint-purple-bg); color: var(--o365-purple); }
.admin-icon-red    { background: var(--tint-red-bg); color: var(--o365-red); }

/* Danger Button */
.btn-o365-danger {
    background: var(--o365-red);
    color: white;
    border: 1px solid var(--o365-red);
}

.btn-o365-danger:hover {
    opacity: 0.9;
}

/* Theme Toggle */
.theme-toggle-light { display: inline; }
.theme-toggle-dark  { display: none; }

[data-theme="dark"] .theme-toggle-light { display: none; }
[data-theme="dark"] .theme-toggle-dark  { display: inline; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .admin-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .app-rail {
        display: none;
    }

    .app-content {
        padding: 16px;
    }

    .header-search {
        display: none;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   BLAZOR RECONNECTION DIALOG
   ======================================== */

.kartiq-reconnect-modal {
    display: none;
}

.kartiq-reconnect-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: 99998;
    backdrop-filter: blur(2px);
}

.kartiq-reconnect-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: var(--o365-white, #ffffff);
    border-radius: 12px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.15));
    max-width: 400px;
    width: 90%;
}

.kartiq-reconnect-failed {
    display: none;
}

/* Blazor adds these classes to #components-reconnect-modal automatically */
.components-reconnect-show {
    display: flex !important;
}

.components-reconnect-show .kartiq-reconnect-reconnecting {
    display: block;
}

.components-reconnect-show .kartiq-reconnect-failed {
    display: none;
}

.components-reconnect-failed,
.components-reconnect-rejected {
    display: block !important;
}

.components-reconnect-failed .kartiq-reconnect-reconnecting,
.components-reconnect-rejected .kartiq-reconnect-reconnecting {
    display: none;
}

.components-reconnect-failed .kartiq-reconnect-failed,
.components-reconnect-rejected .kartiq-reconnect-failed {
    display: block;
}

.components-reconnect-hide {
    display: none !important;
}

/* ========================================
   DEVEXPRESS DXPOPUP — WARM TERRACOTTA OVERRIDES
   ======================================== */

/* Popup wrapper — rounded corners & subtle warm shadow */
.dxbl-popup {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26, 25, 21, 0.12),
                0 2px 8px rgba(26, 25, 21, 0.06) !important;
}

/* Header — warm parchment background */
.dxbl-popup-header {
    background: var(--o365-gray-10) !important;
    border-bottom: 1px solid var(--o365-gray-30) !important;
    color: var(--o365-gray-160) !important;
}

/* Body — clean white */
.dxbl-popup-body {
    background: var(--o365-white) !important;
}

/* Footer — warm background with top border */
.dxbl-popup-footer {
    background: var(--o365-gray-10) !important;
    border-top: 1px solid var(--o365-gray-30) !important;
}

/* Primary DxButton inside popups — terracotta */
.dxbl-popup .dxbl-btn-primary,
.dxbl-popup .dxbl-btn.dxbl-btn-primary {
    background-color: var(--o365-primary) !important;
    border-color: var(--o365-primary) !important;
    color: #fff !important;
}

.dxbl-popup .dxbl-btn-primary:hover,
.dxbl-popup .dxbl-btn.dxbl-btn-primary:hover {
    background-color: var(--o365-primary-dark) !important;
    border-color: var(--o365-primary-dark) !important;
}

.dxbl-popup .dxbl-btn-primary:focus,
.dxbl-popup .dxbl-btn.dxbl-btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.25) !important;
}

/* DxFormLayoutGroup caption inside popups — warm group header */
.dxbl-popup .dxbl-fl-group-caption,
.dxbl-fl-group-caption {
    background: var(--o365-gray-10) !important;
    border-bottom: 1px solid var(--o365-gray-30) !important;
    color: var(--o365-gray-160) !important;
    font-weight: 600;
}

/* #239 — Fix DxSplitter drag che si blocca quando il cursore attraversa un iframe.
   L'iframe (PDF.js viewer o anteprima HTML) cattura mousemove e impedisce al separator
   di seguire il cursore. Sintomo: il drag funziona per RIDURRE la pane sinistra (cursore
   passa sopra DxGrid che non cattura), ma NON per ALLARGARLA (cursore passa sopra iframe
   nella pane destra → drag bloccato).
   Fix: durante il drag (:active su .dxbl-splitter-separator-draggable in v25.2.3) tutti gli
   iframe della pagina perdono pointer-events fino al mouseup. CSS globale (non scoped) perche'
   il selettore deve matchare elementi renderizzati da DxSplitter che non ereditano gli attributi
   di scope dei singoli componenti Blazor.
   Aggiungiamo anche user-select:none e cursor sul body per evitare selezione testo
   accidentale che interromperebbe il drag e per dare feedback visivo coerente. */
/* v25.2.3: lo stato "drag" e' espresso da :active pseudo-class su .dxbl-splitter-separator
   con classe modifier .dxbl-splitter-separator-draggable (NON da una classe -active come
   in versioni precedenti). */
body:has(.dxbl-splitter-separator-draggable:active) iframe {
    pointer-events: none !important;
}
body:has(.dxbl-splitter-horizontal .dxbl-splitter-separator-draggable:active) {
    cursor: col-resize !important;
    user-select: none;
}
body:has(.dxbl-splitter-vertical .dxbl-splitter-separator-draggable:active) {
    cursor: row-resize !important;
    user-select: none;
}


/* ── Editor "personalizza" riordinabile — checkbox + su/giù ──────────────────
   Nato per le azioni rapide della home (#306) e vissuto dentro lo <style> di
   Home.razor finché era usato da una pagina sola. Con #313 lo riusa anche la
   personalizzazione delle sezioni del visualizzatore documento: uno <style> di
   pagina non arriva alle altre pagine, quindi le regole stanno qui. Il prefisso
   .qa- resta per non toccare il markup esistente. */
.qa-editor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qa-editor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
}
.qa-editor-row:hover {
    background: var(--o365-gray-10, #faf9f8);
}
.qa-editor-label {
    flex: 1;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qa-editor-move {
    border: none;
    background: transparent;
    color: var(--o365-gray-130, #605e5c);
    cursor: pointer;
    border-radius: 4px;
    width: 24px;
    height: 24px;
}
.qa-editor-move:hover:not(:disabled) {
    background: var(--o365-gray-20, #f3f2f1);
}
.qa-editor-move:disabled {
    opacity: 0.3;
    cursor: default;
}