/* ══════════════════════════════════════════════════════
   EASY-GSM CMS — PREMIUM UI
══════════════════════════════════════════════════════ */

/* ── HTMX ── */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-swapping { opacity: 0.5; transition: opacity 200ms ease-out; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--p) / 0.3); }
* { scrollbar-width: thin; scrollbar-color: oklch(var(--bc) / 0.15) transparent; }

/* ══════════════════════════════════════
   ANIMATED MAIN CONTENT BACKGROUND
══════════════════════════════════════ */
#main-content {
    background: oklch(var(--b2));
    position: relative;
}
/* Animated gradient orbs */
#main-content::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at 75% 15%, oklch(var(--p) / 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 15% 85%, oklch(var(--a) / 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 35% 35% at 50% 50%, oklch(var(--s) / 0.04) 0%, transparent 60%);
    background-size: 200% 200%;
    animation: main-bg-drift 25s ease infinite;
}
/* Grid overlay */
#main-content::after {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(oklch(var(--bc) / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, oklch(var(--bc) / 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent 80%);
}
@keyframes main-bg-drift {
    0%, 100% { background-position: 0% 50%, 100% 80%, 50% 50%; }
    33% { background-position: 80% 20%, 20% 60%, 70% 30%; }
    66% { background-position: 40% 70%, 60% 20%, 30% 70%; }
}
#main-content > * { position: relative; z-index: 1; }

/* Page entrance */
#main-content > *:first-child { animation: page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes page-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════
   LIGHT THEME
══════════════════════════════ */
[data-theme="light"] aside.bg-base-100 { background: oklch(var(--b1)); }
[data-theme="light"] header.bg-base-100 { background: oklch(var(--b1)); }
[data-theme="light"] .dropdown-content { background: oklch(var(--b1)); }
[data-theme="light"] #main-content::before {
    background:
        radial-gradient(ellipse 50% 40% at 75% 15%, oklch(var(--p) / 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 15% 85%, oklch(var(--a) / 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 35% 35% at 50% 50%, oklch(var(--s) / 0.03) 0%, transparent 60%);
    background-size: 200% 200%;
    animation: main-bg-drift 25s ease infinite;
}

/* ══════════════════════════════
   TOGGLE / SWITCH — complete restyle
   Uses double-class specificity to beat DaisyUI CDN
══════════════════════════════ */
input.toggle.toggle {
    --tglbg: oklch(var(--b1));
    border-color: oklch(var(--bc) / 0.2);
    background-color: oklch(var(--bc) / 0.15);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-shadow: inset 0 1px 3px oklch(var(--bc) / 0.08);
}
input.toggle.toggle:hover {
    border-color: oklch(var(--bc) / 0.35);
    background-color: oklch(var(--bc) / 0.22);
}
input.toggle.toggle:checked {
    --tglbg: #fff;
    border-color: #22c55e;
    background-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.35), 0 0 3px rgba(34, 197, 94, 0.5);
}
input.toggle.toggle-primary:checked {
    --tglbg: #fff;
    border-color: oklch(var(--p));
    background-color: oklch(var(--p));
    box-shadow: 0 0 12px oklch(var(--p) / 0.35), 0 0 3px oklch(var(--p) / 0.5);
}
input.toggle.toggle-accent:checked {
    --tglbg: #fff;
    border-color: oklch(var(--a));
    background-color: oklch(var(--a));
    box-shadow: 0 0 12px oklch(var(--a) / 0.35), 0 0 3px oklch(var(--a) / 0.5);
}
input.toggle.toggle-success:checked {
    --tglbg: #fff;
    border-color: #22c55e;
    background-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.35), 0 0 3px rgba(34, 197, 94, 0.5);
}
input.toggle.toggle-warning:checked {
    --tglbg: #fff;
    border-color: oklch(var(--wa));
    background-color: oklch(var(--wa));
    box-shadow: 0 0 12px oklch(var(--wa) / 0.35), 0 0 3px oklch(var(--wa) / 0.5);
}
input.toggle.toggle-info:checked {
    --tglbg: #fff;
    border-color: oklch(var(--in));
    background-color: oklch(var(--in));
    box-shadow: 0 0 12px oklch(var(--in) / 0.35), 0 0 3px oklch(var(--in) / 0.5);
}
input.toggle.toggle-error:checked {
    --tglbg: #fff;
    border-color: oklch(var(--er));
    background-color: oklch(var(--er));
    box-shadow: 0 0 12px oklch(var(--er) / 0.35), 0 0 3px oklch(var(--er) / 0.5);
}

/* ── Checkbox ── */
input.checkbox.checkbox { border: 2px solid oklch(var(--bc) / 0.2); transition: all 0.25s ease; }
input.checkbox.checkbox:hover { border-color: oklch(var(--bc) / 0.35); }
input.checkbox.checkbox:checked { box-shadow: 0 0 8px oklch(var(--p) / 0.2); }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn { transition: all 0.25s ease; }
.btn-primary { box-shadow: 0 2px 10px oklch(var(--p) / 0.1); }
.btn-primary:hover { box-shadow: 0 0 18px oklch(var(--p) / 0.2), 0 4px 14px oklch(var(--p) / 0.12); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-success { box-shadow: 0 2px 10px oklch(var(--su) / 0.1); }
.btn-success:hover { box-shadow: 0 0 18px oklch(var(--su) / 0.2); transform: translateY(-1px); }
.btn-error { box-shadow: 0 2px 10px oklch(var(--er) / 0.1); }
.btn-error:hover { box-shadow: 0 0 18px oklch(var(--er) / 0.2); transform: translateY(-1px); }
.btn-warning { box-shadow: 0 2px 10px oklch(var(--wa) / 0.1); }
.btn-warning:hover { box-shadow: 0 0 18px oklch(var(--wa) / 0.2); transform: translateY(-1px); }
.btn-info { box-shadow: 0 2px 10px oklch(var(--in) / 0.1); }
.btn-info:hover { box-shadow: 0 0 18px oklch(var(--in) / 0.2); transform: translateY(-1px); }
.btn-outline:hover { transform: translateY(-1px); box-shadow: 0 4px 12px oklch(var(--bc) / 0.06); }
.btn-ghost:hover { background: oklch(var(--bc) / 0.05); }
.btn-primary:active, .btn-success:active, .btn-error:active, .btn-warning:active, .btn-info:active, .btn-outline:active { transform: translateY(0); }

/* ── Inputs ── */
.input, .select, .textarea { transition: border-color 0.25s, box-shadow 0.25s; }
.input:focus, .select:focus, .textarea:focus {
    border-color: oklch(var(--p) / 0.5);
    box-shadow: 0 0 0 3px oklch(var(--p) / 0.06), 0 0 12px oklch(var(--p) / 0.04);
}

/* ══════════════════════════════
   CARDS — fixed overflow + hover
══════════════════════════════ */
.card {
    border: 1px solid oklch(var(--bc) / 0.06);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}
.card:hover { border-color: oklch(var(--bc) / 0.1); }
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px oklch(var(--bc) / 0.08), 0 0 16px oklch(var(--p) / 0.03);
    border-color: oklch(var(--p) / 0.1);
}
.card-title i.fas, .card-title i.fab {
    color: oklch(var(--p));
    filter: drop-shadow(0 0 3px oklch(var(--p) / 0.12));
}
.label-text { font-weight: 500; font-size: 0.82rem; }

/* ══════════════════════════════
   TABLES
══════════════════════════════ */
.table tr { transition: background 0.15s; }
.table tr:hover td { background-color: oklch(var(--p) / 0.025); }
.table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: oklch(var(--bc) / 0.45); }

/* ── Badges ── */
.badge-primary { box-shadow: 0 0 6px oklch(var(--p) / 0.15); }
.badge-success { box-shadow: 0 0 6px oklch(var(--su) / 0.15); }
.badge-error { box-shadow: 0 0 6px oklch(var(--er) / 0.15); }
.badge-warning { box-shadow: 0 0 6px oklch(var(--wa) / 0.15); }
.badge-info { box-shadow: 0 0 6px oklch(var(--in) / 0.15); }

/* ══════════════════════════════
   ALERTS — premium banners
══════════════════════════════ */
.alert {
    border: 1px solid oklch(var(--bc) / 0.06);
    border-left: 4px solid;
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.alert-info {
    border-left-color: oklch(var(--in));
    background: oklch(var(--in) / 0.06);
    color: oklch(var(--bc));
}
.alert-success {
    border-left-color: oklch(var(--su));
    background: oklch(var(--su) / 0.06);
    color: oklch(var(--bc));
}
.alert-warning {
    border-left-color: oklch(var(--wa));
    background: oklch(var(--wa) / 0.06);
    color: oklch(var(--bc));
}
.alert-error {
    border-left-color: oklch(var(--er));
    background: oklch(var(--er) / 0.06);
    color: oklch(var(--bc));
}
/* Alert icon styling */
.alert i.fas, .alert i.far, .alert i.fab,
.alert svg {
    font-size: 1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

/* ══════════════════════════════
   ICON CONSISTENCY — uniform size
══════════════════════════════ */
/* Sidebar icons: fixed width for alignment */
.menu li > a > i.fas,
.menu li > a > i.far,
.menu li > a > i.fab,
.menu li > summary > i.fas,
.menu li > summary > i.far {
    font-size: 0.875rem;
    width: 1.25rem !important;
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Topbar icons: uniform */
header .btn-square i.fas,
header .btn-square i.far {
    font-size: 1.1rem;
}
/* Dropdown menu icons */
.dropdown-content li a i,
.dropdown-content li button i {
    font-size: 0.85rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ══════════════════════════════
   STATS
══════════════════════════════ */
.stat { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid oklch(var(--bc) / 0.05); }
.stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px oklch(var(--bc) / 0.06); }
.stat .stat-value.text-primary { background: linear-gradient(135deg, oklch(var(--p)), oklch(var(--p) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-value.text-secondary { background: linear-gradient(135deg, oklch(var(--s)), oklch(var(--s) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-value.text-success { background: linear-gradient(135deg, oklch(var(--su)), oklch(var(--su) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-value.text-warning { background: linear-gradient(135deg, oklch(var(--wa)), oklch(var(--wa) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-value.text-info { background: linear-gradient(135deg, oklch(var(--in)), oklch(var(--in) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-value.text-error { background: linear-gradient(135deg, oklch(var(--er)), oklch(var(--er) / 0.7)); -webkit-background-clip: text; background-clip: text; }
.stat .stat-figure i { transition: transform 0.3s ease, filter 0.3s ease; }
.stat:hover .stat-figure i { transform: scale(1.1); filter: drop-shadow(0 0 5px oklch(var(--p) / 0.15)); }

/* ── Modals ── */
.modal::backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-box { animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid oklch(var(--bc) / 0.06); box-shadow: 0 20px 50px oklch(var(--bc) / 0.15); }
@keyframes modal-pop { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ── Dropdowns — fixed user menu ── */
.dropdown-content {
    box-shadow: 0 12px 32px oklch(var(--bc) / 0.1);
    border: 1px solid oklch(var(--bc) / 0.08);
    background: oklch(var(--b1));
}

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
.menu li > a {
    transition: all 0.2s ease;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}
.menu li > a:hover { background: oklch(var(--bc) / 0.05); }
.menu li > a.active {
    background: oklch(var(--p) / 0.1);
    border-color: oklch(var(--p) / 0.15);
    color: oklch(var(--p));
    box-shadow: inset 3px 0 0 oklch(var(--p));
    font-weight: 600;
}
[dir="rtl"] .menu li > a.active { box-shadow: inset -3px 0 0 oklch(var(--p)); }
.menu li > a.active i { color: oklch(var(--p)); filter: drop-shadow(0 0 3px oklch(var(--p) / 0.2)); }
.menu li > a i { transition: color 0.2s, filter 0.2s; }
.menu-title {
    font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: oklch(var(--bc) / 0.3); font-weight: 700;
}

aside.bg-base-100 { border-right: 1px solid oklch(var(--bc) / 0.06); }
[dir="rtl"] aside.bg-base-100 { border-right: none; border-left: 1px solid oklch(var(--bc) / 0.06); }
aside .border-b { border-color: oklch(var(--bc) / 0.06) !important; }
aside .border-t { border-color: oklch(var(--bc) / 0.06) !important; }

/* ── Topbar ── */
header.bg-base-100.shadow-sm { box-shadow: 0 1px 6px oklch(var(--bc) / 0.04); border-bottom-color: oklch(var(--bc) / 0.06) !important; }

/* ── Avatar ── */
.avatar .bg-primary { box-shadow: 0 0 0 2px oklch(var(--b1)), 0 0 0 3px oklch(var(--p) / 0.3); }
.avatar .bg-neutral { box-shadow: 0 0 0 2px oklch(var(--b1)), 0 0 0 3px oklch(var(--bc) / 0.08); }

/* ── Balance ── */
#header-balance { box-shadow: 0 0 8px oklch(var(--su) / 0.15); transition: box-shadow 0.3s; }
#header-balance:hover { box-shadow: 0 0 14px oklch(var(--su) / 0.25); }

/* ── Notif pulse ── */
.indicator-item.badge-primary { animation: np 2s ease-in-out infinite; }
@keyframes np { 0%, 100% { box-shadow: 0 0 0 0 oklch(var(--p) / 0.3); } 50% { box-shadow: 0 0 0 4px oklch(var(--p) / 0); } }

/* ── Dividers ── */
.divider::before, .divider::after {
    background: linear-gradient(90deg, transparent, oklch(var(--bc) / 0.06), oklch(var(--bc) / 0.06), transparent);
}

/* ── Tabs ── */
.tab { transition: all 0.2s; }
.tab-active, .tab[aria-selected="true"] { box-shadow: 0 2px 0 oklch(var(--p)); }

/* ── Breadcrumbs ── */
.breadcrumbs a { transition: color 0.2s; }
.breadcrumbs a:hover { color: oklch(var(--p)); }

/* ── Pagination ── */
.join .btn.btn-active { box-shadow: 0 0 8px oklch(var(--p) / 0.1); }

/* ── Links ── */
a.link:hover, a.link-primary:hover { text-shadow: 0 0 6px oklch(var(--p) / 0.1); }

/* ── Settings submenu ── */
details ul { border-left-color: oklch(var(--p) / 0.1) !important; }
[dir="rtl"] details ul { border-left-color: transparent !important; border-right-color: oklch(var(--p) / 0.1) !important; }

/* ── User menu logout text fix ── */
.dropdown-content .text-error { color: oklch(var(--er)); }
.dropdown-content li a, .dropdown-content li button { border-radius: 0.5rem; transition: background 0.15s; }
.dropdown-content li a:hover, .dropdown-content li button:hover { background: oklch(var(--bc) / 0.05); }

/* ══════════════════════════════
   Accessibility
══════════════════════════════ */
:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.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;
}
a[href="#main-content"].sr-only:focus, a[href="#main-content"].sr-only:focus-visible {
    width: auto; height: auto; padding: 0.5rem 1rem; margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* ── Notification panel ── */
.notif-panel-scroll { scroll-behavior: smooth; }

/* ── Sticky action column ── */
.table-sticky-actions th:last-child, .table-sticky-actions td:last-child {
    position: sticky; right: 0; z-index: 1; background: oklch(var(--b1)); box-shadow: -2px 0 4px -2px rgba(0,0,0,0.08);
}
[dir="rtl"] .table-sticky-actions th:last-child, [dir="rtl"] .table-sticky-actions td:last-child {
    right: auto; left: 0; box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}
.table-sticky-actions tr:hover td:last-child { background: oklch(var(--b2)); }

/* ── Responsive ── */
@media (max-width: 767px) {
    .overflow-y-auto { overflow-x: hidden; }
    .api-keys-page .api-keys-card-body { padding: 0.875rem 0.9rem; }
    .api-keys-page .card-body .mockup-code pre { overflow-x: auto; }
    .api-docs-page .api-docs-card-body { padding: 0.875rem 0.9rem; }
    .api-docs-page .mockup-code, .api-docs-page .overflow-x-auto { max-width: 100%; }
    .api-docs-page .mockup-code pre, .api-docs-page pre code { overflow-wrap: break-word; word-break: normal; white-space: pre-wrap; }
}

/* ── List item card (dashboard recent orders/transactions) ── */
.list-item-card {
    background: oklch(var(--bc) / 0.03);
    border: 1px solid oklch(var(--bc) / 0.04);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.list-item-card:hover {
    border-color: oklch(var(--p) / 0.15);
    background: oklch(var(--p) / 0.03);
    transform: translateX(2px);
}
[dir="rtl"] .list-item-card:hover { transform: translateX(-2px); }

/* ── Disabled inputs ── */
input:disabled, select:disabled, textarea:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .btn, .stat, .card-hover, .menu li > a, .modal-box, .toggle, .checkbox,
    .indicator-item, #main-content > *:first-child, aside, .list-item-card,
    #main-content::before, .tab, .badge, .alert {
        transition: none !important; animation: none !important;
    }
}