/* =========================================
   SAYA DESIGN SYSTEM
   Version 1.0
   Emerald / Gold / Persian RTL
========================================= */

:root {
    color-scheme: dark;

    --saya-bg: #071b16;
    --saya-bg-soft: #0b241d;
    --saya-surface: #102c23;
    --saya-surface-2: #15382c;
    --saya-surface-3: #1b4435;

    --saya-primary: #167653;
    --saya-primary-light: #20a675;
    --saya-primary-dark: #0c4935;

    --saya-gold: #d7b56d;
    --saya-gold-light: #f0d89b;
    --saya-gold-soft: rgba(215,181,109,.13);

    --saya-text: #f3f5ed;
    --saya-text-soft: #c2d0c7;
    --saya-muted: #91a79a;

    --saya-border: rgba(205,225,211,.11);
    --saya-border-gold: rgba(215,181,109,.28);

    --saya-success: #39bd87;
    --saya-warning: #e6b65c;
    --saya-danger: #e47777;
    --saya-info: #72b9d6;

    --saya-radius-sm: 10px;
    --saya-radius: 16px;
    --saya-radius-lg: 22px;

    --saya-shadow:
      0 14px 40px rgba(0,0,0,.20);

    --saya-transition: .22s ease;
}

/* Base */

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    background:
      radial-gradient(
        ellipse at 85% 0%,
        rgba(25,112,79,.16),
        transparent 38%
      ),
      var(--saya-bg) !important;

    color: var(--saya-text) !important;
    font-family: Tahoma, "Segoe UI", sans-serif;
    line-height: 1.85;
    min-height: 100vh;
}

body, button, input, select, textarea {
    font-family: Tahoma, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--saya-gold);
    transition: color var(--saya-transition);
}

a:hover {
    color: var(--saya-gold-light);
}

img {
    max-width: 100%;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
    color: var(--saya-text);
    font-weight: 800;
    line-height: 1.65;
}

p, label, small {
    line-height: 1.9;
}

.text-muted,
.text-secondary,
small {
    color: var(--saya-muted) !important;
}

/* Header and navigation */

header,
.navbar,
.topbar,
.site-header,
.main-header {
    color: var(--saya-text);
}

.navbar,
.site-header,
.main-header,
.topbar {
    background: rgba(8,31,24,.94) !important;
    border-color: var(--saya-border) !important;
    backdrop-filter: blur(16px);
}

nav a,
.navbar a,
header a {
    transition: var(--saya-transition);
}

nav a:hover,
.navbar a:hover {
    color: var(--saya-gold-light) !important;
}

/* Page containers */

.container,
.container-fluid,
main,
.main-content,
.content,
.page-content {
    color: var(--saya-text);
}

main {
    min-width: 0;
}

/* Cards and panels */

.card,
.panel,
.widget,
.stat-card,
.dashboard-card,
.feature-card,
.metric-card,
.chart-card,
.content-card {
    background: linear-gradient(
      145deg,
      rgba(20,54,42,.97),
      rgba(12,39,30,.98)
    ) !important;

    color: var(--saya-text) !important;
    border: 1px solid var(--saya-border) !important;
    border-radius: var(--saya-radius) !important;
    box-shadow: var(--saya-shadow);
}

.card-header,
.card-footer {
    background: rgba(215,181,109,.045) !important;
    color: var(--saya-text) !important;
    border-color: var(--saya-border) !important;
}

.card:hover,
.panel:hover,
.widget:hover,
.stat-card:hover {
    border-color: var(--saya-border-gold) !important;
}

/* Buttons */

button,
.btn,
input[type="submit"],
input[type="button"] {
    border-radius: 11px;
    transition:
      transform var(--saya-transition),
      background var(--saya-transition),
      border-color var(--saya-transition);
}

.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {
    background: linear-gradient(
      135deg,
      var(--saya-primary-light),
      var(--saya-primary-dark)
    ) !important;

    color: #fff !important;
    border: 1px solid rgba(90,205,155,.24) !important;
    font-weight: 700;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-outline-primary {
    color: var(--saya-gold) !important;
    border-color: var(--saya-border-gold) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--saya-gold-soft) !important;
}

.btn-secondary,
.btn-light {
    background: var(--saya-surface-2) !important;
    color: var(--saya-text) !important;
    border-color: var(--saya-border) !important;
}

/* Forms */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: #0a241b !important;
    color: var(--saya-text) !important;
    border: 1px solid var(--saya-border) !important;
    border-radius: var(--saya-radius-sm) !important;
    min-height: 42px;
}

input::placeholder,
textarea::placeholder {
    color: #82998c !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--saya-gold) !important;
    box-shadow: 0 0 0 3px rgba(215,181,109,.12) !important;
}

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

/* Tables */

table {
    color: var(--saya-text) !important;
    border-color: var(--saya-border) !important;
}

table th {
    background: var(--saya-surface-2) !important;
    color: var(--saya-gold-light) !important;
    font-weight: 800;
}

table td {
    background: rgba(13,43,32,.62) !important;
    color: var(--saya-text-soft) !important;
    border-color: var(--saya-border) !important;
}

.table,
.table-responsive {
    border-radius: var(--saya-radius);
    overflow: hidden;
}

/* Alerts and badges */

.alert {
    border-radius: var(--saya-radius-sm);
    border: 1px solid var(--saya-border);
}

.alert-success {
    background: rgba(57,189,135,.12) !important;
    color: #9ce7c5 !important;
}

.alert-warning {
    background: rgba(230,182,92,.12) !important;
    color: #f0d89b !important;
}

.alert-danger {
    background: rgba(228,119,119,.12) !important;
    color: #ffb1b1 !important;
}

.alert-info {
    background: rgba(114,185,214,.12) !important;
    color: #a9dcf1 !important;
}

.badge {
    border-radius: 30px;
    padding: .4em .75em;
}

/* Progress */

.progress {
    background: #071b16 !important;
    border-radius: 30px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(
      90deg,
      var(--saya-primary),
      var(--saya-gold)
    ) !important;
}

/* Dropdowns and modals */

.dropdown-menu,
.modal-content,
.popover {
    background: var(--saya-surface) !important;
    color: var(--saya-text) !important;
    border: 1px solid var(--saya-border) !important;
    border-radius: var(--saya-radius);
}

.dropdown-item {
    color: var(--saya-text-soft) !important;
}

.dropdown-item:hover {
    background: var(--saya-surface-2) !important;
    color: var(--saya-gold-light) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--saya-border) !important;
}

/* Sidebar support if present */

.sidebar,
#sidebar,
.app-sidebar,
.dashboard-sidebar {
    background: linear-gradient(
      180deg,
      #0b281e,
      #071b16
    ) !important;

    color: var(--saya-text);
    border-left: 1px solid var(--saya-border);
}

.sidebar a,
#sidebar a,
.app-sidebar a,
.dashboard-sidebar a {
    color: var(--saya-text-soft);
    border-radius: 10px;
    transition: var(--saya-transition);
}

.sidebar a:hover,
#sidebar a:hover,
.app-sidebar a:hover,
.dashboard-sidebar a:hover {
    color: var(--saya-gold-light);
    background: var(--saya-gold-soft);
}

/* Gold highlights */

.saya-gold,
.text-gold {
    color: var(--saya-gold) !important;
}

.saya-brand {
    color: var(--saya-gold-light);
    font-weight: 900;
    letter-spacing: -.4px;
}

.saya-divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--saya-border-gold),
      transparent
    );
    border: 0;
    margin: 20px 0;
}

/* Focus and accessibility */

:focus-visible {
    outline: 2px solid var(--saya-gold) !important;
    outline-offset: 3px;
}

button:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Mobile navigation */

.saya-mobile-menu-toggle {
    display: none;
    background: var(--saya-surface-2);
    color: var(--saya-gold-light);
    border: 1px solid var(--saya-border-gold);
    padding: 8px 13px;
    margin: 8px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .container,
    .container-fluid {
        max-width: 100%;
    }

    .saya-mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .saya-mobile-nav {
        display: none !important;
        width: 100%;
    }

    .saya-mobile-nav.saya-nav-open {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .card,
    .panel,
    .widget {
        border-radius: 14px !important;
    }

    table {
        font-size: 13px;
    }
}
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.55rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .container,
    .container-fluid {
        padding-left: 13px;
        padding-right: 13px;
    }

    .card-body {
        padding: 14px;
    }

    .btn {
        max-width: 100%;
        white-space: normal;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}