/* ===========================================================================
   FIPL — Apple skin, matched to FELICET Command.
   ---------------------------------------------------------------------------
   The brief: make the tracker look like the super-admin panel, which already
   runs an Apple-style theme (felicet-super-admin-panel/src/styles/theme.css).
   Every token below is copied from that file so the two apps are the same
   product, not two products that both happen to be greyish.

   Why a skin and not sixty page edits: all ~60 tracker pages are built from
   the same Alpino / Bootstrap 4 classes - .card, .btn, .form-line, .nav-tabs,
   .table, .badge, the sidebar. Overriding those restyles the whole app at
   once. No page component changed for this.

   Loaded LAST in index.html, after main.css and color_skins.css, so it wins.
   Alpino's files are vendor drops that get replaced wholesale - never edit
   them, put it here. Reverting is deleting one <link>.

   The one thing that is NOT copied: Command targets its own hand-written
   classes (.sb-item, .data-card, .tb-btn). Those do not exist here, so the
   same decisions are re-expressed against Alpino's classes instead.
   =========================================================================== */

:root {
  /* Straight from Command's theme.css - the apps' emerald, not Apple blue. */
  --accent: #047857;
  --accent-hover: #065f46;
  --accent-tint: rgba(4, 120, 87, .10);
  --accent-ring: rgba(4, 120, 87, .22);

  --canvas: #f5f5f7;
  --surface: #ffffff;

  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;

  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .08);
  --separator: rgba(60, 60, 67, .12);
  --hairline: rgba(0, 0, 0, .06);

  --red: #ff3b30;
  --green: #34c759;
  --orange: #ff9500;

  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
  --shadow-pop: 0 10px 40px rgba(0, 0, 0, .12);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
          'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ----------------------------------------------------------------- base -- */

html, body, #root {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, .content, section.content {
  background: var(--canvas) !important;
  color: var(--label);
  font-size: 13.5px;
}

body, p, td, th, label, input, select, textarea, button, a, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--label); font-weight: 600; letter-spacing: -.2px; }

/* The type ramp. This was missing: only colour and weight were restyled, so
   every heading kept Alpino's sizes, and an h5 at 22px is wider than the
   col-7 a dashboard stat card gives it - which is why "Present today" was
   rendering as "Prese nt today". The sizes below are the Apple/Command scale
   the rest of this file is built on. */
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 13.5px; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); text-decoration: none; }
.text-muted { color: var(--label-2) !important; }

/* Apple large title, as Command renders page headings. */
.block-header h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--label);
}
.breadcrumb { background: transparent; padding: 0; font-size: 12.5px; }
.breadcrumb li, .breadcrumb a, .breadcrumb .active { color: var(--label-3); }

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.card .header {
  border-bottom: 1px solid var(--separator);
  padding: 16px 20px;
}

.card .header h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--label);
  text-transform: none;
  margin: 0;
  line-height: 1.3;
}
.card .header h2 small { color: var(--label-3); font-size: 12px; display: block; margin-top: 3px; }
.card .body { padding: 18px 20px; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background .12s, opacity .12s;
}
.btn:active { opacity: .8; transform: none; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-ring) !important; }

.btn-primary, .theme-emerald .btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .theme-emerald .btn-primary:hover { background: var(--accent-hover); color: #fff; }

/* Command's "ghost": accent text on an accent tint, not a grey button. */
.btn-default, .btn-simple {
  background: var(--accent-tint);
  color: var(--accent);
}
.btn-default:hover, .btn-simple:hover { background: var(--accent-tint); color: var(--accent-hover); opacity: .85; }

.btn-danger { background: rgba(255, 59, 48, .10); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-success { background: var(--accent); color: #fff; }
.btn-warning { background: rgba(255, 149, 0, .12); color: #8a4b00; }

.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-icon-mini, .btn-round { border-radius: 999px; }

/* Alpino's "info" is a bright sky blue. Command's palette has no blue in it
   at all - one accent, greys, and red for danger - so info becomes the accent
   rather than a second, competing brand colour. Specificity is doubled
   (.btn.btn-info) because Alpino's own rule is already that specific. */
.btn.btn-info, .theme-emerald .btn.btn-info { background: var(--accent); color: #fff; }
.btn.btn-info:hover { background: var(--accent-hover); color: #fff; }

/* --------------------------------------------------------------- inputs --
   Command uses a filled grey field with no border that turns white with an
   accent ring on focus. Alpino draws an animated underline instead, so the
   underline is removed first. */

.form-line { border-bottom: none !important; padding-bottom: 0; }
.form-line::after, .form-line::before, .form-line.focused::after { display: none !important; }

.form-control, .form-line .form-control {
  height: 36px;
  background: var(--fill);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--label);
  font-size: 13.5px;
  padding: 0 12px;
  box-shadow: none;
  transition: background .12s, box-shadow .12s;
}
textarea.form-control { height: auto; padding: 10px 12px; line-height: 1.5; }

.form-control:focus {
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border: 0;
}
.form-control::placeholder { color: var(--label-3); }

label, .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--label-3);
  letter-spacing: 0;
  margin-bottom: 5px;
  text-transform: none;
}

select.form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2386868B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}

/* ------------------------------------------------------ tabs → segments -- */

.nav-tabs {
  border-bottom: none;
  background: var(--fill);
  border-radius: 10px;
  padding: 2px;
  display: inline-flex;
  gap: 2px;
}
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--label-2);
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--label); }
.nav-tabs .nav-link.active, .theme-emerald .nav-tabs .nav-link.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .04);
}

/* --------------------------------------------------------------- tables -- */

.table { color: var(--label); font-size: 13.5px; margin-bottom: 0; }
.table thead th {
  background: transparent;
  color: var(--label-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-bottom: 1px solid var(--separator);
  padding: 10px 16px;
}
.table tbody td {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--label);
  padding: 12px 16px;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }

/* No vertical rules. An Apple list separates rows and never columns - the
   grid Alpino draws with .table-bordered makes a spreadsheet, not a list.

   The visible "columns" were not borders at all: Alpino sets
   border-collapse:separate with 2px border-spacing, so the gaps between cells
   showed the row tint through as pale vertical stripes. Collapsing the table
   is what actually removes them; zeroing the borders alone did nothing. */
.table, .table.table-bordered {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 0 !important;
}
.table td, .table th,
.table-bordered td, .table-bordered th {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}
.table tbody td, .table-bordered tbody td {
  border-bottom: 1px solid var(--hairline) !important;
}
.table thead th, .table-bordered thead th {
  border-bottom: 1px solid var(--separator) !important;
}

/* Zebra striping fights the hairlines; Apple uses one surface and a hover. */
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr:hover td, .table-hover tbody tr:hover { background: rgba(0, 0, 0, .025); }
.table tfoot td { border-top: 1px solid var(--separator); font-weight: 600; }
.dataTables_paginate, .dt-pagination { border-top: 1px solid var(--separator); }

/* --------------------------------------------------------------- badges -- */

.badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  padding: 3px 9px;
  text-transform: none;
  letter-spacing: 0;
}
.badge-primary { background: var(--accent-tint); color: var(--accent); }
.badge-success { background: rgba(52, 199, 89, .14); color: #1c6b31; }
.badge-danger  { background: rgba(255, 59, 48, .10); color: var(--red); }
.badge-warning { background: rgba(255, 149, 0, .14); color: #8a4b00; }
.badge-info    { background: rgba(0, 122, 255, .10); color: #0a4ea3; }
.badge-default { background: var(--fill); color: var(--label-2); }

/* -------------------------------------------------------------- sidebar --
   Command's sidebar: frosted light glass, section titles in grey sentence
   case, and the selected row TINTED (accent text on accent wash) rather than
   a solid filled bar. */

#leftsidebar, .sidebar {
  background: rgba(246, 246, 248, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--separator);
  box-shadow: none;
}

.sidebar .menu .list a {
  color: var(--label);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  margin: 1px 10px;
  padding: 6px 10px;
  transition: background .12s;
}
.sidebar .menu .list a i { color: var(--label-2); }
.sidebar .menu .list a:hover { background: var(--fill-2); color: var(--label); }

.sidebar .menu .list li.active > a,
.theme-emerald .sidebar .menu .list li.active > a {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
  border: 0;
}
.sidebar .menu .list li.active > a i { color: var(--accent); }

.sidebar .menu .list .header {
  color: var(--label-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;       /* Command does not shout section titles */
  padding: 16px 20px 5px;
  background: transparent;
}

.sidebar .user-info { background: transparent; padding: 20px 18px 14px; border-bottom: 0; }
.sidebar .user-info .info-container .name { color: var(--label); font-weight: 600; font-size: 15px; letter-spacing: -.2px; }
.sidebar .user-info .info-container .email { color: var(--label-3); font-size: 11px; font-weight: 500; }

/* ------------------------------------------------- the mini icon rail ----
   Alpino paints #minileftbar with the skin colour, which left a solid emerald
   stripe down an otherwise grey window. Command has no such bar; the closest
   equivalent is the same frosted material as the sidebar. */

#minileftbar, .minileftbar, .theme-emerald #minileftbar {
  background: rgba(246, 246, 248, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--separator);
}
#minileftbar a, #minileftbar i, #minileftbar .nav > li > a { color: var(--label-2) !important; }
#minileftbar a:hover, #minileftbar a:hover i { color: var(--label) !important; }
#minileftbar .nav > li > a { border-radius: 8px; margin: 2px 7px; transition: background .12s; }
#minileftbar .nav > li > a:hover { background: var(--fill-2); }
#minileftbar .nav > li.active > a { background: var(--accent-tint); }
#minileftbar .nav > li.active > a i { color: var(--accent) !important; }

/* Command's logo tile: emerald gradient, rounded, soft inner highlight. */
#minileftbar .navbar-brand, #minileftbar .logo, .navbar-brand .logo {
  background: linear-gradient(160deg, #10b981, var(--accent)) !important;
  border-radius: 9px;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------- navbar -- */

.navbar, .navbar.navbar-fixed-top {
  height: 52px;
  min-height: 52px;
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
  box-shadow: none;
}
.navbar-brand, .navbar .nav > li > a { color: var(--label) !important; font-weight: 600; }
.navbar .nav > li > a:hover { background: var(--fill-2); border-radius: 8px; }

/* --------------------------------------------------------------- modals -- */

.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-header { border-bottom: 1px solid var(--separator); padding: 16px 20px; }
.modal-header .modal-title, .modal-header h4 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.modal-body { padding: 18px 20px; }
.modal-footer { border-top: 1px solid var(--separator); padding: 12px 20px; }
.modal-backdrop.show { opacity: .28; }

/* --------------------------------------------------------------- alerts -- */

/* Alpino fills alerts with saturated colour and white text. Apple tints the
   background and keeps the text dark, so an explanation does not read as an
   emergency. Doubled specificity for the same reason as .btn-info above. */
.alert { border: 0; border-radius: var(--radius); font-size: 13.5px; padding: 12px 15px; }
.alert.alert-warning { background: rgba(255, 149, 0, .12); color: #8a4b00; }
.alert.alert-danger  { background: rgba(255, 59, 48, .10); color: #a3271d; }
.alert.alert-success { background: var(--accent-tint); color: var(--accent); }
.alert.alert-info    { background: var(--accent-tint); color: var(--accent); }
.alert a, .alert .alert-link { color: inherit; text-decoration: underline; }

/* ----------------------------------------------------------- scrollbars -- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .28); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ Mail page -- */

.ap-mail-row.is-on { background: var(--accent-tint) !important; }
.ap-mail-row.is-on strong, .ap-mail-row.is-on .ap-subject { color: var(--accent) !important; }
.ap-mail-row:not(.is-on):hover { background: var(--fill-2); }
.ap-unread-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); display: inline-block; flex: 0 0 8px; }