@import '@fortawesome/fontawesome-free/css/all.min.css';
@import 'tabulator-tables/dist/css/tabulator.min.css';

/* Keep FA icons visible during font loading on full page navigation. */
@font-face {
    font-family: 'Font Awesome 7 Free Swap';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 7 Free Swap';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 7 Brands Swap';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
}

.fa-solid,
.fas,
.fa-regular,
.far,
.fa-classic {
    --fa-family: 'Font Awesome 7 Free Swap';
    --fa-style-family: 'Font Awesome 7 Free Swap';
}

.fa-brands,
.fab {
    --fa-family: 'Font Awesome 7 Brands Swap';
    --fa-style-family: 'Font Awesome 7 Brands Swap';
}

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none !important;
}

/* Server-driven fallback so the right rail remains visible even if Alpine init fails. */
body[data-right-rail-collapsed="0"] .app-right-rail {
    display: block !important;
}

body[data-right-rail-collapsed="1"] .app-right-rail {
    display: none !important;
}

body[data-right-rail-collapsed="0"] [data-right-rail-show-button] {
    display: none !important;
}

body[data-right-rail-collapsed="1"] [data-right-rail-show-button] {
    display: inline-flex !important;
}

:root {
    --crm-md-surface: #ffffff;
    --crm-md-surface-alt: #f8fafc;
    --crm-md-border: rgba(148, 163, 184, 0.28);
    --crm-md-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    --crm-md-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.12);
    --crm-md-primary: #4f46e5;
    --crm-md-primary-strong: #4338ca;
    --crm-md-text: #0f172a;
    --crm-md-text-muted: #64748b;
}

.crm-page-enter {
    animation: crm-fade-up 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crm-material-card {
    border: 1px solid var(--crm-md-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9));
    box-shadow: var(--crm-md-shadow);
    padding: 1rem;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}

.crm-material-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--crm-md-shadow-hover);
}

.crm-stat-card {
    position: relative;
    overflow: hidden;
}

.crm-stat-card::after {
    content: '';
    position: absolute;
    inset: auto -12% -42% auto;
    width: 8rem;
    height: 8rem;
    border-radius: 9999px;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.12), transparent 70%);
    pointer-events: none;
}

.crm-stat-card--info::after {
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.12), transparent 70%);
}

.crm-stat-card--success::after {
    background: radial-gradient(circle at center, rgba(5, 150, 105, 0.14), transparent 70%);
}

.crm-stat-card--danger::after {
    background: radial-gradient(circle at center, rgba(225, 29, 72, 0.14), transparent 70%);
}

.crm-stat-card--accent::after {
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.14), transparent 70%);
}

.crm-stat-icon {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid rgba(79, 70, 229, 0.2);
    background: rgba(79, 70, 229, 0.08);
    color: #4338ca;
}

.crm-text-link {
    color: var(--crm-md-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: color 160ms ease;
}

.crm-text-link:hover {
    color: var(--crm-md-primary-strong);
}

.crm-field {
    width: 100%;
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 0.56rem 0.72rem;
    font-size: 0.875rem;
    color: var(--crm-md-text);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.crm-field::placeholder {
    color: var(--crm-md-text-muted);
}

.crm-field:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
    outline: none;
}

.crm-button-primary {
    border-radius: 0.65rem;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.58rem 0.95rem;
    transition: transform 160ms ease, filter 160ms ease;
}

.crm-button-primary:hover {
    filter: brightness(1.05);
}

.crm-button-primary:active {
    transform: translateY(1px);
}

.crm-button-primary:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.crm-button-secondary,
.crm-button-ghost {
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.crm-button-secondary:hover,
.crm-button-ghost:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.crm-button-secondary:disabled,
.crm-button-ghost:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@keyframes crm-fade-up {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-page-enter {
        animation: none;
    }

    .crm-material-card,
    .crm-button-primary,
    .crm-button-secondary,
    .crm-button-ghost {
        transition: none !important;
    }
}

body[data-theme] {
    background-color: var(--theme-bg);
    color: var(--theme-text);
    font-family: var(--theme-font-body);
}

body[data-user-bg="1"] {
    background-image: var(--user-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6 {
    font-family: var(--theme-font-heading);
}

body[data-theme] .bg-white {
    background-color: var(--theme-surface) !important;
}

body[data-theme] .bg-slate-50,
body[data-theme] .bg-gray-50 {
    background-color: var(--theme-surface-alt) !important;
}

body[data-theme] .bg-gray-100 {
    background-color: var(--theme-bg) !important;
}

body[data-user-bg="1"] .bg-gray-100 {
    background-color: transparent !important;
}

body[data-theme] .text-slate-900,
body[data-theme] .text-gray-900,
body[data-theme] .text-gray-800 {
    color: var(--theme-text) !important;
}

body[data-theme] .text-slate-600,
body[data-theme] .text-slate-500,
body[data-theme] .text-gray-600 {
    color: var(--theme-text-muted) !important;
}

body[data-theme] .border-slate-200,
body[data-theme] .border-gray-200,
body[data-theme] .border-slate-300 {
    border-color: var(--theme-border) !important;
}

body[data-theme] .bg-indigo-600 {
    background-color: var(--theme-primary) !important;
}

body[data-theme] .hover\\:bg-indigo-500:hover {
    background-color: var(--theme-primary-hover) !important;
}

body[data-theme] .text-indigo-600,
body[data-theme] .text-indigo-700 {
    color: var(--theme-primary) !important;
}

body[data-theme] input,
body[data-theme] textarea,
body[data-theme] select {
    background-color: var(--theme-input-bg);
    color: var(--theme-text);
}

body[data-theme] .app-sidebar {
    background-color: var(--theme-sidebar-bg) !important;
    color: var(--theme-sidebar-text) !important;
    border-color: var(--theme-sidebar-border) !important;
}

body[data-theme] .app-sidebar .bg-slate-800,
body[data-theme] .app-sidebar .bg-slate-800\\/70 {
    background-color: var(--theme-sidebar-surface) !important;
}

body[data-theme] .app-sidebar .border-slate-700,
body[data-theme] .app-sidebar .border-slate-700\\/70 {
    border-color: var(--theme-sidebar-border) !important;
}

body[data-theme] .app-sidebar .text-slate-100,
body[data-theme] .app-sidebar .text-slate-200 {
    color: var(--theme-sidebar-text) !important;
}

body[data-theme] .app-sidebar .text-slate-300,
body[data-theme] .app-sidebar .text-slate-400 {
    color: var(--theme-sidebar-muted) !important;
}

body[data-theme] .app-sidebar .bg-sky-500\\/20 {
    background-color: var(--theme-sidebar-active) !important;
}

body[data-theme] .app-sidebar .border-sky-400\\/60 {
    border-color: var(--theme-sidebar-active) !important;
}

body[data-theme] .app-right-rail {
    background-color: var(--theme-right-rail-bg) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme] .app-sidebar i,
body[data-theme] .app-right-rail i {
    color: var(--theme-icon-color);
}

.disk-spreadsheet-preview .tabulator {
    border: 0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.8125rem;
}

.disk-spreadsheet-preview .tabulator .tabulator-header {
    border-bottom: 1px solid #dbe4f0;
    background: #f8fafc;
}

.disk-spreadsheet-preview .tabulator .tabulator-col {
    border-right: 1px solid #e2e8f0;
    background: #eef3fb;
    color: #334155;
    font-weight: 600;
}

.disk-spreadsheet-preview .tabulator .tabulator-cell {
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    white-space: pre-wrap;
}

.disk-spreadsheet-preview .tabulator-row-number-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #64748b;
    background: #f8fafc;
    font-weight: 600;
}

.disk-spreadsheet-tab-active {
    border-color: #4f46e5 !important;
    background: #eef2ff !important;
    color: #4338ca !important;
}

.disk-word-preview .docx-wrapper {
    background: #f1f5f9;
    padding: 0.5rem 0.25rem 1rem;
}

.disk-word-preview .docx {
    color: #0f172a;
}

.disk-word-preview .docx > section.docx-page {
    margin: 0.75rem auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #dbe4f0;
}
