/* Monshi theme. Colours are CSS custom properties so themes can change them without touching components. */

@font-face {
    font-family: "Vazirmatn";
    src: url("../lib/vazirmatn/Vazirmatn-wght.woff2") format("woff2-variations"),
         url("../lib/vazirmatn/Vazirmatn-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --app-primary: #1f5f8b;
    --app-primary-hover: #194e72;
    --app-bg: #f4f6f9;
    --app-surface: #ffffff;
    --app-text: #1f2933;
    --app-muted: #66727f;
    --app-border: #e2e7ed;

    --bs-body-font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 31, 95, 139;
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-hover);
}

[data-bs-theme="dark"] {
    --app-bg: #13171c;
    --app-surface: #1b2128;
    --app-text: #e3e7eb;
    --app-muted: #9aa5b1;
    --app-border: #2b333c;
    --bs-link-color: #7fb6dc;
    --bs-link-hover-color: #a5cbe6;
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--app-bg);
    color: var(--app-text);
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
}

.app-navbar {
    background-color: var(--app-primary);
}

.app-user-name {
    font-size: .9rem;
}

.app-card {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.app-table {
    --bs-table-bg: var(--app-surface);
    margin-bottom: 0;
}

.app-table th {
    font-weight: 600;
    color: var(--app-muted);
    font-size: .85rem;
    white-space: nowrap;
}

.ltr {
    direction: ltr;
    unicode-bidi: embed;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.company-select {
    min-width: 11rem;
}

/* Badges: status and role are distinguishable by colour and by text. */
.badge { font-weight: 500; }
.badge-active { background-color: #e3f4ea; color: #1d6b3d; }
.badge-inactive { background-color: #eceff2; color: #5b6670; }
.badge-role-admin { background-color: #e6eefc; color: #1e4fa3; }
.badge-role-manager { background-color: #f3e9fb; color: #6b3196; }
.badge-role-employee { background-color: #eef1f4; color: #3d4852; }
.badge-sysadmin { background-color: #fdecea; color: #a1281b; }
.badge-ai { background-color: #fff4dc; color: #8a5a00; }

[data-bs-theme="dark"] .badge-active { background-color: #173b26; color: #8fd8aa; }
[data-bs-theme="dark"] .badge-inactive { background-color: #2a3139; color: #a9b3bd; }
[data-bs-theme="dark"] .badge-role-admin { background-color: #1b2f52; color: #9bbcf2; }
[data-bs-theme="dark"] .badge-role-manager { background-color: #33224a; color: #cfa6ef; }
[data-bs-theme="dark"] .badge-role-employee { background-color: #2a3139; color: #c3ccd5; }
[data-bs-theme="dark"] .badge-sysadmin { background-color: #4a1f1a; color: #f2a59b; }
[data-bs-theme="dark"] .badge-ai { background-color: #43340f; color: #f0cf7a; }

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-color: var(--app-border);
}