/* ============================================================
   Kboard theme on top of the Cuba template.
   Cuba's CSS styles cards/buttons/forms; the sidebar/header
   layout is supplied here so it doesn't depend on Cuba's JS.
   ============================================================ */

/* Kurdish 'Nali' font. Drop the licensed font file(s) into
   wwwroot/assets/fonts/nali/ (Nali.woff2 preferred). Until present, the
   browser falls back to Noto Naskh Arabic so nothing breaks. */
@font-face {
    font-family: 'Nali';
    src: url('assets/fonts/nali/Nali.woff2') format('woff2'),
         url('assets/fonts/nali/Nali.woff') format('woff'),
         url('assets/fonts/nali/Nali.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root,
body,
.page-wrapper {
    --theme-default: #2E7D32;
    --theme-secondary: #66bb6a;
}

body {
    background: #f5f6fa;
    font-family: 'Nali', 'Rubik', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Green accents */
.btn-primary, .btn-success {
    background-color: #2E7D32 !important;
    border-color: #1B5E20 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background-color: #256528 !important;
    border-color: #1B5E20 !important;
}
.btn-outline-primary { color: #2E7D32 !important; border-color: #2E7D32 !important; }
.btn-outline-primary:hover { background: #2E7D32 !important; color: #fff !important; }
a, .font-primary, .txt-primary { color: #2E7D32; }
.form-check-input:checked { background-color: #2E7D32; border-color: #2E7D32; }
.form-control:focus, .form-select:focus { border-color: #66bb6a; box-shadow: 0 0 0 .15rem rgba(46,125,50,.18); }

/* ---------- Layout ---------- */
.page-wrapper { display: block; }

.sidebar-wrapper {
    position: fixed; top: 0; left: 0; width: 260px; height: 100vh;
    background: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.08);
    z-index: 9; overflow-y: auto;
}
.sidebar-wrapper > div { display: block; }
.sidebar-wrapper .logo-wrapper { padding: 18px 22px; border-bottom: 1px solid #f0f0f3; }
.sidebar-wrapper .logo-wrapper img { height: 34px; width: auto; }
.sidebar-wrapper .logo-wrapper .back-btn,
.sidebar-wrapper .logo-wrapper .toggle-sidebar,
.sidebar-wrapper .logo-icon-wrapper { display: none; }

.sidebar-main { padding: 10px 0; }
.sidebar-links { list-style: none; margin: 0; padding: 8px 12px; }
.sidebar-links .back-btn { display: none; }
.sidebar-links .sidebar-main-title { padding: 10px 12px 4px; }
.sidebar-links .sidebar-main-title h6 {
    margin: 0; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: #9aa0a6;
}
.sidebar-list { list-style: none; }
.sidebar-list .sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 3px 0; border-radius: 10px;
    color: #2f3038; font-weight: 500; text-decoration: none; transition: .15s;
    -webkit-tap-highlight-color: transparent; outline: none;
}
.sidebar-list .sidebar-link span { color: inherit; }
.sidebar-list .sidebar-link svg { width: 18px; height: 18px; stroke: #6b6f76; }
.sidebar-list .sidebar-link:hover { background: #eef6ef; color: #2E7D32; }
.sidebar-list .sidebar-link:hover span { color: #2E7D32; }
.sidebar-list .sidebar-link:hover svg { stroke: #2E7D32; }

/* Active (current) page — white text/icon on green, including the inner span */
.sidebar-list .sidebar-link.active,
.sidebar-list .sidebar-link.active span,
.sidebar-list a.sidebar-link.active span {
    color: #fff !important;
    background: transparent;
}
.sidebar-list .sidebar-link.active {
    background: #2E7D32 !important;
    box-shadow: 0 6px 14px rgba(46,125,50,.3);
}
.sidebar-list .sidebar-link.active svg { stroke: #fff !important; }

/* Header */
.page-header {
    position: sticky; top: 0; z-index: 8;
    margin-left: 260px; background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.05); min-height: 62px;
    display: flex; align-items: center;
}
.page-header .header-wrapper { width: 100%; padding: 0 24px; align-items: center; }
.page-header .header-logo-wrapper { display: none; }
.brand-title { font-weight: 600; color: #2E7D32; font-size: 1.05rem; }
.page-header .mode { cursor: pointer; }
.page-header .mode svg { width: 20px; height: 20px; stroke: #6b6f76; }

/* Content */
.page-body-wrapper { display: block; }
.page-body { margin-left: 260px; padding: 22px; min-height: calc(100vh - 62px); }
.footer { margin-left: 260px; padding: 14px; color: #9aa0a6; }
.page-title h3 { margin: 0; font-weight: 600; }
.card { border: none; border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.06); }
.card .card-header { border-bottom: 1px solid #f1f1f4; }

/* ---------- Uniform page rhythm ----------
   Pages each render a `.page-title` then content `.card`(s) in their own
   `.container-fluid`. Bootstrap leaves no consistent gap between those blocks, so
   spacing looked different per page. Pin a single vertical rhythm everywhere. */
.page-body .container-fluid { padding-left: 0; padding-right: 0; }
.page-body .page-title { margin: 0 0 18px; }
.page-body .card { margin-bottom: 18px; }
.page-body .card .card-header { padding: 18px 22px; }
.page-body .card .card-body { padding: 22px; }

/* Kurdish/Arabic values read right-to-left */
textarea[dir="rtl"], input[dir="rtl"] { text-align: right; }

/* The settings text fields hold LTR data (server URL, account code) and are the
   only dir="ltr" inputs in the app. The Kurdish 'Nali' font has no Latin glyphs
   and mangles these, so drop it for LTR inputs — Kurdish (RTL) fields keep Nali. */
input[dir="ltr"], textarea[dir="ltr"] {
    font-family: 'Rubik', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Mobile */
@media (max-width: 991px) {
    .sidebar-wrapper { transform: translateX(-100%); transition: .25s; }
    .sidebar-wrapper.open { transform: translateX(0); }
    .page-header, .page-body, .footer { margin-left: 0; }
}

/* ---------- RTL (Kurdish Sorani) — mirror the LTR sidebar layout ---------- */
[dir="rtl"] .sidebar-wrapper { left: auto; right: 0; }
[dir="rtl"] .page-header,
[dir="rtl"] .page-body,
[dir="rtl"] .footer { margin-left: 0; margin-right: 260px; }
[dir="rtl"] .sidebar-list .sidebar-link { text-align: right; }

/* Bootstrap margin helpers assume LTR; flip the ones we use for spacing icons/buttons */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }

@media (max-width: 991px) {
    [dir="rtl"] .sidebar-wrapper { transform: translateX(100%); }
    [dir="rtl"] .sidebar-wrapper.open { transform: translateX(0); }
    [dir="rtl"] .page-header,
    [dir="rtl"] .page-body,
    [dir="rtl"] .footer { margin-right: 0; }
}

/* ---------- Readability: bigger, black, bold text app-wide ----------
   The Cuba template uses small, light-grey text in many places. Per request,
   bump the base size and force black + bold so every label/hint/value is easy
   to read. The Settings "Font size" control (zoom) scales this further. */
body { font-size: 16px; }

body, p, span, label, a, li, small, strong, b,
h1, h2, h3, h4, h5, h6,
.card-header, .card-body, .form-label, .form-text, .f-light,
.nav-link, .sidebar-link, .sidebar-title, .alert, .badge,
table, th, td, .form-control, .form-select, textarea, option {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Lift the small / secondary text the template renders tiny. */
.f-light, .form-text, small, .card-header p { font-size: 1rem !important; }
.form-control, .form-select, textarea, .nav-link, .sidebar-link { font-size: 1.05rem !important; }
h5, .card-header h5 { font-size: 1.3rem !important; }
h3 { font-size: 1.7rem !important; }

/* Inputs: keep placeholders dark/bold too. */
::placeholder { color: #333 !important; opacity: 1; font-weight: 700 !important; }