/* ============================================================================
   FATech dashboard — 2026 refresh
   Loaded last, after uikit + altair main.min.css + custom.css.
   Restyles the existing Altair/UIkit markup rather than replacing it, so every
   page's PHP, queries and UIkit behaviours keep working untouched.
   ========================================================================== */

:root {
  --fa-green:      #4b8b3b;
  --fa-green-dark: #3a6e2e;
  --fa-green-soft: #eef6ea;
  --fa-ink:        #16202e;
  --fa-ink-2:      #5a6b81;
  --fa-ink-3:      #8b99ac;
  --fa-line:       #e6ebf2;
  --fa-bg:         #f4f6fa;
  --fa-card:       #ffffff;
  --fa-amber:      #b97a04;
  --fa-amber-bg:   #fdf6e6;
  --fa-red:        #c0392b;
  --fa-red-bg:     #fdeeec;
  --fa-blue:       #2563c9;
  --fa-blue-bg:    #eef3fd;
  --fa-radius:     14px;
  --fa-shadow:     0 1px 2px rgba(16,32,58,.04), 0 8px 24px rgba(16,32,58,.06);
  --fa-shadow-lg:  0 18px 46px rgba(16,32,58,.12);
  --fa-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
body {
  background: var(--fa-bg) !important;
  font-family: var(--fa-sans) !important;
  color: var(--fa-ink) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--fa-sans) !important; color: var(--fa-ink) !important; letter-spacing: -.02em; }
a { color: var(--fa-green); }
a:hover { color: var(--fa-green-dark); }

#page_content { background: var(--fa-bg) !important; }
#page_content_inner { padding: 26px 28px 60px !important; }
@media (max-width: 767px) { #page_content_inner { padding: 18px 16px 50px !important; } }

/* ------------------------------------------------------------- top bar ---- */
#header_main,
#header_main.md-bg-light-green-600 {
  background: var(--fa-card) !important;
  border-bottom: 1px solid var(--fa-line) !important;
  box-shadow: 0 1px 2px rgba(16,32,58,.04) !important;
}
#header_main .uk-navbar { background: transparent !important; }
#header_main .sSwitchIcon,
#header_main .sSwitchIcon:after,
#header_main .sSwitchIcon:before { background: var(--fa-ink) !important; }
#header_main .md-user-image {
  border-radius: 50% !important;
  border: 2px solid var(--fa-line);
  width: 34px; height: 34px; object-fit: cover;
}
.fa-topbar-title {
  font-size: .98rem; font-weight: 650; color: var(--fa-ink);
  line-height: 48px; padding-left: 4px; letter-spacing: -.01em;
}

/* ------------------------------------------------------------- sidebar ---- */
#sidebar_main {
  background: #0f1b28 !important;
  border-right: 0 !important;
}
#sidebar_main .sidebar_main_header { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.07); }
#sidebar_main .sidebar_logo,
#sidebar_main .sidebar_logo.md-bg-light-green-60 { background: transparent !important; height: auto !important; }
#sidebar_main .sidebar_logo img { max-width: 120px; height: auto; }
#sidebar_main .sidebar_logo section,
#sidebar_main .sidebar_logo .md-color-light-green-600 {
  color: #8fd06f !important;
  font-size: .74rem !important; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 0 14px; font-weight: 600;
}

#sidebar_main .menu_section > ul > li > a {
  color: #b3c0d1 !important;
  padding: 11px 18px !important;
  border-radius: 0 !important;
  font-size: .92rem;
  transition: background .16s, color .16s;
}
#sidebar_main .menu_section > ul > li > a:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
#sidebar_main .menu_section > ul > li > a .menu_icon i { color: inherit !important; font-size: 20px; }
#sidebar_main .menu_section > ul > li.current_section > a {
  background: rgba(139,208,111,.12) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--fa-green);
  font-weight: 600;
}
#sidebar_main .menu_section ul ul { background: rgba(0,0,0,.22) !important; padding: 4px 0; }
#sidebar_main .menu_section ul ul a { color: #93a3b8 !important; font-size: .86rem; padding-left: 56px !important; }
#sidebar_main .menu_section ul ul a:hover { color: #fff !important; }
#sidebar_main .menu_section ul ul li.act_item a { color: #8fd06f !important; font-weight: 600; }
#sidebar_main .menu_section > ul > li > a .menu_title { letter-spacing: -.01em; }

/* ---------------------------------------------------------------- cards --- */
.md-card {
  background: var(--fa-card) !important;
  border: 1px solid var(--fa-line) !important;
  border-radius: var(--fa-radius) !important;
  box-shadow: var(--fa-shadow) !important;
  transition: box-shadow .2s, transform .2s;
}
.md-card:hover { box-shadow: var(--fa-shadow-lg) !important; }
.md-card-content { padding: 22px 24px !important; }
.md-card-content.large-padding { padding: 34px !important; }
.md-card-toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--fa-line) !important;
  height: auto !important; min-height: 0 !important;
  padding: 18px 24px !important;
}
.md-card-toolbar-heading-text {
  font-size: 1rem !important; font-weight: 650 !important;
  color: var(--fa-ink) !important; line-height: 1.3 !important;
  letter-spacing: -.01em;
}

/* Stat tiles on the dashboard home */
.md-card-content > .uk-float-right .material-icons,
.md-card-content .md-color-light-green-600 { color: var(--fa-green) !important; }
.md-card-content > .uk-float-right {
  background: var(--fa-green-soft); border-radius: 10px;
  width: 42px; height: 42px; display: grid; place-items: center;
  margin: 0 !important;
}
.md-card-content > .uk-float-right .material-icons { font-size: 21px; }
.md-card-content > span.uk-text-muted {
  display: block; font-size: .78rem !important; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fa-ink-3) !important;
  margin-bottom: 6px;
}
.md-card-content > h2 { font-size: 1.85rem !important; font-weight: 700 !important; line-height: 1.15 !important; }

/* ---------------------------------------------------------------- tables -- */
.uk-table { border-collapse: separate !important; border-spacing: 0; font-size: .9rem; }
.uk-table th {
  background: #f8fafc !important;
  color: var(--fa-ink-3) !important;
  font-size: .73rem !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--fa-line) !important;
}
.uk-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--fa-line) !important;
  color: var(--fa-ink-2) !important;
  vertical-align: middle !important;
}
.uk-table tbody tr:hover td { background: #fafbfd !important; }
.uk-table tbody tr:last-child td { border-bottom: 0 !important; }
.uk-table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }

/* Row actions and inline badges */
.uk-badge {
  border-radius: 999px !important; padding: 4px 11px !important;
  font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .04em; text-transform: uppercase;
}
.uk-badge-success, .md-bg-light-green-600 { background: var(--fa-green) !important; color: #fff !important; }
.uk-badge-warning { background: var(--fa-amber) !important; color: #fff !important; }
.uk-badge-danger  { background: var(--fa-red) !important; color: #fff !important; }

/* --------------------------------------------------------------- buttons -- */
.md-btn {
  border-radius: 9px !important;
  font-family: var(--fa-sans) !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
  transition: .16s;
}
.md-btn-primary, .md-btn-success {
  background: var(--fa-green) !important; color: #fff !important;
}
.md-btn-primary:hover, .md-btn-success:hover { background: var(--fa-green-dark) !important; }
.md-btn-danger { background: var(--fa-red) !important; color: #fff !important; }
.md-btn-flat { background: transparent !important; color: var(--fa-green) !important; }
.md-btn-flat:hover { background: var(--fa-green-soft) !important; }
.md-btn-large { padding: 13px 26px !important; font-size: .95rem !important; }
.md-btn-block { width: 100% !important; }
.md-btn-wave-light, .md-btn-wave { overflow: hidden; }

/* ----------------------------------------------------------------- forms -- */
.md-input {
  border-bottom: 0 !important;
  border: 1px solid var(--fa-line) !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: .94rem !important;
  background: #fbfcfe !important;
  color: var(--fa-ink) !important;
  height: auto !important;
  box-shadow: none !important;
}
.md-input:focus {
  border-color: var(--fa-green) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(75,139,59,.12) !important;
}
.md-input-wrapper > label, .uk-form-row > label {
  position: static !important;
  display: block !important;
  font-size: .84rem !important; font-weight: 600 !important;
  color: var(--fa-ink) !important;
  margin-bottom: 7px !important;
  transform: none !important;
}
.md-input-bar { display: none !important; }
.uk-form-row { margin-bottom: 18px !important; }
select.md-input, textarea.md-input { background: #fbfcfe !important; }

/* ---------------------------------------------------------------- alerts -- */
.uk-alert {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  padding: 13px 17px !important;
  font-size: .91rem !important;
}
.uk-alert-success { background: var(--fa-green-soft) !important; border-color: #cbe4c0 !important; color: #2f6323 !important; }
.uk-alert-warning { background: var(--fa-amber-bg) !important; border-color: #f0dcb4 !important; color: var(--fa-amber) !important; }
.uk-alert-danger  { background: var(--fa-red-bg) !important;  border-color: #f3c9c9 !important; color: var(--fa-red) !important; }
.uk-alert-info    { background: var(--fa-blue-bg) !important; border-color: #cbdcf7 !important; color: var(--fa-blue) !important; }

/* ---------------------------------------------------------------- footer -- */
#footer,
#footer.md-bg-light-green-600 {
  background: transparent !important;
  color: var(--fa-ink-3) !important;
  border-top: 1px solid var(--fa-line) !important;
  font-size: .84rem;
  padding: 18px 0 !important;
}
#footer span { color: var(--fa-ink-2) !important; }

/* ------------------------------------------------------------ login page -- */
body.login_page { background: var(--fa-bg) !important; }
.login_page_wrapper { padding-top: 6vh; }
.login_page_wrapper > .uk-text-center img { max-width: 150px; height: auto; margin-bottom: 8px; }
#login_card, .md-card#login_card {
  border-radius: 16px !important;
  box-shadow: var(--fa-shadow-lg) !important;
  border: 1px solid var(--fa-line) !important;
  max-width: 430px; margin: 0 auto;
}
#login_card .heading_a {
  font-size: 1.35rem !important; font-weight: 700 !important;
  color: var(--fa-ink) !important; text-transform: none !important;
  letter-spacing: -.02em; margin-bottom: 6px !important;
}
#login_card .heading_a + .fa-sub { color: var(--fa-ink-3); font-size: .9rem; margin-bottom: 22px; display: block; }
#login_card .md-btn-block { margin-top: 6px; }

/* ------------------------------------------------------------- utilities -- */
.uk-text-muted { color: var(--fa-ink-3) !important; }
.md-color-light-green-600 { color: var(--fa-green) !important; }
.md-bg-light-green-50 { background: var(--fa-green-soft) !important; }
hr { border-color: var(--fa-line) !important; }

.fa-page-head { margin-bottom: 22px; }
.fa-page-head h1 {
  font-size: 1.5rem; font-weight: 700; margin: 0 0 4px;
  letter-spacing: -.025em;
}
.fa-page-head p { color: var(--fa-ink-2); font-size: .93rem; margin: 0; }

.fa-empty { text-align: center; padding: 48px 20px; }
.fa-empty i { font-size: 44px; color: var(--fa-ink-3); opacity: .5; }
.fa-empty h4 { margin: 14px 0 6px; font-size: 1.05rem; }
.fa-empty p { color: var(--fa-ink-2); font-size: .92rem; margin: 0 0 16px; }

/* Sidebar toggle on small screens should not leave a green seam */
@media (max-width: 1220px) {
  #sidebar_main { box-shadow: var(--fa-shadow-lg); }
}