/* ===========================================================================
   UMS design layer
   ---------------------------------------------------------------------------
   Loaded LAST, after bootstrap.min.css, the INSPINIA style.css and
   new/index.css, on every page. It restyles the markup the app already emits
   rather than requiring changes across ~200 PHP files, so the component classes
   in use (.btn, .ibox, .nav-tabs, .breadcrumb, .page-heading, .form-control,
   .table, .alert) all pick this up automatically.

   Rules for editing this file:
     * Additive only. Do not rename or remove classes the pages depend on.
     * No external requests — no CDN, no web fonts. This app is self-hosted and
       served over TLS; the previous stylesheet pulled a CDN copy of
       FontAwesome 4.0.3 and an http:// web font, which broke icons and
       tripped mixed-content blocking.
     * Keep specificity as low as it can be while still beating INSPINIA.
   =========================================================================== */

:root {
  /* Sidebar navy, carried through to primary actions and headings so the
     chrome reads as one system. */
  --ums-navy-900: #1b2b3a;
  --ums-navy-800: #24384a;
  --ums-navy-700: #2c4a63;
  --ums-navy-600: #3a5f7d;

  --ums-accent:     #1ab394;   /* INSPINIA's green — kept, already familiar */
  --ums-accent-dk:  #15987d;

  --ums-danger:  #d9534f;
  --ums-warning: #e8a33d;
  --ums-info:    #3a7ca5;

  --ums-ink:        #24313d;
  --ums-ink-soft:   #5b6b7a;
  --ums-ink-faint:  #8a99a8;

  --ums-line:     #e3e8ee;
  --ums-line-str: #cfd7e0;
  --ums-surface:  #ffffff;
  --ums-canvas:   #f2f4f7;

  --ums-radius:    5px;
  --ums-radius-sm: 3px;
  --ums-shadow:    0 1px 2px rgba(27, 43, 58, .06), 0 1px 3px rgba(27, 43, 58, .04);
  --ums-shadow-md: 0 2px 6px rgba(27, 43, 58, .08), 0 1px 2px rgba(27, 43, 58, .05);
  --ums-focus:     0 0 0 3px rgba(58, 95, 125, .18);
}

/* ---------------------------------------------------------------------------
   1. Typography

   A system font stack: no network request, renders natively on Windows (the
   client machines) and Linux alike. Replaces the CDN "Titillium Web" the old
   stylesheet imported.
   --------------------------------------------------------------------------- */
body,
.main-menu .nav-text,
.main-menu li > a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ums-ink);
  background: var(--ums-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  color: var(--ums-navy-800);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* The page title in .page-heading was a very large thin weight, which read as
   unfinished next to the dense tables below it. */
.page-heading h2 {
  font-size: 21px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.ibox-title h5 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ums-ink-soft);
}

small, .small { font-size: 12px; }

.help-block,
.help-block.small {
  color: var(--ums-ink-faint);
  font-size: 12px;
  line-height: 1.5;
}

.text-muted { color: var(--ums-ink-faint) !important; }

a { color: var(--ums-navy-600); }
a:hover, a:focus { color: var(--ums-navy-700); }

code {
  background: #eef1f5;
  color: var(--ums-navy-700);
  border-radius: var(--ums-radius-sm);
  font-size: 12px;
  padding: 2px 5px;
}

/* ---------------------------------------------------------------------------
   2. Icons — the important fix

   new/index.css used to style bare `.fa` as a 60x36 table-cell so the sidebar
   rail could centre its glyphs. Because it loads after font-awesome.css, that
   applied to EVERY icon in the app: an <i class="fa fa-check"> inside a button
   became a 60px-wide block, which is why icon buttons rendered two lines tall.
   The sidebar rules are now scoped to .main-menu (see new/index.css); this
   restores sane inline behaviour everywhere else.
   --------------------------------------------------------------------------- */
.btn .fa,
td .fa, th .fa,
.breadcrumb .fa,
.alert .fa,
.ibox-title .fa,
.ibox-tools .fa,
.nav-tabs .fa,
.input-group-addon .fa,
label .fa, p .fa, h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  text-align: inherit;
}

/* Space an icon from the label that follows it, without needing markup edits.
   `gap` rather than a margin on the icon: .btn is a flex container, so gap
   applies only when there is more than one flex item — an icon-only button gets
   no stray trailing space. (A margin with :only-child cannot express this: the
   label is a bare text node, not an element, so an icon followed by text still
   matches :only-child.) Flex also collapses the literal whitespace that the
   markup relies on between </i> and the label, which is why this is needed. */
.btn { gap: 6px; }

/* ---------------------------------------------------------------------------
   3. Buttons

   The app uses .btn plus btn-default / btn-white / btn-primary / btn-info /
   btn-success / btn-sm / btn-xs / btncolor. All are given one consistent
   geometry so a row of mixed variants lines up.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--ums-radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease,
              color .12s ease, box-shadow .12s ease;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
  outline: none;
  box-shadow: var(--ums-focus);
}

/* A bare `class="btn"` with no variant was invisible — it appeared as plain
   text (the Jawan List / Add New / Bulk Upload row did this). Give it the
   neutral treatment so it at least reads as a control. */
.btn,
.btn-default,
.btn-white {
  background: var(--ums-surface);
  border-color: var(--ums-line-str);
  color: var(--ums-ink);
}

.btn:hover,
.btn-default:hover,
.btn-white:hover,
.btn-default:focus,
.btn-white:focus {
  background: #f7f9fb;
  border-color: #b8c4d0;
  color: var(--ums-navy-800);
}

.btn-primary,
.btncolor {
  background: var(--ums-navy-700);
  border-color: var(--ums-navy-700);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary.active,
.btncolor:hover, .btncolor:focus {
  background: var(--ums-navy-800);
  border-color: var(--ums-navy-800);
  color: #fff;
}

.btn-success {
  background: var(--ums-accent);
  border-color: var(--ums-accent);
  color: #fff;
}
.btn-success:hover, .btn-success:focus,
.btn-success:active, .btn-success.active {
  background: var(--ums-accent-dk);
  border-color: var(--ums-accent-dk);
  color: #fff;
}

.btn-info {
  background: var(--ums-info);
  border-color: var(--ums-info);
  color: #fff;
}
.btn-info:hover, .btn-info:focus,
.btn-info:active, .btn-info.active {
  background: #326d8f;
  border-color: #326d8f;
  color: #fff;
}

.btn-danger {
  background: var(--ums-danger);
  border-color: var(--ums-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #c3423f; border-color: #c3423f; color: #fff;
}

.btn-warning {
  background: var(--ums-warning);
  border-color: var(--ums-warning);
  color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
  background: #d18f2c; border-color: #d18f2c; color: #fff;
}

.btn-sm, .btn-xs, .btn-md {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
}
.btn-xs { min-height: 24px; padding: 1px 8px; font-size: 11px; }
.btn-lg { min-height: 42px; padding: 10px 20px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--ums-radius); border-bottom-left-radius: var(--ums-radius); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--ums-radius); border-bottom-right-radius: var(--ums-radius); }

.btn[disabled], .btn.disabled { opacity: .55; box-shadow: none; }

/* ---------------------------------------------------------------------------
   4. Tabs

   Bootstrap 3's boxed tabs read heavily against the flat cards. Switched to an
   underline indicator, which also makes the active tab obvious.
   --------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--ums-line);
}

.nav-tabs > li { margin-bottom: -1px; }

.nav-tabs > li > a {
  margin-right: 2px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ums-ink-soft);
  font-size: 13px;
  font-weight: 600;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  border: none;
  border-bottom: 2px solid var(--ums-line-str);
  background: transparent;
  color: var(--ums-navy-800);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none;
  border-bottom: 2px solid var(--ums-navy-700);
  background: transparent;
  color: var(--ums-navy-800);
}

.tab-content { padding-top: 4px; }

/* --- pseudo-tabs ----------------------------------------------------------
   57 pages put their module sub-navigation in .page-heading as a row of
   <a class="btn"> links rather than real .nav-tabs markup. Left alone those
   render as bare buttons — and before this file, a variant-less .btn had no
   background at all, so they read as loose plain-text links.

   They are restyled here to be visually identical to the .nav-tabs strip used
   by the embodiment module, so sub-navigation looks the same on every page.
   Assets/js/ums-ui.js adds .ums-tab / .ums-tab-active, since which link is
   "current" cannot be determined in CSS (see that file).

   Only bare class="btn" is matched; anything with a btn-* variant is a real
   action button and keeps its button styling. --------------------------------- */
.page-heading a.btn.ums-tab,
.page-heading a.btn:not([class*="btn-"]) {
  min-height: 0;
  margin: 0 2px 0 0;
  padding: 9px 15px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ums-ink-soft);
  font-size: 13px;
  font-weight: 600;
  vertical-align: bottom;
}

.page-heading a.btn.ums-tab:hover,
.page-heading a.btn:not([class*="btn-"]):hover,
.page-heading a.btn.ums-tab:focus,
.page-heading a.btn:not([class*="btn-"]):focus {
  background: transparent;
  border-bottom-color: var(--ums-line-str);
  color: var(--ums-navy-800);
  box-shadow: none;
}

.page-heading a.btn.ums-tab-active,
.page-heading a.btn.ums-tab-active:hover,
.page-heading a.btn.ums-tab-active:focus {
  background: transparent;
  border-bottom-color: var(--ums-navy-700);
  color: var(--ums-navy-800);
}

/* The container is marked .ums-tabbar by Assets/js/ums-ui.js. It is a bootstrap
   column whose width varies per page (col-lg-4 … col-lg-6), which wrapped longer
   strips onto a second row — so it is given the full width here and pulled flush
   with the heading's own bottom border, aligning the underline indicator. */
.page-heading .ums-tabbar {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
  margin: 10px 0 -14px;
  white-space: nowrap;
  overflow-x: auto;
}

.page-heading .ums-tabbar > a.btn.ums-tab:first-child { margin-left: -3px; }

/* ---------------------------------------------------------------------------
   4b. Employee record navigation

   The 15 per-jawan sections (Official Details … Credentials) were INSPINIA's
   "file-manager / category-list" widget: an identical <i class="fa fa-circle">
   per row in a meaningless colour, no padding, no hover, text jammed against
   the bullet, and an invalid <ul> nested directly inside another <ul>.

   Rendered from Employee/sidebar/_sections.php as .ums-record-nav; each row now
   carries an icon describing its section.
   --------------------------------------------------------------------------- */
.ums-record-nav-wrap { padding: 8px; }

.ums-record-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ums-record-nav > li { margin: 0; }

.ums-record-nav > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--ums-radius);
  border-left: 3px solid transparent;
  color: var(--ums-ink-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.ums-record-nav > li > a .fa {
  flex: 0 0 16px;
  width: 16px;
  display: inline-block;
  font-size: 14px;
  text-align: center;
  color: var(--ums-ink-faint);
  transition: color .12s ease;
}

.ums-record-nav > li > a:hover,
.ums-record-nav > li > a:focus {
  background: #f3f6f9;
  border-left-color: var(--ums-line-str);
  color: var(--ums-navy-800);
}
.ums-record-nav > li > a:hover .fa { color: var(--ums-navy-600); }

.ums-record-nav > li.active > a {
  background: #eaf1f7;
  border-left-color: var(--ums-navy-700);
  color: var(--ums-navy-800);
  font-weight: 600;
}
.ums-record-nav > li.active > a .fa { color: var(--ums-navy-700); }

/* ---------------------------------------------------------------------------
   5. Cards (.ibox) and page heading
   --------------------------------------------------------------------------- */
.ibox {
  background: var(--ums-surface);
  border: 1px solid var(--ums-line);
  border-radius: var(--ums-radius);
  box-shadow: var(--ums-shadow);
  margin-bottom: 22px;
  clear: both;
}

/* INSPINIA draws a 2px accent bar on top of every box; one flat border reads
   calmer when several boxes stack. */
.ibox-title {
  background: var(--ums-surface);
  border: none;
  border-bottom: 1px solid var(--ums-line);
  border-radius: var(--ums-radius) var(--ums-radius) 0 0;
  padding: 12px 16px;
  min-height: auto;
}

.ibox-content {
  background: var(--ums-surface);
  border: none;
  border-radius: 0 0 var(--ums-radius) var(--ums-radius);
  padding: 16px;
}

.ibox-title + .ibox-content { border-top: none; }
.ibox-tools { float: right; }

.page-heading {
  background: var(--ums-surface);
  border-bottom: 1px solid var(--ums-line);
  padding: 12px 18px 14px;
  /* The markup is `<div class="row … page-heading">`, and bootstrap's .row has
     -15px side margins meant to be cancelled by a container's padding. #main has
     no horizontal padding, so the band stuck 15px past the right edge of the
     viewport on every page that has one — measured on 76 of 108 pages crawled.
     It is used as a full-width band, not a grid row, so the negative margins are
     simply removed. */
  margin: 0;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 2px;
  font-size: 12px;
}
.breadcrumb > li + li:before { color: var(--ums-ink-faint); content: "/"; padding: 0 6px; }
.breadcrumb a { color: var(--ums-ink-soft); }
.breadcrumb a:hover { color: var(--ums-navy-700); }
.breadcrumb > .active { color: var(--ums-ink); font-weight: 600; }

.wrapper-content { padding: 20px 18px 32px; }

/* ---------------------------------------------------------------------------
   6. Tables
   --------------------------------------------------------------------------- */
.table { margin-bottom: 0; }

.table > thead > tr > th {
  border-bottom: 1px solid var(--ums-line-str);
  background: #f7f9fb;
  color: var(--ums-ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
  padding: 9px 10px;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--ums-line);
  padding: 9px 10px;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd)  { background: #fbfcfd; }
.table-hover   > tbody > tr:hover             { background: #eef3f8; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--ums-line); }

/* Status words are rendered with the legacy <font color="…"> tag in 31 files
   (49 occurrences). Rather than rewrite that markup, the colours are remapped to
   the palette here. Outside a table cell it stays plain coloured text; inside one
   it becomes a status pill (the more specific rules below win). */
font[color="green"] { color: #14795f; }
font[color="red"]   { color: #a8332f; }
font[color="blue"]  { color: #2b5f80; }

td font[color] {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
td font[color="green"] { color: #14795f !important; background: #e3f5ef; }
td font[color="red"]   { color: #a8332f !important; background: #fceceb; }
td font[color="blue"]  { color: #2b5f80 !important; background: #e8f1f7; }

/* DataTables chrome */
.dataTables_wrapper { padding-bottom: 4px; }
.dataTables_filter input,
.dataTables_length select {
  border: 1px solid var(--ums-line-str);
  border-radius: var(--ums-radius);
  padding: 4px 8px;
  height: 30px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ums-radius-sm) !important;
  padding: 4px 10px !important;
}
div.dataTables_wrapper div.dataTables_info { color: var(--ums-ink-faint); font-size: 12px; }
.html5buttons { margin-bottom: 8px; }
.html5buttons .dt-button {
  background: var(--ums-surface) !important;
  border: 1px solid var(--ums-line-str) !important;
  border-radius: var(--ums-radius) !important;
  color: var(--ums-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
}
.html5buttons .dt-button:hover { background: #f7f9fb !important; border-color: #b8c4d0 !important; }

/* ---------------------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------------------- */
label,
.control-label {
  color: var(--ums-ink);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.form-control {
  height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--ums-line-str);
  border-radius: var(--ums-radius);
  box-shadow: none;
  color: var(--ums-ink);
  font-size: 13px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus {
  border-color: var(--ums-navy-600);
  box-shadow: var(--ums-focus);
}

.form-control::placeholder { color: #a9b6c2; }
textarea.form-control { height: auto; min-height: 68px; padding-top: 8px; }
select.form-control { padding-right: 26px; }
.form-group { margin-bottom: 15px; }

.input-group-addon {
  background: #f7f9fb;
  border: 1px solid var(--ums-line-str);
  border-radius: var(--ums-radius) 0 0 var(--ums-radius);
  color: var(--ums-ink-soft);
  padding: 6px 11px;
}

/* The required-field asterisks are inline-styled red in the markup; just make
   them less shouty. */
span[style*="color:red"], span[style*="color: red"] { color: var(--ums-danger) !important; font-weight: 600; }

/* ---------------------------------------------------------------------------
   8. Alerts
   --------------------------------------------------------------------------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--ums-radius);
  padding: 11px 15px;
  font-size: 13px;
  box-shadow: none;
}
.alert-success { background: #e9f7f2; border-color: #bfe6da; color: #12684f; }
.alert-warning { background: #fdf4e5; border-color: #f2ddb4; color: #8a5b12; }
.alert-danger  { background: #fdeceb; border-color: #f3c9c7; color: #97302c; }
.alert-info    { background: #eaf2f8; border-color: #c7dcea; color: #235a7c; }
.alert strong  { font-weight: 700; }
.alert a { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   9. Dashboard stat tiles

   currentlyembodied.php and the dashboard use .ibox-content > h5 + h1 as a KPI
   tile; give the number room to read as one.
   --------------------------------------------------------------------------- */
.ibox-content > h5:first-child + h1.no-margins,
.ibox-content > h5:first-child ~ h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ums-navy-800);
  margin: 4px 0 2px;
}
.ibox-content > h5:first-child {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ums-ink-faint);
  margin: 0;
}
h1.no-margins.text-danger { color: var(--ums-danger); }

/* ---------------------------------------------------------------------------
   10. Misc
   --------------------------------------------------------------------------- */
hr { border-top: 1px solid var(--ums-line); margin: 18px 0; }

/* Same negative-margin overflow as .page-heading, in two more INSPINIA
   components used as full-width bands (measured: mail-box-header on 17 pages,
   the leftover top navbar on 6). */
.mail-box-header,
.row.border-bottom > .navbar-static-top,
ul.navbar-top-links { margin-left: 0; margin-right: 0; }

.mail-box-header { padding: 14px 18px; border-bottom: 1px solid var(--ums-line); }

/* …but when it only wraps a .page-heading it is a plain container, and its
   padding + border stacked on the heading's own, pushing the heading and tab
   strip 15px lower on the 20 pages that nest it that way (all module landing
   pages). Tagged by Assets/js/ums-ui.js. Margins stay zeroed — that is the
   separate negative-margin overflow fix. */
.mail-box-header.ums-plain-wrap {
  padding: 0;
  border-top: none;      /* INSPINIA puts a 1px border-top here too */
  border-bottom: none;
}

/* …and the bare .row some of those wrappers sit in, whose -15px side margins
   pulled the heading left of the pages without the wrapper. */
.row.ums-plain-row {
  margin-left: 0;
  margin-right: 0;
}

/* Dashboard carousel: only constrain the images. Deliberately NOT
   `overflow-x: hidden` on .carousel — that element is a flex filmstrip whose
   slides sit off-canvas and translate in, so clipping it would break the
   transition. dashboard/index.css already gives .carousel-container
   `overflow: hidden`, which is the correct clipping boundary. */
img.carousel-background,
.carousel-slide img { max-width: 100%; }

/* Belt-and-braces against a content wrapper exceeding #main's content box —
   measured as a 3px right-edge overhang from an explicit width on .wrapper. */
#main > .wrapper,
#main > .wrapper-content,
#main > .row { max-width: 100%; }

::selection { background: rgba(58, 95, 125, .18); }

/* Keep long tables from forcing the page to scroll sideways. */
.table-responsive { border: none; }

/* Print views (leave_print.php, printmo.php, …) should stay plain paper. */
@media print {
  body { background: #fff; }
  .ibox, .page-heading { border: none; box-shadow: none; }
  nav#nav, .main-menu, .nav-tabs, .btn, .html5buttons { display: none !important; }
  #main { padding-left: 0 !important; }
}