/* ===========================================================================
   Diocese of Kabankalan — palette.
   Loaded last, after NiceAdmin's style.css. COLOURS ONLY: no layout, no
   spacing, no typography rules belong in this file. If a rule here changes a
   box model, it is in the wrong file.

   Base is the deep teal/green of the DOK-FMIS desktop chrome, which is the
   nearest thing to an established diocesan colour we have. Replace these three
   hex values once the coat of arms is sampled properly; nothing else needs to
   change.
   =========================================================================== */

:root {
  --dok-teal:        #1e4d4a;
  --dok-teal-dark:   #143633;
  --dok-teal-light:  #2f6d69;
  --dok-gold:        #b8892b;   /* accent, from the arms' metal */
  --dok-ink:         #15201f;
  --dok-muted:       #6b7f7d;
  --dok-surface:     #f4f7f6;
}

/* --- Chrome -------------------------------------------------------------- */

.logo span                    { color: var(--dok-teal); }
#header                       { border-bottom: 1px solid rgba(30, 77, 74, .12); }

.sidebar-nav .nav-heading     { color: var(--dok-muted); }
.sidebar-nav .nav-link        { color: var(--dok-ink); }
.sidebar-nav .nav-link i      { color: var(--dok-teal); }
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus  { color: var(--dok-teal); background: var(--dok-surface); }
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link.active i { color: var(--dok-teal-dark); }
.sidebar-nav .nav-link.active { color: var(--dok-teal-dark); background: var(--dok-surface); }

.pagetitle h1                 { color: var(--dok-teal-dark); }
.card-title                   { color: var(--dok-teal-dark); }

/* --- Actions ------------------------------------------------------------- */

.btn-dok,
.btn-primary                  { background-color: var(--dok-teal); border-color: var(--dok-teal); }
.btn-dok:hover,
.btn-primary:hover            { background-color: var(--dok-teal-dark); border-color: var(--dok-teal-dark); }
.btn-dok:focus,
.btn-primary:focus            { box-shadow: 0 0 0 .2rem rgba(30, 77, 74, .35); }
.btn-outline-dok              { color: var(--dok-teal); border-color: var(--dok-teal); }
.btn-outline-dok:hover        { color: #fff; background-color: var(--dok-teal); }

a                             { color: var(--dok-teal); }
a:hover                       { color: var(--dok-teal-dark); }

.bg-dok-teal                  { background-color: var(--dok-teal) !important; color: #fff; }
.bg-dok-gold                  { background-color: var(--dok-gold) !important; color: #fff; }
.text-dok                     { color: var(--dok-teal) !important; }

.form-control:focus,
.form-select:focus            { border-color: var(--dok-teal-light);
                                box-shadow: 0 0 0 .2rem rgba(30, 77, 74, .15); }

/* --- Money --------------------------------------------------------------- */

/* Figures line up on the decimal and never wrap mid-amount. Tabular numerals
   are a colour-adjacent typographic setting the palette owns because every
   money column in the system depends on it. */
.amount                       { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-negative              { color: #b0242a; }

/* --- Login --------------------------------------------------------------- */

.dok-login-bg                 { background: linear-gradient(160deg, var(--dok-teal) 0%, var(--dok-teal-dark) 100%); }
.dok-login-card .card-title   { color: var(--dok-teal-dark); }