/*
 * ProjectManagement Design System
 * Stable product-level tokens. Pages should consume these instead of inventing values.
 */
:root {
    --pm-font-family: "IranYekan", "Vazirmatn", Tahoma, Arial, sans-serif;

    --pm-color-primary: #5b5fef;
    --pm-color-primary-hover: #4b4fd8;
    --pm-color-secondary: #64748b;
    --pm-color-primary-soft: #f0f1ff;
    --pm-color-success: #10a37f;
    --pm-color-success-soft: #ecfdf5;
    --pm-color-warning: #d99019;
    --pm-color-warning-soft: #fffbeb;
    --pm-color-danger: #d9576b;
    --pm-color-danger-soft: #fff1f2;
    --pm-color-info: #3395c9;
    --pm-color-info-soft: #f0f9ff;

    --pm-color-background: #f6f7fb;
    --pm-color-surface: #ffffff;
    --pm-color-surface-secondary: #fafbfd;
    --pm-color-border: #e6e8f0;
    --pm-color-text-primary: #202536;
    --pm-color-text-secondary: #667085;
    --pm-color-text-muted: #98a2b3;

    --pm-sidebar-bg: #fbfbfd;
    --pm-sidebar-surface: #f6f7fb;
    --pm-sidebar-border: #eceef4;
    --pm-sidebar-text: #5f6778;
    --pm-sidebar-text-active: #4b4fd8;
    --pm-sidebar-active: #eeeeff;

    --pm-space-1: 4px;
    --pm-space-2: 8px;
    --pm-space-3: 12px;
    --pm-space-4: 16px;
    --pm-space-6: 24px;
    --pm-space-8: 32px;
    --pm-space-12: 48px;

    --pm-radius-sm: 8px;
    --pm-radius-md: 10px;
    --pm-radius-lg: 14px;

    --pm-shadow-subtle: 0 1px 2px rgba(16, 24, 40, .04);
    --pm-shadow-elevated: 0 8px 24px rgba(16, 24, 40, .08);
    --pm-shadow-overlay: 0 24px 64px rgba(16, 24, 40, .18);

    --pm-transition-fast: 160ms ease;
    --pm-transition-normal: 220ms ease;
}

html,
body,
.mud-typography,
.mud-button-root,
.mud-input,
.mud-input-control,
.mud-table,
.mud-popover,
.mud-dialog {
    font-family: var(--pm-font-family);
}

body {
    background: var(--pm-color-background);
    color: var(--pm-color-text-primary);
}

.pm-surface {
    background: var(--pm-color-surface);
    border: 1px solid var(--pm-color-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-subtle);
}

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


/* Product typography hierarchy */
body {
    font-size: 14px;
    line-height: 1.7;
}

.page-heading .eyebrow,
.section-kicker,
.nav-label {
    font-size: 11px;
    letter-spacing: 0;
}

.page-heading h1 {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -.35px;
}

.page-heading > div > p:last-child {
    font-size: 12px;
    line-height: 1.8;
}

.nav-item span,
.workspace-switch strong {
    font-size: 13px;
}

.workspace-switch small,
.user-card small,
.top-user span {
    font-size: 10px;
}

.user-card strong,
.top-user strong,
.global-search input {
    font-size: 12px;
}

.btn {
    font-size: 12px;
    font-weight: 600;
}

.panel-head h2 {
    font-size: 16px;
    font-weight: 700;
}

.text-button,
.count-badge,
.status-dot,
.project-meta span,
.board-summary,
.project-picker > span {
    font-size: 11px;
}

.kpi-card > small {
    font-size: 12px;
}

.kpi-card > strong {
    font-size: 26px;
    font-weight: 700;
}

.kpi-card > p {
    font-size: 10px;
}

.activity-item strong,
.task-row strong,
.kanban-card h3,
.personal-task-list strong {
    font-size: 12px;
}

.activity-item small,
.task-row small,
.personal-task-list small,
.kanban-card footer,
.kanban-card > small {
    font-size: 10px;
}

.type-pill,
.priority,
.card-tags > span:not(.priority) {
    font-size: 10px;
}

.pm-metric-card {
    box-shadow: var(--pm-shadow-subtle);
}

.pm-metric-card:hover {
    transform: none;
    border-color: var(--pm-color-border);
    box-shadow: var(--pm-shadow-elevated);
}

.pm-metric-progress {
    width: 75%;
    margin-top: var(--pm-space-2);
}

.pm-empty-state {
    box-shadow: none;
}

.pm-empty-action {
    margin-top: var(--pm-space-2);
}

@media (max-width: 780px) {
    body {
        font-size: 13px;
    }

    .nav-item span {
        font-size: 13px;
    }
}


.skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: var(--pm-space-3);
    inset-inline-start: var(--pm-space-3);
    padding: var(--pm-space-2) var(--pm-space-3);
    color: #fff;
    background: var(--pm-color-text-primary);
    border-radius: var(--pm-radius-sm);
    transform: translateY(-160%);
    transition: transform var(--pm-transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}


/* Application shell */
.sidebar {
    width: 280px;
    padding-inline: var(--pm-space-4);
    background: var(--pm-sidebar-bg);
    border-left: 1px solid var(--pm-sidebar-border);
    box-shadow: none;
}

.main-area {
    margin-right: 280px;
}

.topbar {
    min-height: 72px;
    height: 72px;
    padding-inline: var(--pm-space-8);
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--pm-color-border);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}

.content-wrap {
    width: min(1480px, 100%);
    padding: var(--pm-space-8) var(--pm-space-8) var(--pm-space-12);
}

.global-search {
    min-width: 320px;
    height: 42px;
    background: var(--pm-color-surface-secondary);
    border-color: var(--pm-color-border);
}

.nav-item {
    min-height: 44px;
    border-radius: var(--pm-radius-md);
}

.nav-item:hover {
    transform: none;
}

.nav-item.active {
    background: var(--pm-sidebar-active);
    color: var(--pm-sidebar-text-active);
    box-shadow: inset -3px 0 var(--pm-color-primary);
}

.workspace-switch,
.user-card {
    border-radius: var(--pm-radius-md);
}

/* Surfaces and interaction */
.panel,
.project-card,
.team-card,
.file-card,
.pricing-card,
.register-card,
.github-hero,
.github-flow,
.subscription-summary,
.settings-card {
    border-color: var(--pm-color-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-subtle);
}

.project-card:hover,
.kanban-card:hover,
.pricing-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-elevated);
}

.panel {
    background: var(--pm-color-surface);
}

.kanban-column {
    background: #f0f3f8;
    border-color: transparent;
    border-radius: var(--pm-radius-lg);
}

.kanban-card {
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-subtle);
}

.progress-track {
    background: #edf1f6;
}

/* Forms */
.field > span {
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-color-text-secondary);
}

.field input,
.field select,
.field textarea,
.field > div,
.project-picker select,
.timer-panel select,
.entitlement-grid input,
.entitlement-grid select {
    min-height: 44px;
    color: var(--pm-color-text-primary);
    background: var(--pm-color-surface);
    border-color: var(--pm-color-border);
    border-radius: var(--pm-radius-md);
    font-size: 12px;
}

.field textarea {
    line-height: 1.8;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.project-picker select:focus,
.entitlement-grid input:focus,
.entitlement-grid select:focus {
    outline: 0;
    border-color: rgba(91, 95, 239, .48);
    box-shadow: 0 0 0 3px rgba(91, 95, 239, .10);
}

.check-field,
.check-options label {
    font-size: 11px;
}

/* Dialogs and feedback */
.modal-backdrop {
    background: rgba(17, 24, 39, .46);
}

.modal-card {
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 16px;
    box-shadow: var(--pm-shadow-overlay);
}

.form-alert {
    font-size: 11px;
}

/* Tables and data display */
.table-scroll table {
    font-size: 12px;
}

.table-scroll th {
    color: var(--pm-color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    background: var(--pm-color-surface-secondary);
}

.table-scroll td {
    color: var(--pm-color-text-primary);
}

.table-scroll tr:hover td {
    background: #fafbfe;
}

/* Authentication and public product surfaces */
.login-page,
.register-page,
.public-page {
    background: var(--pm-color-background);
}

.login-form-wrap {
    background: var(--pm-color-surface);
}

.login-card h2,
.register-card h2,
.pricing-hero h1 {
    color: var(--pm-color-text-primary);
    font-weight: 700;
}

.login-card > p,
.register-card > p,
.pricing-hero > p {
    font-size: 12px;
    color: var(--pm-color-text-secondary);
}

.pricing-card.featured {
    border-color: rgba(91, 95, 239, .32);
    box-shadow: 0 16px 40px rgba(91, 95, 239, .10);
}

/* MudBlazor alignment with the product identity */
.mud-rtl-provider {
    direction: rtl;
    text-align: right;
}

.mud-input-control .mud-input-helper-text {
    text-align: right;
}

.mud-paper {
    background-color: var(--pm-color-surface);
}

.mud-snackbar {
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-overlay);
}

.mud-dialog {
    border-radius: var(--pm-radius-lg);
}

.mud-input-control .mud-input-outlined-border {
    border-color: var(--pm-color-border);
}

@media (max-width: 1050px) {
    .sidebar {
        width: 280px;
    }

    .main-area {
        margin-right: 0;
    }
}

@media (max-width: 780px) {
    .topbar {
        min-height: 64px;
        height: 64px;
        padding-inline: var(--pm-space-4);
    }

    .content-wrap {
        padding: var(--pm-space-6) var(--pm-space-4) calc(90px + env(safe-area-inset-bottom));
    }

    .global-search {
        min-width: 0;
    }
}

@media (max-width: 540px) {
    .content-wrap {
        padding-inline: var(--pm-space-3);
    }

    .kpi-grid,
    .report-kpis {
        grid-template-columns: 1fr;
    }

    .kanban {
        margin-inline: calc(var(--pm-space-3) * -1);
        padding-inline: var(--pm-space-3);
        grid-template-columns: repeat(5, 84vw);
    }
}


/* Light-first SaaS navigation palette */
.sidebar .brand strong,
.sidebar .workspace-switch strong,
.sidebar .user-card strong {
    color: var(--pm-color-text-primary);
}

.sidebar .brand small,
.sidebar .workspace-switch small,
.sidebar .user-card small,
.sidebar .nav-label {
    color: var(--pm-color-text-muted);
}

.sidebar .nav-item {
    color: var(--pm-sidebar-text);
}

.sidebar .nav-item:hover {
    background: var(--pm-color-surface-secondary);
    color: var(--pm-color-text-primary);
}

.sidebar .workspace-switch,
.sidebar .user-card {
    background: var(--pm-color-surface);
    border: 1px solid var(--pm-sidebar-border);
}

.sidebar .icon-button {
    color: var(--pm-sidebar-text);
}