/* =====================================================================
   Garsha Sanat CRM — app.css
   Blazor Server + MudBlazor

   همه‌ی رنگ‌های پروژه فقط یک‌بار، داخل بلوک :root تعریف شده‌اند.
   در تمام بخش‌های پایین فایل (سایدبار، اپ‌بار، دکمه‌ها، بج‌ها،
   تایم‌لاین، صفحه‌ی لاگین و ...) فقط از var(--gs-...) استفاده می‌شود
   تا تغییر هر رنگ فقط در یک‌جا لازم باشد.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ---------- پالت اصلی برند (مطابق colors.txt) ---------- */
    --gs-purple-900: #20113D;
    --gs-purple-800: #2E1B5B;
    --gs-purple-700: #35245E;
    --gs-purple-600: #412D72;
    --gs-purple-500: #50378B;
    --gs-purple-400: #806AB9;
    --gs-purple-300: #A690D3;
    --gs-purple-200: #C8B7E4;
    --gs-purple-100: #E5DDF3;
    --gs-purple-50: #F4F1FA;
    --gs-teal-500: #4FC7BC;
    --gs-teal-600: #39AFA5;
    --gs-mint-400: #68D0A3;
    --gs-mint-300: #88DED2;
    --gs-white: #FFFFFF;
    --gs-bg: #F4F5F7;
    --gs-border: #E9ECEF;
    --gs-muted: #7D7D82;
    --gs-input-bg: #FBFBFC;
    /* ---------- رنگ‌های وضعیت ---------- */
    --gs-success: #42C68C;
    --gs-success-bg: #E9F9F1;
    --gs-warning: #F4B740;
    --gs-warning-bg: #FEF6E4;
    --gs-warning-text: #946209;
    --gs-danger: #E64C4C;
    --gs-danger-bg: #FBEAEA;
    --gs-danger-border: #F2CFCF;
    --gs-future: #7D7D82;
    --gs-future-bg: #F1F1F3;
    /* ---------- متن‌های روشن روی پس‌زمینه‌ی تیره‌ی سایدبار/لاگین ---------- */
    --gs-lilac: #D4CBEA; /* متن پیش‌فرض لینک‌های سایدبار */
    --gs-lilac-muted: #B8AEDA; /* زیرمتن‌ها روی پس‌زمینه تیره */
    --gs-footnote: #8E82AE; /* متن فوتر کم‌رنگ روی پس‌زمینه تیره */
    /* ---------- شفافیت‌ها / خطوط روی پس‌زمینه‌ی تیره ---------- */
    --gs-overlay-border: rgba(255,255,255,.09);
    --gs-overlay-border-strong: rgba(255,255,255,.25);
    --gs-overlay-hover: rgba(255,255,255,.07);
    --gs-grid-line: rgba(255,255,255,.035);
    /* ---------- حالت فعال منو ---------- */
    --gs-nav-active-bg: rgba(128,106,185,.22);
    --gs-nav-active-text: var(--gs-mint-400);
    /* ---------- سایه‌ها ---------- */
    --gs-shadow: 0 1px 2px rgba(46,27,91,.06), 0 6px 18px rgba(46,27,91,.08);
    --gs-shadow-soft: rgba(0,0,0,.08);
    --gs-shadow-medium: rgba(0,0,0,.22);
    --gs-shadow-heavy: rgba(0,0,0,.4);
    --gs-teal-glow: rgba(79,199,188,.35);
    --gs-teal-glow-soft: rgba(79,199,188,.18);
    --gs-purple-glow: rgba(80,55,139,.35);
    /* ---------- گرادیان‌ها و شعاع گوشه ---------- */
    --gs-radius: 12px;
    --gs-grad-brand: linear-gradient(135deg, var(--gs-teal-500), var(--gs-mint-400));
    --gs-grad-purple: linear-gradient(160deg, var(--gs-purple-700), var(--gs-purple-900));
}

/* ---------------------------------------------------------------------
   Base / RTL
--------------------------------------------------------------------- */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Vazirmatn','Inter',Tahoma,sans-serif;
    background: var(--gs-bg);
    color: var(--gs-purple-800);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

a, a:visited {
    color: var(--gs-purple-500);
    text-decoration: none;
}

    a:hover {
        color: var(--gs-teal-600);
    }

::selection {
    background: var(--gs-teal-500);
    color: var(--gs-white);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gs-purple-300);
    border-radius: 20px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gs-purple-500);
    }

/* ---------------------------------------------------------------------
   Blazor Server infra styles (error UI / loading)
--------------------------------------------------------------------- */
#blazor-error-ui {
    background: var(--gs-danger-bg);
    color: var(--gs-danger);
    border-top: 1px solid var(--gs-danger);
    bottom: 0;
    box-shadow: 0 -4px 16px var(--gs-shadow-soft);
    display: none;
    left: 0;
    padding: 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .875rem;
    font-weight: 600;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        left: 0.75rem;
        top: 0.6rem;
        color: var(--gs-danger);
    }

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 20vh auto 1rem;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--gs-border);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--gs-teal-500);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    inset: 0;
    font-weight: 700;
    color: var(--gs-purple-800);
}

    .loading-progress-text::after {
        content: var(--blazor-load-percentage-text, "بارگذاری");
    }

/* ---------------------------------------------------------------------
   App shell — sidebar / appbar brand gradients
--------------------------------------------------------------------- */
.gs-drawer .mud-drawer {
    background: var(--gs-grad-purple) !important;
}

.gs-appbar.mud-appbar {
    background: var(--gs-purple-800) !important;
    box-shadow: var(--gs-shadow);
}

.gs-sidebar-inner {
    height: 100%;
}

.gs-nav-link-row {
    width: 100%;
}

.gs-logo-mark {
    height: 38px;
    width: auto;
    display: block;
}

    .gs-logo-mark img, .gs-logo-mark svg {
        height: 100%;
        width: auto;
        display: block;
    }

/* لینک‌های ناوبری سایدبار — رنگ پایه، هاور و حالت فعال */
.gs-nav-link,
.gs-nav-link .mud-nav-link-text,
.gs-nav-link .mud-icon-root {
    color: var(--gs-lilac) !important;
    transition: color .12s, background .12s;
}

    /* هاور — فقط خود لینک پس‌زمینه می‌گیره، متن/آیکون فقط رنگ */
    .gs-nav-link:hover {
        background: var(--gs-overlay-hover) !important;
    }

        .gs-nav-link:hover,
        .gs-nav-link:hover .mud-nav-link-text,
        .gs-nav-link:hover .mud-icon-root {
            color: var(--gs-white) !important;
        }

    /* حالت فعال (لینک کلیک‌شده) — پس‌زمینه ملایم هم‌خانواده با سایدبار + برجستگی + متن سبز */
    .gs-nav-link.active,
    .gs-nav-link.mud-selected,
    .gs-drawer .mud-nav-link.active,
    .gs-drawer .mud-nav-link.mud-selected {
        background: var(--gs-nav-active-bg) !important;
        box-shadow: 0 2px 10px var(--gs-shadow-medium), inset 3px 0 0 var(--gs-nav-active-text) !important;
    }

        .gs-nav-link.active,
        .gs-nav-link.mud-selected,
        .gs-nav-link.active .mud-nav-link-text,
        .gs-nav-link.mud-selected .mud-nav-link-text,
        .gs-nav-link.active .mud-icon-root,
        .gs-nav-link.mud-selected .mud-icon-root,
        .gs-drawer .mud-nav-link.active,
        .gs-drawer .mud-nav-link.mud-selected,
        .gs-drawer .mud-nav-link.active *,
        .gs-drawer .mud-nav-link.mud-selected * {
            color: var(--gs-nav-active-text) !important;
        }

/* هدر برند سایدبار */
.gs-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--gs-overlay-border);
}

.gs-sidebar-name {
    color: var(--gs-white);
    font-weight: 800;
    line-height: 1.2;
}

.gs-sidebar-sub {
    color: var(--gs-lilac-muted);
}

/* فوتر سایدبار — کاربر جاری و دکمه خروج */
.gs-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--gs-overlay-border);
}

.gs-user-name {
    color: var(--gs-white);
    font-weight: 700;
    line-height: 1.2;
}

.gs-user-role {
    color: var(--gs-lilac-muted);
}

.gs-logout-btn {
    color: var(--gs-lilac) !important;
    border-color: var(--gs-overlay-border-strong) !important;
}

    .gs-logout-btn:hover {
        color: var(--gs-white) !important;
        background: var(--gs-overlay-hover) !important;
    }

/* ---------------------------------------------------------------------
   Buttons / CTA gradient (برای MudButton Variant="Filled" Color="Primary")
--------------------------------------------------------------------- */
.gs-btn-brand,
.mud-button-filled.gs-btn-brand {
    background: var(--gs-grad-brand) !important;
    color: var(--gs-purple-900) !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--gs-teal-glow) !important;
    font-weight: 700;
}

    .gs-btn-brand:hover {
        filter: brightness(1.05);
    }

/* ---------------------------------------------------------------------
   Cards / panels
--------------------------------------------------------------------- */
.gs-card {
    border-radius: var(--gs-radius) !important;
    box-shadow: var(--gs-shadow) !important;
    border: 1px solid var(--gs-border);
}

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

    .gs-stat-card .gs-top-line {
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 3px;
    }

    .gs-stat-card.c-purple .gs-top-line {
        background: var(--gs-purple-500);
    }

    .gs-stat-card.c-teal .gs-top-line {
        background: var(--gs-teal-500);
    }

    .gs-stat-card.c-success .gs-top-line {
        background: var(--gs-success);
    }

    .gs-stat-card.c-danger .gs-top-line {
        background: var(--gs-danger);
    }

/* ---------------------------------------------------------------------
   Status badges — وضعیت مشتری / پیمانکار
--------------------------------------------------------------------- */
.gs-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}

    .gs-badge.active {
        background: var(--gs-success-bg);
        color: var(--gs-success);
    }

    .gs-badge.negotiating {
        background: var(--gs-warning-bg);
        color: var(--gs-warning-text);
    }

    .gs-badge.inactive {
        background: var(--gs-danger-bg);
        color: var(--gs-danger);
    }

    .gs-badge.archived {
        background: var(--gs-future-bg);
        color: var(--gs-future);
    }

/* پیگیری‌ها */
.gs-tag {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}

    .gs-tag.today {
        background: var(--gs-warning-bg);
        color: var(--gs-warning-text);
    }

    .gs-tag.late {
        background: var(--gs-danger-bg);
        color: var(--gs-danger);
    }

    .gs-tag.future {
        background: var(--gs-future-bg);
        color: var(--gs-future);
    }

/* ---------------------------------------------------------------------
   Timeline (سوابق ارتباط با پیمانکار)
--------------------------------------------------------------------- */
.gs-timeline {
    position: relative;
    padding-inline-start: 20px;
}

    .gs-timeline::before {
        content: "";
        position: absolute;
        inset-inline-start: 6px;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: var(--gs-border);
    }

.gs-timeline-item {
    position: relative;
    padding-bottom: 18px;
}

    .gs-timeline-item::before {
        content: "";
        position: absolute;
        inset-inline-start: -20px;
        top: 3px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--gs-white);
        border: 3px solid var(--gs-purple-500);
    }

    .gs-timeline-item.type-call::before {
        border-color: var(--gs-purple-500);
    }

    .gs-timeline-item.type-whatsapp::before {
        border-color: var(--gs-success);
    }

    .gs-timeline-item.type-meeting::before {
        border-color: var(--gs-teal-500);
    }

    .gs-timeline-item.type-message::before {
        border-color: var(--gs-future);
    }

    .gs-timeline-item.type-note::before {
        border-color: var(--gs-muted);
    }

/* ---------------------------------------------------------------------
   Utility helpers
--------------------------------------------------------------------- */
.gs-text-muted {
    color: var(--gs-muted) !important;
}

.gs-gradient-text {
    background: var(--gs-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gs-shadow {
    box-shadow: var(--gs-shadow) !important;
}

.gs-rounded {
    border-radius: var(--gs-radius) !important;
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 900px) {
    .gs-drawer .mud-drawer {
        width: 250px !important;
    }

    .gs-hide-mobile {
        display: none !important;
    }
}

/* =====================================================================
   Login page (AuthLayout.razor / Login.razor)
   — پیاده‌سازی دقیق صفحه‌ی ورود مطابق قالب اولیه‌ی HTML پروژه
===================================================================== */
.gs-login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1100px 500px at 15% 8%, var(--gs-teal-glow-soft), transparent 60%), radial-gradient(900px 500px at 90% 90%, var(--gs-purple-glow), transparent 55%), var(--gs-purple-900);
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.gs-pipe-grid {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, var(--gs-grid-line) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, var(--gs-grid-line) 0 1px, transparent 1px 64px);
    pointer-events: none;
}

.gs-login-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--gs-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px var(--gs-shadow-heavy);
}

.gs-login-side {
    background: var(--gs-grad-purple);
    color: var(--gs-white);
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

    .gs-login-side::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--gs-grad-brand);
    }

.gs-brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .gs-brand-mark .gs-ring {
        width: 44px;
        height: 44px;
        flex: none;
    }

        .gs-brand-mark .gs-ring img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .gs-brand-mark .gs-name {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: .3px;
    }

    .gs-brand-mark .gs-sub {
        font-size: 12px;
        color: var(--gs-purple-200);
        margin-top: 2px;
    }

.gs-pitch {
    margin-top: 40px;
}

    .gs-pitch h2 {
        font-size: 26px;
        line-height: 1.65;
        font-weight: 700;
        margin: 0;
    }

    .gs-pitch .gs-accent {
        background: var(--gs-grad-brand);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.gs-stat-row {
    display: flex;
    gap: 26px;
    margin-top: 34px;
}

    .gs-stat-row .gs-s-num {
        font-size: 24px;
        font-weight: 800;
        color: var(--gs-mint-400);
    }

    .gs-stat-row .gs-s-lbl {
        font-size: 12px;
        color: var(--gs-lilac-muted);
        margin-top: 4px;
    }

.gs-login-foot-note {
    font-size: 11.5px;
    color: var(--gs-footnote);
}

.gs-login-form {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .gs-login-form h1 {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 6px;
        color: var(--gs-purple-800);
    }

    .gs-login-form p.gs-hint {
        font-size: 13px;
        color: var(--gs-muted);
        margin: 0 0 26px;
    }

.gs-login-error {
    background: var(--gs-danger-bg);
    color: var(--gs-danger);
    border: 1px solid var(--gs-danger-border);
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    margin-bottom: 16px;
    font-weight: 600;
}

.gs-login-form .mud-input-outlined {
    background: var(--gs-input-bg);
    border-radius: 9px;
}

.gs-btn-primary {
    width: 100%;
    background: var(--gs-grad-brand) !important;
    color: var(--gs-purple-900) !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    letter-spacing: .2px;
    box-shadow: 0 10px 22px var(--gs-teal-glow) !important;
    border: none !important;
}

    .gs-btn-primary:hover {
        filter: brightness(1.04);
    }

.gs-demo-creds {
    margin-top: 20px;
    font-size: 11.5px;
    color: var(--gs-muted);
    text-align: center;
    padding: 9px;
    background: var(--gs-purple-50);
    border-radius: 9px;
    border: 1px dashed var(--gs-border);
}

    .gs-demo-creds b {
        color: var(--gs-purple-800);
    }

@media (max-width:760px) {
    .gs-login-wrap {
        grid-template-columns: 1fr;
    }

    .gs-login-side {
        display: none;
    }
}