/* JAPTA CRM design layer on top of Bootstrap 5 (LTR and RTL builds). Keep component styles here, not inline. */
:root {
  --app-brand: #12355b;
  --app-brand-accent: #1f6fb2;
  --app-surface: #f5f7fa;
  --app-border: #dfe4ea;
  --app-muted: #5b6573; /* 6.1:1 on white: readable secondary text */
  --app-radius: .5rem;
  --bs-body-font-size: 1rem;
  --bs-secondary-color: var(--app-muted);
}

/* Type scale: 15px body on phones, 16px from tablets up; headings 24–28px. */
html {
  font-size: 15px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: var(--app-surface);
  line-height: 1.55;
}

/* Arabic text reads better with a font that ships good Arabic glyphs; all are system fonts (no CDN). */
html[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  line-height: 1.7;
}

/* "small" stays legible (never below ~13px). */
.small, small {
  font-size: .875em;
}

.app-navbar {
  background-color: var(--app-brand);
}

/* Many modules: keep the bar to one row on common laptop widths (1366px) without shrinking text below ~15px. */
.app-navbar .nav-link {
  padding-inline: .5rem;
  font-size: .95rem;
}

@media (min-width: 1200px) {
  .app-navbar .navbar-brand {
    margin-inline-end: .75rem;
  }

  /* The greeting shows the e-mail; long addresses are shortened (full text in the tooltip). */
  .app-navbar .user-greeting {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-navbar .navbar-search {
    width: 9rem;
  }
}

/* Values written in the other script keep their own direction but line up with the label column. */
html[dir="ltr"] dd[dir="rtl"], html[dir="ltr"] td[dir="rtl"] {
  text-align: left;
}

html[dir="rtl"] dd[dir="ltr"], html[dir="rtl"] td[dir="ltr"] {
  text-align: right;
}

/* Wider work area on large screens, comfortable gutters on small ones. */
.app-main {
  max-width: 1440px;
  margin-inline: auto;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: .75rem;
  overflow-wrap: anywhere;
}

@media (min-width: 992px) {
  .page-title {
    font-size: 1.75rem;
  }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
}

.page-header .page-title {
  margin-bottom: .25rem;
}

/* Older pages use h1.h3; give them the same size as .page-title. */
main h1.h3 {
  font-size: 1.6rem;
  font-weight: 600;
}

.card {
  border-color: var(--app-border);
  border-radius: var(--app-radius);
}

.card-header {
  background-color: #fff;
  border-bottom-color: var(--app-border);
  font-weight: 600;
}

/* Forms: grouped sections, clear labels, required markers, actions that stay reachable. */
.form-section {
  margin-bottom: 1rem;
}

.form-section > legend.card-header {
  float: none;
  width: 100%;
  font-size: 1rem;
  margin-bottom: 0;
  padding: .75rem 1rem;
}

.form-label {
  font-weight: 500;
  margin-bottom: .3rem;
}

.form-label.required::after {
  content: " *";
  color: #b02a37;
}

.form-hint-required {
  font-size: .875rem;
  color: var(--app-muted);
}

.form-hint-required::before {
  content: "* ";
  color: #b02a37;
}

.form-text {
  color: var(--app-muted);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 0;
  margin-top: .5rem;
}

.text-danger.small:not(:empty) {
  display: block;
  margin-top: .2rem;
}

.btn-primary {
  --bs-btn-bg: var(--app-brand-accent);
  --bs-btn-border-color: var(--app-brand-accent);
  --bs-btn-hover-bg: var(--app-brand);
  --bs-btn-hover-border-color: var(--app-brand);
}

.border-dashed {
  border-style: dashed;
}

/* Visible keyboard focus everywhere (mouse clicks keep the Bootstrap look). */
:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Validation summaries are rendered empty for client-side validation; hide them until they hold an error. */
.validation-summary-valid {
  display: none;
}

/* Tables: readable rows; wide tables scroll inside .table-responsive instead of squeezing columns. */
.table {
  --bs-table-bg: #fff;
}

.table > thead th {
  font-size: .875rem;
  font-weight: 600;
  color: var(--app-muted);
  white-space: nowrap;
  background-color: #f8f9fb;
}

.table td, .table th {
  padding-block: .6rem;
}

.table-responsive {
  border-radius: var(--app-radius);
}

.filter-bar .form-label {
  font-size: .875rem;
}

/* KPI cards (dashboards). A KPI that is a link is a whole clickable card. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .75rem;
}

.kpi {
  display: block;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: .8rem 1rem;
  color: inherit;
  text-decoration: none;
}

a.kpi:hover {
  border-color: var(--app-brand-accent);
  box-shadow: 0 1px 4px rgba(18, 53, 91, .12);
}

.kpi-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
}

.kpi-label {
  font-size: .875rem;
  color: var(--app-muted);
}

.kpi-sm .kpi-value {
  font-size: 1.3rem;
}

/* Contract lifecycle colours (badge text keeps 4.5:1 contrast). */
.badge.lifecycle-draft { background-color: #e2e6ea; color: #343a40; }
.badge.lifecycle-active { background-color: #198754; color: #fff; }
.badge.lifecycle-expired { background-color: #ffc107; color: #3d2e00; }
.badge.lifecycle-terminated { background-color: #b02a37; color: #fff; }
.badge.lifecycle-cancelled { background-color: #6c757d; color: #fff; }
.lifecycle-border-draft { border-inline-start: 4px solid #adb5bd; }
.lifecycle-border-active { border-inline-start: 4px solid #198754; }
.lifecycle-border-expired { border-inline-start: 4px solid #ffc107; }
.lifecycle-border-terminated { border-inline-start: 4px solid #b02a37; }
.lifecycle-border-cancelled { border-inline-start: 4px solid #6c757d; }

/* Logos: never stretched or cropped (object-fit: contain inside a fixed box). */
.logo-img {
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: .35rem;
  padding: 2px;
}

.logo-xs { width: 1.75rem; height: 1.75rem; }
.logo-sm { width: 3rem; height: 2.5rem; }
.logo-md { width: 5rem; height: 4rem; }
.logo-lg { width: 7rem; height: 5.5rem; }

.logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--app-brand);
  color: #fff;
  font-weight: 600;
  border-radius: .35rem;
  text-transform: uppercase;
}

.logo-fallback.logo-xs { font-size: .7rem; }
.logo-fallback.logo-lg { font-size: 1.8rem; }

.company-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Profile tabs wrap on narrow screens instead of overflowing. */
.profile-tabs {
  flex-wrap: wrap;
}

.profile-tabs .nav-link {
  font-weight: 500;
}

.tab-content > .tab-pane {
  padding-top: .25rem;
}

dl.row dt {
  font-weight: 500;
  color: var(--app-muted);
}

/* Long words (e-mails, references) wrap rather than overflow on phones. */
td, dd, .list-group-item {
  overflow-wrap: anywhere;
}