/* ===========================
   Global Admin Styles (RTL-friendly)
   File: site.admin.css  — THEME: Green–Teal–Blue palette
   =========================== */

/* Brand Palette (10 colors) */
:root {
    /* Base palette */
    --g1: #D9ED92;
    --g2: #B5E48C;
    --g3: #99D98C;
    --g4: #76C893;
    --g5: #52B69A;
    --b1: #34A0A4;
    --b2: #168AAD;
    --b3: #1A759F;
    --b4: #1E6091;
    --b5: #184E77;
    /* Core tokens */
    --ink: #0F172A;
    --surface: #ffffff;
    --text: #0F172A;
    --text-weak: #4B5563;
    --border: #e6e8ee;
    --muted: #A8B3C5;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    /* Brand mappings (keep old var names but point to new palette) */
    --primary: var(--b2); /* #168AAD */
    --primary-contrast: #FFFFFF;
    --accent-1: var(--g3); /* soft green */
    --accent-2: var(--b3); /* deep teal */
    --gradient-a: var(--b3); /* 1A759F */
    --gradient-b: var(--b4); /* 1E6091 */
    /* Legacy compatibility (former neon vars) */
    --violet: var(--g4);
    --magenta: var(--b3);
    --cyan-1: var(--b1);
    --cyan-2: var(--b2);
    --orange: #FF6B00; /* unchanged utility */
    --pink: #FF6AD5; /* unchanged utility */
    /* Status */
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
}

/* Dark theme opt-in via [data-theme="dark"] */
html[data-theme="dark"] {
    --surface: #0F1220;
    --text: #EAF2FF;
    --text-weak: #A8B3C5;
    --border: #243047;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Global reset-ish */
* {
    box-sizing: border-box
}

html {
    font-size: 16px
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--surface);
    color: var(--text);
    line-height: 1.6;
    direction: rtl; /* RTL admin */
}

a {
    color: var(--primary);
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }

/* Layout */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px
}

.adm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 18px
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0 18px;
    flex-wrap: wrap
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin: 8px 0 18px;
}

    .card h3 {
        margin-top: 0
    }

/* Grid helpers */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.col-span-2 {
    grid-column: span 2
}

/* Forms */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px
}

label {
    font-weight: 600;
    color: var(--text-weak)
}

.input, textarea.input, select.input {
    width: 100%;
    border: 1px solid var(--border);
    background: #fff;
    color: #0f1535;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: box-shadow .2s, border-color .2s;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] textarea.input,
html[data-theme="dark"] select.input {
    background: #0c0f24;
    color: #EAF6FF;
}

.input:focus, textarea.input:focus, select.input:focus {
    border-color: var(--primary);
    /* from #1A759F => rgb(26,117,159) */
    box-shadow: 0 0 0 3px rgba(26,117,159,.18);
}

.chk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500
}

.val {
    color: var(--danger);
    font-size: .9rem
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

/* Buttons */
.btn {
    --btn-bg: #f6fbf8; /* subtle greenish paper */
    --btn-fg: #0f1535;
    --btn-bd: var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .2s, background .2s;
}

    .btn:hover {
        transform: translateY(-1px)
    }

    .btn:active {
        transform: translateY(0)
    }

.btn-primary {
    --btn-bg: linear-gradient(135deg, var(--gradient-a), var(--gradient-b)); /* 1A759F → 1E6091 */
    --btn-fg: var(--primary-contrast);
    --btn-bd: transparent;
    color: var(--primary-contrast);
    text-shadow: 0 1px rgba(0,0,0,.18);
    box-shadow: 0 8px 20px rgba(26,117,159,.25); /* ~var(--b3) glow */
}

.btn-sm {
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 600
}

.btn.danger, .btn-danger {
    --btn-bg: #fff1f0;
    --btn-fg: #9b1b12;
    --btn-bd: #ffd4cf
}

    .btn.danger:hover {
        box-shadow: 0 6px 16px rgba(231,76,60,.18)
    }

.row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end
}

/* Tables */
.table-responsive {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    background: var(--surface)
}

    .table th, .table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        text-align: start
    }

    .table thead th {
        background: linear-gradient(180deg, #f2f9ef, #e8f4e6); /* light from g1/g2 */
        font-weight: 800;
        color: #113B3C;
    }

html[data-theme="dark"] .table thead th {
    background: #0e1230;
    color: #EAF6FF
}

.text-strong {
    font-weight: 700
}

/* Badges & Alerts */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(26,117,159,.12); /* b3 */
    color: #0b4f63;
    border: 1px solid rgba(26,117,159,.25);
    font-weight: 700;
    font-size: .9rem;
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f5fbf5
}

    .alert.success {
        border-color: #c9f3dc;
        background: #edfff4;
        color: #0e6a3f
    }

    .alert.danger {
        border-color: #ffd4cf;
        background: #fff1f0;
        color: #9b1b12
    }

/* Pagination */
.pagination {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center
}

    .pagination .page {
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        color: #0f1535
    }

        .pagination .page.active {
            background: linear-gradient(135deg, var(--g4), var(--b1)); /* 76C893 → 34A0A4 */
            color: #fff;
            border-color: transparent
        }

/* Media grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
    gap: 12px
}

.media-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .media-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 8px
    }

/* Admin Header Aura (uses new palette) */
.adm-header h1 {
    position: relative;
    padding-inline: 10px;
}

    .adm-header h1::after {
        content: "";
        position: absolute;
        inset: auto 0 -6px 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--g3), var(--b3), transparent);
        border-radius: 999px;
        filter: blur(1px);
    }

/* Responsive */
@media (max-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr
    }

    .table {
        min-width: 100%
    }
}

/* Utility */
.text-center {
    text-align: center
}

.mt-1 {
    margin-top: 6px
}

.mt-2 {
    margin-top: 12px
}

.mt-3 {
    margin-top: 18px
}

.mb-1 {
    margin-bottom: 6px
}

.mb-2 {
    margin-bottom: 12px
}

.mb-3 {
    margin-bottom: 18px
}