/* =====================================================================
   Phone directory — Bootstrap 5 is the base; this file only holds:
   1) the Tajawal font, 2) the prototype colours as Bootstrap variables,
   3) the few sizes Bootstrap has no utility for.
   No inline styles anywhere (strict Content-Security-Policy).
   ===================================================================== */

/* Same Tajawal files as the Knowledge Management system (wwwroot/fonts) */
@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url("../fonts/Tajawal-Regular.woff") format("woff"); }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url("../fonts/Tajawal-Medium.woff") format("woff"); }
@font-face { font-family: "Tajawal"; font-weight: 700 900; font-display: swap; src: url("../fonts/Tajawal-Bold.woff") format("woff"); }

/* Prototype colours mapped onto Bootstrap's variables (light) */
:root, [data-bs-theme=light] {
    --bs-font-sans-serif: "Tajawal", Tahoma, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-success: #449E60; --bs-success-rgb: 68, 158, 96;
    --bs-success-text-emphasis: #2F7A49; --bs-success-bg-subtle: #EAF5EE; --bs-success-border-subtle: #BFE0C9;
    --bs-primary: #449E60; --bs-primary-rgb: 68, 158, 96;
    --bs-link-color: #2F7A49; --bs-link-color-rgb: 47, 122, 73; --bs-link-hover-color: #24603A;
    --bs-tertiary-bg: #F3F6F4; --bs-tertiary-bg-rgb: 243, 246, 244;
    --bs-border-color: #E2E8E4;
    --app-sea: #17383A;
}
/* Prototype colours (dark) */
[data-bs-theme=dark] {
    --bs-body-bg: #233C3D; --bs-body-bg-rgb: 35, 60, 61;
    --bs-tertiary-bg: #192D2E; --bs-tertiary-bg-rgb: 25, 45, 46;
    --bs-secondary-bg: #1E3334;
    --bs-border-color: #31504F;
    --bs-body-color: #E4E9E7;
    --bs-success: #4FB06F; --bs-success-rgb: 79, 176, 111;
    --bs-success-text-emphasis: #8FD3A5; --bs-success-bg-subtle: #21402D;
    --bs-link-color: #8FD3A5; --bs-link-color-rgb: 143, 211, 165;
}

/* Buttons take the prototype green (Bootstrap compiles button colours, so they are set here) */
.btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: #2F7A49; --bs-btn-hover-border-color: #2F7A49;
               --bs-btn-active-bg: #2F7A49; --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success);
                       --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: #2F7A49; }
.form-control:focus, .form-select:focus { border-color: var(--bs-success); box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .15); }

/* Sizes Bootstrap has no utility for */
.app-avatar { width: 2rem; height: 2rem; }
.app-avatar-lg { width: 2.75rem; height: 2.75rem; }
.app-user-menu { min-width: 20rem; }
.app-auth { max-width: 26rem; }
.min-w-0 { min-width: 0; }