/*
 * RepuTex Admin Theme — Filament v3 Safe Overrides
 * Uses CSS custom properties to extend, not replace, Filament's built-in styles.
 * Applied via FilamentAsset::register() as an extra stylesheet.
 */

/* ── Inter font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── RT tokens ──────────────────────────────────────────── */
:root {
    --rt-yellow:         #FFDD2D;
    --rt-yellow-hover:   #F2C900;
    --rt-yellow-light:   rgba(255, 221, 45, 0.12);
    --rt-black:          #1C1C1E;
    --rt-text-main:      #333333;
    --rt-text-muted:     #8A929A;
    --rt-bg-body:        #F6F7F8;
    --rt-bg-card:        #FFFFFF;
    --rt-border:         #E8ECEF;
    --rt-success:        #00BA5D;
    --rt-success-bg:     rgba(0, 186, 93, 0.10);
    --rt-danger:         #FF3B30;
    --rt-danger-bg:      rgba(255, 59, 48, 0.10);
    --rt-info:           #007AFF;
}

/* ── Global font ─────────────────────────────────────────── */
html, body, .fi-body, .fi-layout, .fi-sidebar,
.fi-topbar, .fi-page, .fi-section, .fi-header,
input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Page background ─────────────────────────────────────── */
.fi-body {
    background-color: var(--rt-bg-body) !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.fi-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid var(--rt-border) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--rt-border) !important;
    padding: 16px 20px !important;
}

/* Brand mark in sidebar */
.fi-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.fi-brand-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--rt-black) !important;
    letter-spacing: -0.02em !important;
}

/* Nav items */
.fi-sidebar-nav-groups {
    padding: 12px 12px !important;
}

.fi-sidebar-item-button {
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rt-text-muted) !important;
    transition: all 0.15s ease !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button.fi-active {
    background-color: var(--rt-yellow-light) !important;
    color: var(--rt-black) !important;
}

.fi-sidebar-item-button.fi-active {
    font-weight: 700 !important;
}

/* Sidebar icon color */
.fi-sidebar-item-icon {
    color: inherit !important;
}

/* ── Top bar ──────────────────────────────────────────────── */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--rt-border) !important;
    box-shadow: 0 1px 0 var(--rt-border) !important;
}

/* ── Page header ─────────────────────────────────────────── */
.fi-header {
    background-color: transparent !important;
}

.fi-header-heading {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--rt-black) !important;
    letter-spacing: -0.02em !important;
}

/* ── Section cards ───────────────────────────────────────── */
.fi-section {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--rt-border) !important;
    padding: 16px 20px !important;
}

.fi-section-header-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--rt-black) !important;
    letter-spacing: -0.01em !important;
}

/* ── Table ───────────────────────────────────────────────── */
.fi-ta-table {
    background-color: #FFFFFF !important;
}

.fi-ta-th {
    background-color: var(--rt-bg-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--rt-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px !important;
}

.fi-ta-td {
    padding: 13px 16px !important;
    font-size: 14px !important;
    color: var(--rt-text-main) !important;
    border-bottom: 1px solid var(--rt-border) !important;
}

.fi-ta-row:hover .fi-ta-td {
    background-color: rgba(246, 247, 248, 0.8) !important;
}

/* ── Badges ──────────────────────────────────────────────── */
.fi-badge {
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    letter-spacing: 0.01em !important;
}

/* ── Tab divider (before "Настройка" tab on tickets list) ── */
.fi-tabs > .rt-tab-divider-before {
    margin-left: 20px !important;
    position: relative !important;
}
.fi-tabs > .rt-tab-divider-before::before {
    content: "" !important;
    position: absolute !important;
    left: -11px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    border-radius: 2px;
    background: #c1c5cb;
    pointer-events: none;
}
.dark .fi-tabs > .rt-tab-divider-before::before {
    background: #6b7280;
}

/* ── Inputs ──────────────────────────────────────────────── */
.fi-input,
.fi-select-input,
.fi-textarea,
.fi-fo-field-wrp input[type="text"],
.fi-fo-field-wrp input[type="email"],
.fi-fo-field-wrp input[type="password"],
.fi-fo-field-wrp select,
.fi-fo-field-wrp textarea {
    border-radius: 10px !important;
    border: 1px solid var(--rt-border) !important;
    background-color: var(--rt-bg-body) !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    color: var(--rt-text-main) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
    border-color: var(--rt-yellow) !important;
    box-shadow: 0 0 0 3px var(--rt-yellow-light) !important;
    background-color: #FFFFFF !important;
    outline: none !important;
}

/* ── Primary buttons ─────────────────────────────────────── */
.fi-btn-color-primary,
.fi-btn[data-color="primary"],
button.fi-btn.fi-color-primary {
    background-color: var(--rt-yellow) !important;
    border-color: var(--rt-yellow) !important;
    color: var(--rt-black) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
}

.fi-btn-color-primary:hover,
button.fi-btn.fi-color-primary:hover {
    background-color: var(--rt-yellow-hover) !important;
    border-color: var(--rt-yellow-hover) !important;
    transform: scale(1.01) !important;
}

/* Generic Filament primary color overrides */
[class*="fi-btn"][class*="primary"] {
    --tw-ring-color: var(--rt-yellow-light) !important;
}

/* ── Danger buttons ──────────────────────────────────────── */
.fi-btn-color-danger,
button.fi-btn.fi-color-danger {
    background-color: var(--rt-danger-bg) !important;
    color: var(--rt-danger) !important;
    border-color: transparent !important;
    border-radius: 10px !important;
}

.fi-btn-color-danger:hover {
    background-color: var(--rt-danger) !important;
    color: #FFFFFF !important;
}

/* ── Widget cards ────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--rt-black) !important;
    letter-spacing: -0.02em !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--rt-text-muted) !important;
}

/* ── Login page ──────────────────────────────────────────── */
.fi-simple-layout {
    background-color: var(--rt-bg-body) !important;
}

.fi-simple-layout-logo {
    margin-bottom: 24px !important;
}

.fi-simple-page {
    background-color: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
    padding: 36px 32px !important;
}

.fi-simple-header-heading {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--rt-black) !important;
    letter-spacing: -0.02em !important;
}

.fi-simple-header-subheading {
    font-size: 14px !important;
    color: var(--rt-text-muted) !important;
    margin-top: 4px !important;
}

/* ── Modal ───────────────────────────────────────────────── */
.fi-modal-window {
    border-radius: 20px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

/* ── Dropdown ────────────────────────────────────────────── */
.fi-dropdown-panel {
    border-radius: 14px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

/* ── Notification toast ──────────────────────────────────── */
.fi-no-notification {
    border-radius: 14px !important;
    border: 1px solid var(--rt-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    background-color: #FFFFFF !important;
}

/* ── Focus ring override ─────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--rt-yellow) !important;
    outline-offset: 2px !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rt-bg-body); }
::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--rt-text-muted); }

/* ── Mobile responsiveness for Admin Panel ──────────────── */
@media (max-width: 768px) {
    /* Sidebar: narrower on small screens */
    .fi-sidebar {
        width: 260px !important;
    }

    /* Table cells: allow wrapping and reduce min-widths */
    .fi-ta-cell {
        min-width: 80px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Table header */
    .fi-ta-header-cell {
        min-width: 80px !important;
        white-space: normal !important;
    }

    /* Page header: stack vertically */
    .fi-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .fi-header-actions {
        width: 100% !important;
    }

    /* Widget grid: single column on mobile */
    .fi-wi {
        grid-template-columns: 1fr !important;
    }

    /* Stats overview: 1 or 2 columns */
    .fi-wi-stats-overview {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Filters: stack vertically */
    .fi-ta-filters {
        flex-direction: column !important;
    }

    /* Reduce padding in panels */
    .fi-main-ctn {
        padding: 12px !important;
    }
    .fi-section-ctn {
        padding: 12px !important;
    }

    /* Table wrapper: horizontal scroll */
    .fi-ta-wrp {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .fi-ta-table {
        min-width: 600px !important;
    }
}

@media (max-width: 480px) {
    .fi-wi-stats-overview {
        grid-template-columns: 1fr !important;
    }
    .fi-header-heading {
        font-size: 20px !important;
    }
}