/* ============================================================================
   Dental Gallery — Component Library (admin app)
   Reusable classes that replace repeated inline styles. Load AFTER style.css.
   Depends on tokens.css.
   ============================================================================ */

/* ====================== A11Y: keyboard focus ============================== */
/* A single visible focus ring for the whole app (was: none anywhere). */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.submenu-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Don't show the ring for mouse users that don't support :focus-visible */
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only helper */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

/* ====================== Buttons ========================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); border: var(--glass-border);
    background: rgba(255, 255, 255, 0.04); color: var(--text-primary);
    font-family: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer;
    transition: transform var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1),
                background var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease,
                border-color var(--transition-fast) ease;
    white-space: nowrap; line-height: 1.2;
    position: relative;
    overflow: hidden;
}
.btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none !important; }
.btn i { font-size: 0.95em; }

.btn-sm { padding: 0.45rem 0.85rem; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 6px 20px var(--glow-primary);
}
.btn-danger { background: var(--accent-danger); border-color: var(--accent-danger); color: #fff; }
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 6px 20px var(--glow-danger);
}
.btn-success { background: var(--accent-success); border-color: var(--accent-success); color: #fff; }
.btn-success:hover {
    background: #059669;
    border-color: #059669;
    box-shadow: 0 6px 20px var(--glow-success);
}
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); box-shadow: none; }

/* ====================== Form fields ===================================== */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; }
.input, .select, .textarea {
    width: 100%; padding: 0.7rem 0.85rem; border: var(--glass-border);
    border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary); font-family: inherit; font-size: var(--fs-md);
    outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
    border-color: rgba(59, 130, 246, 0.6);
}
.textarea { resize: vertical; min-height: 90px; }

/* ====================== Section heading ================================= */
.section-title { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xl); margin-bottom: 0.4rem; }
.section-title i { color: var(--accent-primary); }
.section-subtitle { color: var(--text-secondary); font-size: var(--fs-md); }

/* ====================== Generic modal (for Phase 2 migration) =========== */
.modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal.open { display: flex; animation: dlgFade 0.2s ease-out; }
.modal-card {
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    padding: 1.8rem; border-radius: var(--radius-lg);
    background: var(--bg-surface-2); border: var(--glass-border); box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* ====================== Loading skeleton =============================== */
.skeleton {
    position: relative; overflow: hidden;
    background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm);
}
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: skeletonSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.skeleton-text { height: 0.85rem; margin: 0.4rem 0; }
.skeleton-row { height: 2.6rem; margin-bottom: 0.5rem; }
@keyframes skeletonSweep { 100% { transform: translateX(100%); } }

/* ====================== Empty state ==================================== */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 0.6rem; padding: 2.5rem 1.5rem; color: var(--text-secondary);
}
.empty-state i { font-size: 2.4rem; color: var(--text-muted); }
.empty-state h4 { color: var(--text-primary); font-size: var(--fs-lg); }
.empty-state p { font-size: var(--fs-md); max-width: 360px; }

/* ====================== Styled dialog (alert/confirm/prompt) ============ */
/* Replaces the native browser dialogs. Driven by app.js helpers. */
#dgDialogHost { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
#dgDialogHost.open { display: block; }
.dlg-backdrop {
    position: absolute; inset: 0; background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: dlgFade 0.2s ease-out;
}
.dlg-card {
    position: relative; z-index: 1; width: min(440px, calc(100vw - 2.5rem));
    margin: 12vh auto 0; padding: 1.6rem 1.6rem 1.4rem; text-align: right;
    border-radius: var(--radius-lg); background: var(--bg-surface-2);
    border: var(--glass-border); border-top: 4px solid var(--accent-primary);
    box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    animation: dlgPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dlg-card.dlg-danger { border-top-color: var(--accent-danger); }
.dlg-card.dlg-warning { border-top-color: var(--accent-warning); }
.dlg-card.dlg-success { border-top-color: var(--accent-success); }
.dlg-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.dlg-icon {
    width: 42px; height: 42px; min-width: 42px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--accent-primary-soft); color: var(--accent-primary);
}
.dlg-danger .dlg-icon { background: var(--accent-danger-soft); color: var(--accent-danger); }
.dlg-warning .dlg-icon { background: var(--accent-warning-soft); color: var(--accent-warning); }
.dlg-success .dlg-icon { background: var(--accent-success-soft); color: var(--accent-success); }
.dlg-title { font-size: var(--fs-lg); font-weight: 700; }
.dlg-body { color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.7; white-space: pre-line; margin-bottom: 1.1rem; }
.dlg-input {
    width: 100%; padding: 0.7rem 0.85rem; margin-bottom: 1.1rem; border: var(--glass-border);
    border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.35); color: var(--text-primary);
    font-family: inherit; font-size: var(--fs-md); outline: none;
}
.dlg-input:focus { border-color: var(--accent-primary); box-shadow: var(--focus-ring); }
.dlg-actions { display: flex; justify-content: flex-start; gap: 0.7rem; }

@keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgPop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ====================== Toast / notification =========================== */
#dgToastHost {
    position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 2147483000;
    display: flex; flex-direction: column; gap: 0.6rem; max-width: min(380px, calc(100vw - 2rem));
}
.dg-toast {
    display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1.1rem;
    border-radius: var(--radius-md); background: var(--bg-surface-2); border: var(--glass-border);
    border-right: 4px solid var(--accent-primary); color: var(--text-primary);
    box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-size: var(--fs-md); direction: rtl;
    transform: translateX(-120%); opacity: 0; transition: transform var(--transition-slow), opacity var(--transition-slow);
}
.dg-toast.show { transform: translateX(0); opacity: 1; }
.dg-toast .dg-toast-ico { font-size: 1.15rem; margin-top: 0.1rem; color: var(--accent-primary); }
.dg-toast.t-success { border-right-color: var(--accent-success); }
.dg-toast.t-success .dg-toast-ico { color: var(--accent-success); }
.dg-toast.t-danger { border-right-color: var(--accent-danger); }
.dg-toast.t-danger .dg-toast-ico { color: var(--accent-danger); }
.dg-toast.t-warning { border-right-color: var(--accent-warning); }
.dg-toast.t-warning .dg-toast-ico { color: var(--accent-warning); }
.dg-toast .dg-toast-msg { flex: 1; line-height: 1.5; white-space: pre-line; word-break: break-word; }

/* ====================== Mobile sidebar (hamburger) ===================== */
/* The hamburger + backdrop are hidden on desktop, shown < 768px. */
#mobileNavToggle { display: none; }
#sidebarBackdrop {
    position: fixed; inset: 0; z-index: 90; display: none;
    background: rgba(3, 7, 18, 0.6); backdrop-filter: blur(2px);
}
#sidebarBackdrop.show { display: block; }

@media (max-width: 768px) {
    #mobileNavToggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 45px; height: 45px; border-radius: var(--radius-md);
        background: var(--bg-surface); border: var(--glass-border); color: var(--text-primary);
        cursor: pointer; font-size: 1.15rem; flex-shrink: 0;
    }
    /* Sidebar slides in from the right when .open is present */
    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: var(--shadow-lg);
    }
}

/* ====================== Utility classes (Phase 2 migration targets) =======
   These mirror the most-repeated inline-style blocks in index.html so they
   can be swapped in incrementally: style="..." -> class="...". */
.txt-2 { color: var(--text-secondary); }
.txt-2-sm { color: var(--text-secondary); font-size: var(--fs-base); }
.txt-2-xs { color: var(--text-secondary); font-size: var(--fs-sm); }
.txt-muted { color: var(--text-muted); font-size: var(--fs-sm); }
.flex-col { display: flex; flex-direction: column; }
.field-col-sm { display: flex; flex-direction: column; gap: 0.3rem; }
.field-col-4 { display: flex; flex-direction: column; gap: 0.4rem; }
.field-col { display: flex; flex-direction: column; gap: 0.5rem; }
.field-col-lg { display: flex; flex-direction: column; gap: 1rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.row-between-mb { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.5rem; cursor: pointer; line-height: 1;
    transition: color var(--transition-fast);
}
.modal-close:hover { color: var(--text-primary); }

/* Faithful 1:1 replacement for the most-repeated inline input block
   (no width change, so it's drop-in safe for inputs in any layout). */
.inp {
    padding: 0.8rem; border: var(--glass-border); color: var(--text-primary);
    background: rgba(0, 0, 0, 0.3); border-radius: var(--radius-sm); outline: none;
    font-family: inherit; transition: border-color var(--transition-fast);
}
.inp:focus { border-color: rgba(59, 130, 246, 0.6); }

/* Shared modal overlay (centred backdrop). Hidden by default; openModal()/
   closeModal() toggle inline display. Replaces ~41 identical inline wrappers. */
.modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ====================== Safe base styles for form controls ================
   Lower specificity than any inline style, so these only FILL GAPS — they can
   never override an element that already sets the property inline. Scoped to
   the admin shell so the login overlay / portal are untouched. */
.app-container label { cursor: default; }
.app-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.dlg-input),
.app-container select,
.app-container textarea {
    font-family: inherit;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.3);
    border: var(--glass-border);
    border-radius: var(--radius-sm);
    outline: none;
}
.app-container input::placeholder,
.app-container textarea::placeholder { color: var(--text-muted); }

/* ====================== Canonical tab component =========================== */
.tabs {
    display: flex; gap: 0.5rem; padding: 0.5rem; margin-bottom: 1.5rem;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tab {
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary); padding: 0.6rem 1.2rem; border-radius: var(--radius-sm);
    font-size: var(--fs-md); font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all var(--transition); display: inline-flex; align-items: center; gap: 0.5rem;
}
.tabs.acad-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
}
.tabs.acad-tabs .acad-tab2 {
    flex: 1 1 150px;
    justify-content: center;
}
.tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.tab.active {
    background: var(--accent-primary); color: #fff; border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* ====================== LMS course-editor (tabbed) ======================= */
.lms-tab-pane { display: none; }
.lms-tab-pane.active { display: block; }
.lms-editor-grid { display: grid; grid-template-columns: 360px 1fr; gap: 1.3rem; align-items: start; }
@media (max-width: 900px) { .lms-editor-grid { grid-template-columns: 1fr; } }
.lms-course-card { padding: 0.9rem; border-radius: 10px; background: rgba(255, 255, 255, 0.025); cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.lms-course-card:hover { transform: translateY(-2px); border-color: rgba(59, 130, 246, 0.4); }
.lms-preview-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lms-library-filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:.4rem; margin-bottom:.6rem; }
.lms-tag-row { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.25rem; }.lms-tag-row span { padding:.12rem .35rem; border-radius:999px; background:rgba(99,102,241,.12); color:#c4b5fd; font-size:.64rem; }
.lms-lifecycle-badge { padding:.25rem .55rem; border-radius:999px; font-size:.72rem; background:rgba(148,163,184,.15); color:var(--text-secondary); }.lms-lifecycle-badge[data-status="published"] { background:rgba(34,197,94,.15); color:var(--accent-success); }.lms-lifecycle-badge[data-status="ready"] { background:rgba(59,130,246,.15); color:var(--accent-primary); }.lms-lifecycle-badge[data-status="archived"] { color:#94a3b8; }
.lms-validation-panel { margin-bottom:1rem; padding:.8rem; border:1px solid rgba(148,163,184,.2); border-radius:10px; background:rgba(15,23,42,.22); }.lms-validation-head { display:flex; justify-content:space-between; gap:.5rem; }.lms-validation-head .valid { color:var(--accent-success); }.lms-validation-head .invalid { color:var(--accent-danger); }.lms-validation-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.4rem; margin-top:.6rem; }.lms-validation-list>div { display:flex; gap:.4rem; padding:.4rem; border-radius:7px; background:rgba(148,163,184,.07); font-size:.76rem; }.lms-validation-list .ok i { color:var(--accent-success); }.lms-validation-list .bad i { color:var(--accent-danger); }.lms-validation-list small { display:block; color:var(--text-secondary); }.lms-validation-errors { color:#fca5a5; font-size:.76rem; }.lms-validation-warnings { color:#fcd34d; font-size:.76rem; }
.lms-analytics-actions { display:flex; justify-content:flex-end; gap:.4rem; margin-bottom:.7rem; }.lms-analytics-actions button,.lms-modal-head button { border:1px solid rgba(148,163,184,.23); background:rgba(15,23,42,.25); color:var(--text-primary); border-radius:7px; padding:.35rem .6rem; cursor:pointer; font:inherit; }.lms-analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.7rem; margin-top:1rem; }.lms-analytics-grid section { padding:.7rem; border-radius:9px; background:rgba(148,163,184,.07); }.lms-analytics-grid h4 { margin:0 0 .4rem; color:var(--accent-secondary); }.lms-analytics-grid p { display:flex; justify-content:space-between; gap:.5rem; margin:.3rem 0; font-size:.75rem; }.lms-analytics-grid p span { color:var(--accent-primary); font-weight:700; }
.lms-modal-head { display:flex; justify-content:space-between; gap:.5rem; align-items:center; }.lms-modal-head h3 { margin:0; }.lms-history-row { display:grid; gap:.15rem; padding:.6rem 0; border-bottom:1px solid rgba(148,163,184,.15); }.lms-history-row span { color:var(--text-secondary); font-size:.75rem; }
@media (max-width:760px) { .lms-library-filters { grid-template-columns:1fr 1fr; } }
.lms-preview-card { width: min(720px, 100%); max-height: 86vh; overflow-y: auto; padding: 1.4rem; }

/* ====================== Frontend enhancement layer ========================
   Runtime helpers injected by frontend_enhancements.js. Names are prefixed so
   they can sit above the existing large inline-styled app without collisions. */
body.dg-modal-open { overflow: hidden; }

.dg-breadcrumb-shell {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    margin-top: -0.7rem; margin-bottom: 0.3rem; min-height: 38px;
}
.dg-breadcrumbs {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    color: var(--text-secondary); font-size: var(--fs-sm);
}
.dg-breadcrumbs .dg-crumb {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.58rem; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.055);
}
.dg-breadcrumbs .dg-crumb:last-child {
    color: var(--text-primary); background: var(--accent-primary-soft);
    border-color: rgba(59,130,246,0.24);
}
.dg-recent-links {
    display: flex; align-items: center; gap: 0.35rem; max-width: 50%;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 0.05rem;
}
.dg-recent-links::-webkit-scrollbar { display: none; }
.dg-recent-chip {
    border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.035);
    color: var(--text-secondary); border-radius: var(--radius-full);
    padding: 0.28rem 0.62rem; font-family: inherit; font-size: var(--fs-xs);
    cursor: pointer; white-space: nowrap; transition: var(--transition-fast);
}
.dg-recent-chip:hover { color: var(--text-primary); background: rgba(255,255,255,0.07); }

.dg-sidebar-filter {
    position: relative; margin: -1.2rem 0 0.8rem;
}
.dg-sidebar-filter i {
    position: absolute; right: 0.72rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.82rem; pointer-events: none;
}
.dg-sidebar-filter input {
    width: 100%; padding: 0.55rem 2rem 0.55rem 0.75rem;
    border: var(--glass-border); border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.24); color: var(--text-primary);
    font-family: inherit; font-size: var(--fs-sm); outline: none;
}
.dg-sidebar-filter input:focus { border-color: rgba(59,130,246,0.45); box-shadow: var(--focus-ring); }
.sidebar .dg-nav-hidden { display: none !important; }

.dg-command-trigger {
    width: auto; min-width: 45px; padding: 0 0.75rem; gap: 0.45rem;
    font-size: var(--fs-sm);
}
.dg-command-trigger kbd {
    direction: ltr; font-family: 'Outfit', monospace; font-size: 0.68rem;
    color: var(--text-muted); border: 1px solid rgba(255,255,255,0.12);
    border-bottom-color: rgba(255,255,255,0.22); border-radius: 5px;
    padding: 0.05rem 0.32rem; background: rgba(0,0,0,0.22);
}

.dg-command-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: flex-start; justify-content: center;
    padding: 9vh 1rem 1rem; background: rgba(3,7,18,0.72);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.dg-command-overlay.open { display: flex; animation: dlgFade 0.18s ease-out; }
.dg-command-card {
    width: min(720px, 100%); max-height: min(74vh, 720px); overflow: hidden;
    border-radius: var(--radius-lg); background: var(--bg-surface-2);
    border: var(--glass-border); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
}
.dg-command-head {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dg-command-head i { color: var(--accent-primary); }
.dg-command-input {
    flex: 1; border: none; outline: none; background: transparent;
    color: var(--text-primary); font-family: inherit; font-size: var(--fs-lg);
}
.dg-command-input::placeholder { color: var(--text-muted); }
.dg-command-close {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: var(--glass-border); background: rgba(255,255,255,0.04);
    color: var(--text-secondary); cursor: pointer;
}
.dg-command-results { overflow-y: auto; padding: 0.45rem; }
.dg-command-empty {
    color: var(--text-secondary); text-align: center; padding: 2rem 1rem;
}
.dg-command-row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
    gap: 0.75rem; width: 100%; padding: 0.72rem 0.8rem; border: 0;
    border-radius: var(--radius-md); background: transparent; color: var(--text-primary);
    text-align: right; font-family: inherit; cursor: pointer;
}
.dg-command-row:hover, .dg-command-row.active { background: rgba(255,255,255,0.065); }
.dg-command-icon {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); color: var(--accent-primary);
    background: var(--accent-primary-soft);
}
.dg-command-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-command-meta { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 0.12rem; }
.dg-command-kind {
    color: var(--text-muted); font-size: var(--fs-xs); border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-full); padding: 0.18rem 0.5rem; white-space: nowrap;
}

.table-container.dg-enhanced-table {
    position: relative; overflow: auto; border-radius: var(--radius-lg);
}
.dg-table-toolbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 0.65rem; margin: 0 0 0.85rem;
}
.dg-table-search {
    position: relative; flex: 1 1 220px; max-width: 420px;
}
.dg-table-search i {
    position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.82rem; pointer-events: none;
}
.dg-table-search input {
    width: 100%; padding: 0.55rem 2rem 0.55rem 0.75rem;
    border: var(--glass-border); border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.24); color: var(--text-primary);
    font-family: inherit; font-size: var(--fs-sm); outline: none;
}
.dg-table-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dg-table-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: 32px; padding: 0.36rem 0.65rem; border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035);
    color: var(--text-secondary); font-family: inherit; font-size: var(--fs-xs);
    cursor: pointer; transition: var(--transition-fast);
}
.dg-table-btn:hover, .dg-table-btn.active { color: var(--text-primary); background: rgba(255,255,255,0.08); }
.dg-table-count { color: var(--text-muted); font-size: var(--fs-xs); }
.dg-table-empty-row td {
    text-align: center !important; color: var(--text-secondary) !important;
    padding: 1.4rem !important;
}
.dg-enhanced-table .modern-table th {
    position: sticky; top: 0; z-index: 2; background: rgba(15,23,42,0.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dg-enhanced-table.dg-density-compact .modern-table th,
.dg-enhanced-table.dg-density-compact .modern-table td {
    padding-top: 0.62rem; padding-bottom: 0.62rem; font-size: 0.84rem;
}
.dg-enhanced-table.dg-density-comfort .modern-table th,
.dg-enhanced-table.dg-density-comfort .modern-table td {
    padding-top: 1.15rem; padding-bottom: 1.15rem;
}

.chart-fallback {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.55rem;
    color: var(--text-secondary); text-align: center; padding: 1rem;
    border-radius: var(--radius-md); background: rgba(255,255,255,0.025);
    border: 1px dashed rgba(255,255,255,0.12);
}
.chart-fallback i { color: var(--accent-warning); font-size: 1.5rem; }
.chart-fallback span { font-size: var(--fs-sm); }

button[aria-busy="true"] {
    cursor: progress !important;
    opacity: 0.72;
}
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}
.dg-command-close:focus-visible,
.dg-command-row:focus-visible,
.dg-table-btn:focus-visible,
.dg-recent-chip:focus-visible,
.dg-sidebar-filter input:focus-visible,
.dg-table-search input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.modal-overlay.dg-modal-visible,
.modal.dg-modal-visible { display: flex !important; }
.modal-overlay > .glass-panel,
.modal-overlay > div > .glass-panel {
    overscroll-behavior: contain;
}

@media (max-width: 900px) {
    .dg-breadcrumb-shell { align-items: flex-start; flex-direction: column; margin-top: -0.2rem; }
    .dg-recent-links { max-width: 100%; width: 100%; }
    .dg-command-trigger kbd { display: none; }
}
@media (max-width: 768px) {
    .dg-command-overlay { padding-top: 5vh; }
    .dg-command-card { max-height: 86vh; }
    .dg-command-row { grid-template-columns: 30px minmax(0, 1fr); }
    .dg-command-kind { display: none; }
    .dg-table-toolbar { align-items: stretch; }
    .dg-table-search { max-width: none; }
    .dg-table-actions { width: 100%; }
    .dg-table-btn { flex: 1; }
}

/* ====================== Sortable table headers ========================= */
.modern-table th.dg-sortable {
    cursor: pointer; user-select: none; position: relative;
    padding-left: 1.3rem; transition: color var(--transition-fast);
}
.modern-table th.dg-sortable:hover { color: var(--text-primary); }
.modern-table th.dg-sortable::after {
    content: '\f0dc'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0.45rem; top: 50%; transform: translateY(-50%);
    font-size: 0.7rem; opacity: 0.3; transition: opacity var(--transition-fast);
}
.modern-table th.dg-sort-asc::after { content: '\f0de'; opacity: 0.95; color: var(--accent-primary); }
.modern-table th.dg-sort-desc::after { content: '\f0dd'; opacity: 0.95; color: var(--accent-primary); }

/* ====================== FAB quick-add ================================= */
.dg-fab-root {
    position: fixed; bottom: 1.6rem; left: 1.6rem; z-index: var(--z-toast);
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.7rem;
}
.dg-fab-btn {
    width: 56px; height: 56px; border-radius: var(--radius-full); border: none;
    background: var(--accent-primary); color: #fff; font-size: 1.4rem; cursor: pointer;
    box-shadow: 0 8px 24px var(--glow-primary), var(--shadow-md);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--transition), background var(--transition-fast);
}
.dg-fab-btn:hover { background: #2563eb; transform: scale(1.06); }
.dg-fab-root.open .dg-fab-btn { background: var(--accent-danger); transform: rotate(90deg); }
.dg-fab-menu {
    display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height var(--transition), opacity var(--transition-fast);
}
.dg-fab-root.open .dg-fab-menu { max-height: 70vh; opacity: 1; pointer-events: auto; overflow: visible; }
.dg-fab-item {
    display: flex; align-items: center; gap: 0.65rem; padding: 0; border: none;
    background: transparent; cursor: pointer; font-family: inherit;
    animation: fabItemIn 0.18s ease-out backwards;
}
.dg-fab-item .dg-fab-label {
    background: var(--bg-surface-2); border: var(--glass-border); color: var(--text-primary);
    padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); font-size: var(--fs-sm);
    font-weight: 600; box-shadow: var(--shadow-sm); white-space: nowrap;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dg-fab-item .dg-fab-ico {
    width: 42px; height: 42px; border-radius: var(--radius-full); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface-2); border: var(--glass-border); color: var(--accent-primary);
    box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.dg-fab-item:hover .dg-fab-ico { background: var(--accent-primary); color: #fff; transform: scale(1.08); }
@keyframes fabItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ====================== Keyboard shortcuts overlay ==================== */
.dg-shortcuts-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dg-shortcuts-card {
    width: min(460px, 100%); padding: 1.5rem; border-radius: var(--radius-lg);
    background: var(--bg-surface-2); border: var(--glass-border); box-shadow: var(--shadow-lg);
    animation: dlgPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dg-shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dg-shortcuts-head h3 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-lg); }
.dg-shortcuts-head i { color: var(--accent-primary); }
.dg-shortcut-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dg-shortcut-row:last-child { border-bottom: none; }
.dg-shortcut-desc { color: var(--text-secondary); font-size: var(--fs-sm); }
.dg-shortcut-keys { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.dg-shortcut-keys kbd {
    direction: ltr; font-family: 'Outfit', monospace; font-size: 0.74rem; color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-color: rgba(255, 255, 255, 0.24);
    border-radius: 5px; padding: 0.18rem 0.45rem; background: rgba(0, 0, 0, 0.28); min-width: 22px; text-align: center;
}
.dg-shortcut-plus { color: var(--text-muted); font-size: 0.7rem; }

/* ====================== Unsaved-changes dialog ======================= */
.dg-unsaved-dialog {
    position: fixed; inset: 0; z-index: var(--z-shield);
    align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dg-unsaved-card {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    width: min(440px, 100%); padding: 1.4rem; border-radius: var(--radius-lg);
    background: var(--bg-surface-2); border: var(--glass-border);
    border-top: 4px solid var(--accent-warning); box-shadow: var(--shadow-lg);
    animation: dlgPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dg-unsaved-text { flex: 1; min-width: 180px; }
.dg-unsaved-text strong { font-size: var(--fs-lg); }
.dg-unsaved-text p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 0.25rem; }
.dg-unsaved-actions { display: flex; gap: 0.6rem; width: 100%; justify-content: flex-start; }

/* ====================== Form draft banner ============================ */
.dg-draft-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm);
    background: var(--accent-warning-soft); border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--text-primary); font-size: var(--fs-sm);
}
.dg-draft-actions { display: flex; gap: 0.4rem; }
.dg-draft-banner button {
    border: none; border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer;
    font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
}
.dg-draft-restore { background: var(--accent-warning); color: #111; }
.dg-draft-dismiss { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

@media (max-width: 768px) {
    .dg-fab-root { bottom: 5.2rem; left: 1rem; }  /* clear of mobile nav */
    .dg-fab-btn { width: 50px; height: 50px; font-size: 1.2rem; }
}

/* ====================== Global search result rows ===================== */
#globalSearchResults .gs-row {
    padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer;
    background: rgba(255, 255, 255, 0.03); transition: background var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#globalSearchResults .gs-row:hover,
#globalSearchResults .gs-row.active { background: rgba(255, 255, 255, 0.09); }

/* ====================== Personal Settings — pref chips ==================== */
.pref-chip {
    padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: var(--text-secondary); cursor: pointer;
    font-family: inherit; font-size: var(--fs-sm); transition: all var(--transition-fast);
}
.pref-chip:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.pref-chip.active {
    background: var(--accent-primary); border-color: var(--accent-primary);
    color: #fff; box-shadow: 0 0 12px var(--glow-primary);
}

/* Accent color swatches */
.accent-swatch {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
    background: var(--sw); cursor: pointer; transition: all var(--transition-fast);
    padding: 0; position: relative;
}
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active {
    border-color: #fff; box-shadow: 0 0 10px var(--sw);
    transform: scale(1.2);
}
.accent-swatch.active::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: #fff; font-size: 12px; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Toggle switch */
.dg-switch {
    position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0;
}
.dg-switch input { opacity: 0; width: 0; height: 0; }
.dg-switch-slider {
    position: absolute; inset: 0; background: rgba(255,255,255,0.12); border-radius: 24px;
    cursor: pointer; transition: background var(--transition-fast);
}
.dg-switch-slider::before {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px; transition: transform var(--transition-fast);
}
.dg-switch input:checked + .dg-switch-slider { background: var(--accent-primary); }
.dg-switch input:checked + .dg-switch-slider::before { transform: translateX(18px); }

/* Reduce-motion global override */
.dg-reduce-motion * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.dg-compact .glass-panel { padding: 0.8rem !important; }
.dg-compact .view-section { gap: 0.8rem; }

/* Light-theme overrides for pref-chip / accent-swatch */
:root[data-theme="light"] .pref-chip {
    border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: var(--text-secondary);
}
:root[data-theme="light"] .pref-chip:hover { background: rgba(0,0,0,0.08); }
:root[data-theme="light"] .dg-switch-slider { background: rgba(0,0,0,0.15); }

/* Extracted utility classes */
.glass-input-main { width: 100%; padding: 0.7rem; border: var(--glass-border); border-radius: 8px; color: white; background: rgba(0,0,0,0.35); outline: none; font-family: inherit; }
.glass-input-alt { padding: 0.8rem; border: var(--glass-border); color: var(--text-primary); background: rgba(0,0,0,0.3); border-radius: 8px; outline: none; font-family: inherit; }
.glass-input-sm { padding: 0.6rem; border: var(--glass-border); color: white; background: rgba(0,0,0,0.3); border-radius: 8px; outline: none; font-family: inherit; }
.icon-btn-plain { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; }
.modal-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.flex-col-gap { display: flex; flex-direction: column; gap: 0.9rem; }

/* ====================== Inventory / Materials tab navigation =============== */
.inv-tabs {
    display: flex;
    gap: 0.45rem;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.inv-tabs::-webkit-scrollbar { height: 4px; }
.inv-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
.inv-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.55rem 1.05rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}
.inv-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.inv-tab.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.inv-pane { display: none; animation: fadeIn 0.35s ease-out; }
.inv-pane.active { display: block; }
.inv-op-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 120px;
    width: 100%;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.inv-op-card i { font-size: 1.6rem; }
.inv-op-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }

/* DG canonical tab alignment patch */
.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    line-height: 1.35;
    white-space: nowrap;
    flex: 0 0 auto;
}
.tab i { width: 1.1em; min-width: 1.1em; text-align: center; line-height: 1; }

/* ============================================================================
   Dental Gallery — Modern Micro-UI Components (Phase 3 & 4 Enhancements)
   Skeleton Loaders, Empty States, Toast System, Badges & Financial Formats
   ============================================================================ */

/* 1. Skeleton Loaders (Shimmer effect for smooth dynamic fetching) */
@keyframes dgShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.dg-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.09) 37%,
        rgba(255, 255, 255, 0.04) 63%
    );
    background-size: 400% 100%;
    animation: dgShimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.dg-skeleton-text {
    height: 1rem;
    width: 80%;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.dg-skeleton-title {
    height: 1.5rem;
    width: 50%;
    margin-bottom: 0.8rem;
    border-radius: 6px;
}

.dg-skeleton-card {
    height: 120px;
    width: 100%;
    border-radius: var(--radius-md);
    border: var(--glass-border);
}

.dg-skeleton-row {
    height: 48px;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm);
}

:root[data-theme="light"] .dg-skeleton {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.05) 25%,
        rgba(15, 23, 42, 0.12) 37%,
        rgba(15, 23, 42, 0.05) 63%
    );
    background-size: 400% 100%;
}

/* 2. Empty States Component (User guidance when no data is returned) */
.dg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    width: 100%;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.dg-empty-icon {
    font-size: 2.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.04);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-empty-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.dg-empty-subtitle {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    max-width: 400px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.dg-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

:root[data-theme="light"] .dg-empty-state {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.15);
}

:root[data-theme="light"] .dg-empty-icon {
    background: rgba(15, 23, 42, 0.05);
}

/* 3. Status Badges Component */
.dg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.dg-badge-success { background: var(--accent-success-soft); color: var(--accent-success); border: 1px solid rgba(16, 185, 129, 0.3); }
.dg-badge-warning { background: var(--accent-warning-soft); color: var(--accent-warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.dg-badge-danger  { background: var(--accent-danger-soft); color: var(--accent-danger); border: 1px solid rgba(239, 68, 68, 0.3); }
.dg-badge-info    { background: var(--accent-primary-soft); color: var(--accent-primary); border: 1px solid rgba(59, 130, 246, 0.3); }
.dg-badge-neutral { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.12); }

/* 4. Financial & Numerical Precision Formatters */
.dg-num, .tabular-nums {
    direction: ltr !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'Outfit', 'Consolas', monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pos-num { color: var(--accent-success) !important; }
.neg-num { color: var(--accent-danger) !important; }

/* 5. Modern Toast Notification Enhancements */
#dgToastHost {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
    width: calc(100vw - 3rem);
    pointer-events: none;
}

.dg-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.15rem;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary);
    border: var(--glass-border);
    box-shadow: var(--shadow-lg);
    animation: dgToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: var(--fs-md);
    line-height: 1.4;
    direction: rtl;
}

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

.dg-toast-success { border-right: 4px solid var(--accent-success); }
.dg-toast-danger  { border-right: 4px solid var(--accent-danger); }
.dg-toast-warning { border-right: 4px solid var(--accent-warning); }
.dg-toast-info    { border-right: 4px solid var(--accent-primary); }

.dg-toast-icon { font-size: 1.25rem; flex-shrink: 0; }
.dg-toast-success .dg-toast-icon { color: var(--accent-success); }
.dg-toast-danger  .dg-toast-icon { color: var(--accent-danger); }
.dg-toast-warning .dg-toast-icon { color: var(--accent-warning); }
.dg-toast-info    .dg-toast-icon { color: var(--accent-primary); }

.dg-toast-content { flex: 1; }
.dg-toast-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: 0.15rem; }
.dg-toast-message { font-size: var(--fs-sm); color: var(--text-secondary); }

.dg-toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}
.dg-toast-close:hover { color: var(--text-primary); }