/* ==========================================================================
   THEME.CSS - HIGH-POLISH PREMIUM STYLING
   Enforces standardized border-radii and premium aesthetics across the app
   ========================================================================== */

/* 1. Global Rounded UI Elements Preference */

/* Buttons (30px) */
.btn,
.btn-primary,
.btn-secondary,
button[type="submit"],
.add-event-btn,
.quick-add-btn,
.reports-action-btn,
.action-btn,
.sign-out-btn,
.add-client-inline-btn,
.mobile-fab,
.billing-save-btn,
.billing-timer-btn,
.billing-export-btn,
.nav-tab,
.filter-chip {
    border-radius: 30px !important;
}

/* Auth Screen Buttons */
#auth-container button[type="submit"] {
    border-radius: 30px !important;
}

/* Report Cards & Panels (24px) */
.report-panel,
.stat-card,
.attention-card,
.client-card,
.task-item,
.client-task-card,
.billing-stat-card,
.auth-form-container,
.modal-content,
.quick-view-panel {
    border-radius: 24px !important;
}

/* Left side Auth Panel */
@media screen and (min-width: 600px) {
    .auth-wrapper {
        border-radius: 24px !important;
    }
}

/* Header Stats (16px) */
.header-stat {
    border-radius: 16px !important;
}

/* 2. High-Polish Premium Styling for AuthScreen & Modals */

/* Auth Screen Refinements */
#auth-container {
    background: radial-gradient(circle at center, #1a1f2a 0%, #0d0f12 100%) !important;
}

.auth-wrapper {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.auth-form-container {
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}

[data-theme="dark"] .auth-form-container {
    background: rgba(26, 31, 42, 0.85) !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.auth-form-container input[type="email"],
.auth-form-container input[type="password"],
.auth-form-container input[type="text"] {
    border-radius: 16px !important; /* Slightly rounded inputs to match */
    border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="dark"] .auth-form-container input[type="email"],
[data-theme="dark"] .auth-form-container input[type="password"],
[data-theme="dark"] .auth-form-container input[type="text"] {
    border: 1.5px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.auth-form-container input:focus {
    border-color: var(--gold) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .auth-form-container input:focus {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Modals Premium Refinements */
.modal-content {
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    border: none !important;
    overflow: hidden;
}

[data-theme="dark"] .modal-content {
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    background: rgba(30, 30, 30, 0.9) !important;
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 24px 32px !important;
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.modal-body {
    padding: 32px !important;
}

.form-input, 
.form-textarea, 
.custom-dropdown-trigger {
    border-radius: 16px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="dark"] .form-input, 
[data-theme="dark"] .form-textarea, 
[data-theme="dark"] .custom-dropdown-trigger {
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.form-input:focus, 
.form-textarea:focus,
.custom-dropdown.open .custom-dropdown-trigger {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.15) !important;
    background: #fff !important;
}

[data-theme="dark"] .form-input:focus, 
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .custom-dropdown.open .custom-dropdown-trigger {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* General Premium Transitions for Interactive Elements */
.btn,
.stat-card,
.report-panel,
.client-card,
.task-item {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.stat-card:hover,
.report-panel:hover,
.client-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(201, 169, 97, 0.3) !important;
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .report-panel:hover,
[data-theme="dark"] .client-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 169, 97, 0.3) !important;
}

/* Soften shadows on the cards */
.stat-card,
.report-panel,
.client-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .report-panel,
[data-theme="dark"] .client-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

/* Motion refinement layer */
:root {
    --fluid-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --fluid-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --fluid-ease-press: cubic-bezier(0.3, 0, 0.8, 0.15);
    --fluid-fast: 180ms;
    --fluid-base: 280ms;
    --fluid-slow: 420ms;
}

body.motion-enhanced .header,
body.motion-enhanced .nav-tabs,
body.motion-enhanced .controls,
body.motion-enhanced .client-card,
body.motion-enhanced .report-panel,
body.motion-enhanced .task-card,
body.motion-enhanced .modal-content,
body.motion-enhanced .notification-dropdown,
body.motion-enhanced .kebab-dropdown,
body.motion-enhanced .filter-dropdown-menu,
body.motion-enhanced .custom-dropdown-options,
body.motion-enhanced .search-container,
body.motion-enhanced .sort-bar {
    backface-visibility: hidden;
    transform: translateZ(0);
}

body.motion-enhanced .btn,
body.motion-enhanced .action-btn,
body.motion-enhanced .filter-btn,
body.motion-enhanced .nav-tab,
body.motion-enhanced .filter-chip,
body.motion-enhanced .filter-dropdown-trigger,
body.motion-enhanced .custom-dropdown-trigger,
body.motion-enhanced .sort-btn,
body.motion-enhanced .modal-close,
body.motion-enhanced .search-container,
body.motion-enhanced .search-input,
body.motion-enhanced .client-select-item {
    transition:
        transform var(--fluid-base) var(--fluid-ease-out),
        opacity var(--fluid-fast) ease,
        box-shadow var(--fluid-base) var(--fluid-ease-soft),
        border-color var(--fluid-fast) ease,
        background-color var(--fluid-fast) ease,
        color var(--fluid-fast) ease !important;
}

body.motion-enhanced .btn:active,
body.motion-enhanced .action-btn:active,
body.motion-enhanced .filter-btn:active,
body.motion-enhanced .nav-tab:active,
body.motion-enhanced .filter-chip:active,
body.motion-enhanced .sort-btn:active,
body.motion-enhanced .filter-dropdown-trigger:active,
body.motion-enhanced .custom-dropdown-trigger:active {
    transition-duration: 120ms !important;
    transition-timing-function: var(--fluid-ease-press) !important;
    transform: translateY(0) scale(0.985);
}

body.motion-enhanced .nav-tab:hover,
body.motion-enhanced .filter-chip:hover,
body.motion-enhanced .sort-btn:hover,
body.motion-enhanced .filter-dropdown-trigger:hover,
body.motion-enhanced .custom-dropdown-trigger:hover,
body.motion-enhanced .client-select-item:hover {
    transform: translateY(-1px);
}

body.motion-enhanced .search-container:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(154, 52, 18, 0.08), 0 0 0 1px rgba(154, 52, 18, 0.08);
}

body.motion-enhanced .client-card,
body.motion-enhanced .report-panel,
body.motion-enhanced .task-card {
    transform-origin: center top;
    transition:
        transform var(--fluid-base) var(--fluid-ease-out),
        box-shadow var(--fluid-base) var(--fluid-ease-soft),
        border-color var(--fluid-fast) ease,
        background-color var(--fluid-fast) ease,
        opacity var(--fluid-fast) ease !important;
}

body.motion-enhanced .client-card:hover,
body.motion-enhanced .report-panel:hover,
body.motion-enhanced .task-card:hover {
    transform: translateY(-4px) scale(1.003);
}

body.motion-enhanced .client-card.motion-enter,
body.motion-enhanced .report-panel.motion-enter,
body.motion-enhanced .task-card.motion-enter,
body.motion-enhanced .task-list-row.motion-enter,
body.motion-enhanced .client-select-item.motion-enter,
body.motion-enhanced .header-stat.motion-enter {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
}

body.motion-enhanced .client-card.motion-enter-visible,
body.motion-enhanced .report-panel.motion-enter-visible,
body.motion-enhanced .task-card.motion-enter-visible,
body.motion-enhanced .task-list-row.motion-enter-visible,
body.motion-enhanced .client-select-item.motion-enter-visible,
body.motion-enhanced .header-stat.motion-enter-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        transform var(--fluid-slow) var(--fluid-ease-out),
        opacity 360ms ease,
        box-shadow var(--fluid-base) var(--fluid-ease-soft),
        border-color var(--fluid-fast) ease;
    transition-delay: var(--motion-delay, 0ms);
}

body.motion-enhanced .notification-dropdown,
body.motion-enhanced .kebab-dropdown,
body.motion-enhanced .filter-dropdown-menu,
body.motion-enhanced .custom-dropdown-options,
body.motion-enhanced .sort-bar {
    transform-origin: top right;
    transition:
        opacity 220ms ease,
        transform 260ms var(--fluid-ease-out),
        box-shadow var(--fluid-base) var(--fluid-ease-soft) !important;
}

body.motion-enhanced .notification-dropdown:not(.active),
body.motion-enhanced .filter-dropdown-menu:not(.show),
body.motion-enhanced .custom-dropdown:not(.active) .custom-dropdown-options,
body.motion-enhanced .action-menu:not(.open) .kebab-dropdown {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.97);
    pointer-events: none;
}

body.motion-enhanced .notification-dropdown.active,
body.motion-enhanced .filter-dropdown-menu.show,
body.motion-enhanced .custom-dropdown.active .custom-dropdown-options,
body.motion-enhanced .action-menu.open .kebab-dropdown {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

body.motion-enhanced .modal,
body.motion-enhanced .billing-modal-overlay,
body.motion-enhanced .quick-view-overlay {
    transition: opacity 240ms ease, visibility 240ms ease !important;
}

body.motion-enhanced .modal-content,
body.motion-enhanced .billing-modal,
body.motion-enhanced .quick-view-panel {
    transition:
        transform 340ms var(--fluid-ease-out),
        opacity 260ms ease,
        box-shadow var(--fluid-base) var(--fluid-ease-soft) !important;
}

body.motion-enhanced .modal:not(.active) .modal-content,
body.motion-enhanced .billing-modal-overlay:not(.active) .billing-modal {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
}

body.motion-enhanced .modal.active .modal-content,
body.motion-enhanced .billing-modal-overlay.active .billing-modal {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

body.motion-enhanced .quick-view-panel {
    opacity: 0.96;
}

body.motion-enhanced .quick-view-panel:not(.show) {
    transform: translateX(100%) translateZ(0);
}

body.motion-enhanced .quick-view-panel.show {
    transform: translateX(0) translateZ(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.motion-enhanced .client-card.motion-enter,
    body.motion-enhanced .report-panel.motion-enter,
    body.motion-enhanced .task-card.motion-enter,
    body.motion-enhanced .task-list-row.motion-enter,
    body.motion-enhanced .client-select-item.motion-enter,
    body.motion-enhanced .header-stat.motion-enter {
        opacity: 1;
        transform: none;
    }
}