/*!
 * Sadim — Application theme
 * Brings the Claude-designed landing page look & feel to the app's HTML screens.
 * Loaded AFTER bootstrap-cerulean.css / ar_changes.css so it overrides them.
 * Does NOT affect PDF output (application/views/doc_pdf/* keep their own styles).
 */

:root {
  --ink:        #0a1f33;
  --ink-2:      #365168;
  --ink-3:      #6a8198;
  --line:       #e5ecf2;
  --line-2:     #eef3f7;
  --bg:         #ffffff;
  --bg-soft:    #f6f9fc;
  --bg-mist:    #eef5fb;
  --water:      #0c7cff;
  --water-deep: #0a3a86;
  --water-dark: #072452;
  --water-tint: #dbe9fb;
  --drop:       #1aa7ff;
  --ok:         #0c8a4f;
  --ok-bg:      #e6f7ef;
  --warn:       #9a5a08;
  --warn-bg:    #fff1de;
  --bad:        #b32424;
  --bad-bg:     #fde7e7;
  --radius:     14px;
  --radius-sm:  10px;
}

/* ───────── BASE ───────── */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
}

a { color: var(--water-deep); }
a:hover { color: var(--water); }

/* numeric values keep a clean monospace, like the landing page ledger */
.numberFormat,
input[type="date"], input[type="number"],
td[dir="ltr"], .num, .mono,
.dataTables_length select {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-feature-settings: "tnum";
}

/* ───────── HEADINGS ───────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
  text-rendering: optimizeLegibility;
}

/* ───────── TOP HEADER BAR (#head) ───────── */
#head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 32px;
  margin: 0 0 6px;
  text-align: center;
}
#head h2 {
  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
#head h2:first-of-type { color: var(--water-deep); }
#head a img,
#head img {
  width: 34px !important;
  height: auto;
  display: block;
}

/* ───────── PAGE WRAP ───────── */
#page-wrap {
  width: 92%;
  max-width: 1240px;
  margin: 8px auto 48px;
  padding: 0 8px;
}

/* ───────── MENU BUTTON + BIG MENU ───────── */
#visMenu {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 11px 22px !important;
  margin: 8px 0 !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#visMenu:hover {
  background: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(10,31,51,.5);
}

#big_menu_presentation {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 60px -30px rgba(10,31,51,.18),
              0 12px 30px -18px rgba(10,31,51,.10) !important;
  padding: 24px 18px !important;
}
#big_menu_presentation a.button {
  border-radius: var(--radius) !important;
  border: 1px solid transparent !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 6px !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
#big_menu_presentation a.button:hover {
  border: 1px solid var(--line) !important;
  background: var(--bg-soft) !important;
  transform: translateY(-2px);
}
#big_menu_presentation a.button img,
#big_menu_presentation .cercle,
.cercle {
  border: 1px solid var(--line) !important;
  background: var(--bg-mist) !important;
  border-radius: 50% !important;
  transition: opacity .15s ease;
}

/* ───────── BREADCRUMB ───────── */
.breadcrumb {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 2px;
  margin: 4px 0 14px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.breadcrumb > li { text-shadow: none; }
.breadcrumb a { color: var(--ink-3); font-weight: 500; }
.breadcrumb a:hover { color: var(--water-deep); }
.breadcrumb .divider { color: var(--line); }
.breadcrumb > .active { color: var(--ink); }

/* ───────── BOX / CARD ───────── */
.box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 0 #fff inset,
              0 30px 60px -40px rgba(10,31,51,.20),
              0 12px 30px -22px rgba(10,31,51,.10);
  overflow: hidden;
}
.box .box-header,
.box .box-header.well {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 22px;
  margin: 0;
}
.box .box-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  text-shadow: none;
}
.box .box-header h2 i {
  color: var(--water-deep);
  margin-inline-end: 6px;
}
.box .box-content {
  padding: 22px;
  background: #fff;
}
.box .box-content.alerts:empty { padding: 0; }

/* ───────── BUTTONS ───────── */
.btn {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 9px 16px;
  background-image: none;
  background-color: var(--bg-soft);
  color: var(--ink);
  text-shadow: none;
  box-shadow: none;
  filter: none;
  transition: background .15s ease, color .15s ease,
              border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  background-image: none;
  background-color: var(--line-2);
  color: var(--ink);
  transform: translateY(-1px);
}
.btn:focus { outline: none; }
.btn.btn-small,
.btn-small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.btn-mini,
.btn-mini { padding: 3px 7px; font-size: 11.5px; border-radius: 6px; line-height: 1.2; }
.btn.btn-large { padding: 13px 24px; font-size: 16px; }
.btn [class^="icon-"] { margin-inline-end: 5px; }

/* Compact row-action buttons in list tables — edit / delete / print / mark-paid
   etc. Keep them tight so a row with 4–5 actions doesn't dominate the row. */
.table td .btn,
#newspaper-a td .btn,
.table tbody td a.btn,
.table tbody td button.btn {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 7px;
  margin: 1px;
}
.table td .btn [class^="icon-"],
.table td .btn [class*=" icon-"] { margin: 0; }
.table td.center, .table tbody td.center { padding: 6px 8px; white-space: nowrap; }

/* All coloured variants are SOLID with white text + white icons, so the
   Bootstrap white sprite icons (icon-white) stay visible. */
.btn-primary,
.btn-primary:active,
.btn-primary[disabled] {
  background-color: var(--ink);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #000;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(10,31,51,.5);
}

.btn-success,
.btn-success:active,
.btn-success[disabled] {
  background-color: var(--ok);
  color: #fff;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #0a7443;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(12,138,79,.55);
}

.btn-info,
.btn-info:active,
.btn-info[disabled] {
  background-color: var(--water);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--water-deep);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(12,124,255,.55);
}

.btn-danger,
.btn-danger:active,
.btn-danger[disabled] {
  background-color: var(--bad);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #8e1c1c;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(179,36,36,.5);
}

.btn-warning,
.btn-warning:active,
.btn-warning[disabled] {
  background-color: #c4781a;
  color: #fff;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #a5640f;
  color: #fff;
}

.btn-inverse,
.btn-dark {
  background-color: var(--ink);
  color: #fff;
}
.btn-inverse:hover,
.btn-dark:hover {
  background-color: #000;
  color: #fff;
}

/* keep text/icons white on every coloured variant, even when nested */
.btn-primary, .btn-primary *,
.btn-success, .btn-success *,
.btn-info, .btn-info *,
.btn-danger, .btn-danger *,
.btn-warning, .btn-warning *,
.btn-inverse, .btn-inverse * { color: #fff; }

/* Disabled action buttons (server-enforced guards — e.g. a frais row whose
   مخالصة is already paid). Rendered as <span class="btn ... disabled"> so the
   native title="" tooltip on hover still informs the user why it's locked. */
.btn.disabled,
.btn[disabled],
a.btn.disabled,
span.btn.disabled {
  background-color: var(--line-2) !important;
  color: var(--ink-3) !important;
  border-color: var(--line) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
  opacity: .55;
  text-decoration: none;
}
.btn.disabled *,
.btn[disabled] * { color: var(--ink-3) !important; }
.btn.disabled:hover,
.btn[disabled]:hover {
  background-color: var(--line-2) !important;
  color: var(--ink-3) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* the "addNew" inline button inside box headers */
.box-header h2 .addNew {
  float: left;
  font-size: 13px;
}

/* legacy inline print buttons */
a.toPrint {
  border-radius: var(--radius-sm) !important;
  background-color: var(--bg-mist) !important;
  color: var(--water-deep) !important;
  border: 1px solid #cfe2f7 !important;
}
a.toPrint:hover, a.toPrint:active, a.toPrint:visited {
  background-color: var(--water) !important;
  color: #fff !important;
}

/* ───────── TABLES ───────── */
.table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14px;
}
.table th,
.table thead th,
#newspaper-a th {
  background: var(--bg-soft);
  color: var(--ink-3);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .01em;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: middle;
}
.table th a,
#newspaper-a th a { color: var(--ink-3); }
.table th a:hover { color: var(--water-deep); }
.table td,
#newspaper-a td {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 11px 14px;
  color: var(--ink-2);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table.table-striped tbody tr.odd td,
.table.table-striped tbody tr:nth-child(odd) td { background: #fff; }
.table.table-striped tbody tr.even td,
.table.table-striped tbody tr:nth-child(even) td { background: var(--bg-soft); }
.table.table-bordered { border-radius: var(--radius); }
.table tbody tr:hover td,
#newspaper-a tbody tr:hover td { background: var(--bg-mist) !important; }
.table .center, .table td.center { text-align: center; }

/* unpaid-customer highlight rows */
.khallass td, .khallass {
  background-color: var(--bad-bg) !important;
  color: var(--bad);
}

/* Compteurs filter cards: "replaced" and "removed" meters keep their gray /
   black highlight from ar_changes.css. The striped-row rules above would
   otherwise repaint them white. */
.table-striped tbody tr.remplaced td,
.table.table-striped tbody tr.remplaced td {
  background: #cdd3d9 !important;
  color: var(--ink) !important;
}
.table-striped tbody tr.manzoueTr td,
.table.table-striped tbody tr.manzoueTr td {
  background: var(--ink) !important;
  color: #fff !important;
}
.table-striped tbody tr.remplaced a,
.table-striped tbody tr.manzoueTr a {
  color: inherit !important;
  font-weight: 500;
}
/* Hover should not wash out the highlight on those filter cards. */
.table-striped tbody tr.remplaced:hover td { background: #bcc3ca !important; }
.table-striped tbody tr.manzoueTr:hover td { background: #000 !important; }
/* The 151px-wide single-row "buttons" in compteurs/lister are cramped,
   give the text room and stop the wrap that makes them look broken. */
.table-striped tbody tr.remplaced td,
.table-striped tbody tr.manzoueTr td,
.table-striped tbody tr td:only-child > a {
  text-align: center;
  white-space: nowrap;
  padding: 10px 12px;
}

/* ───────── DATATABLES CONTROLS ───────── */
.dataTables_wrapper { padding: 0; }
.dataTables_length select,
.golablSearch input,
.dataTables_filter input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: var(--ink);
}
.dataTables_length label,
.dataTables_filter label { color: var(--ink-2); font-size: 13.5px; }

/* ───────── FORMS ───────── */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="search"], textarea, select,
.uneditable-input {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 8px 11px;
  height: auto;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Native <select> needs less inner padding and a sane height — Bootstrap's
   28px height + our padding was clipping the selected option text to a sliver. */
select {
  padding: 6px 28px 6px 12px;
  height: 38px;
  appearance: auto;
}
textarea { min-height: 90px; line-height: 1.55; }
input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--water);
  box-shadow: 0 0 0 3px rgba(12,124,255,.14);
}
.control-label {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
}
.form-horizontal .control-group { margin-bottom: 16px; }
.control-group.error input,
.control-group.error textarea,
.control-group.error select { border-color: var(--bad); }
legend {
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 10px;
}
.form-actions {
  background: var(--bg-soft);
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ───────── ALERTS ───────── */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  text-shadow: none;
  padding: 12px 16px;
}
.alert-success {
  background: var(--ok-bg);
  border-color: #bce8d1;
  color: var(--ok);
}
.alert-info {
  background: var(--bg-mist);
  border-color: #cfe2f7;
  color: var(--water-deep);
}
.alert-error, .alert-danger {
  background: var(--bad-bg);
  border-color: #f3cccc;
  color: var(--bad);
}
.alert-warning {
  background: var(--warn-bg);
  border-color: #f3dcb3;
  color: var(--warn);
}

/* ───────── PAGINATION ───────── */
.pagination ul {
  box-shadow: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.pagination ul > li > a,
.pagination ul > li > span {
  background: #fff;
  color: var(--ink-2);
  border-color: var(--line);
  font-size: 14px;
}
.pagination ul > li > a:hover { background: var(--bg-soft); color: var(--water-deep); }
.pagination ul > .active > a,
.pagination ul > .active > span {
  background: var(--water);
  color: #fff;
  border-color: var(--water);
}

/* ───────── WELL ───────── */
.well {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* ───────── LOGIN PAGE ───────── */
/* Logo is fluid: never below 96px on small viewports, never above the
   155px the view originally requested. */
.login-header img { width: clamp(96px, 18vw, 160px) !important; height: auto; }
.login-box.well {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(10,31,51,.20),
              0 12px 30px -22px rgba(10,31,51,.10);
  padding: 32px;
}
.login-box .input-prepend { display: flex; }
.login-box .input-prepend .add-on {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.login-box .input-prepend input { flex: 1; }
.login-box .btn-primary { width: 100%; padding: 12px 18px; font-size: 15px; }

/* ───────── MISC ───────── */
hr { border-top-color: var(--line); }
.label, .badge { font-weight: 500; }
::selection { background: var(--water-tint); color: var(--ink); }