/* =====================================================================
   CA Office Manager — Phase 2 Theme
   Blue + Green CA branding
===================================================================== */

:root {
  --ca-blue:        #0b4f8c;   /* primary deep blue */
  --ca-blue-dark:   #073a69;
  --ca-blue-light:  #dbe9f6;
  --ca-green:       #1f8b4c;   /* secondary CA green */
  --ca-green-dark:  #146636;
  --ca-green-light: #dff5e7;
  --ca-gold:        #d4a017;
  --ca-bg:          #f3f7fb;
  --ca-card:        #ffffff;
  --ca-text:        #1f2d3d;
  --ca-muted:       #6c7a8a;
  --ca-border:      #e2e8f0;
  --gradient-hero:  linear-gradient(135deg, var(--ca-blue) 0%, var(--ca-green) 100%);
  --gradient-soft:  linear-gradient(135deg, #f0f7ff 0%, #f0fbf4 100%);
}

/* ---- base ---- */
html, body { height: 100%; }
body { background: var(--ca-bg); color: var(--ca-text);
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

a { color: var(--ca-blue); }
a:hover { color: var(--ca-green-dark); }

/* ---- navbar ---- */
.navbar.bg-primary,
.navbar-ca {
  background: var(--gradient-hero) !important;
  box-shadow: 0 2px 10px rgba(11,79,140,.15);
  border-bottom: 3px solid var(--ca-green);
}
.navbar-ca .navbar-brand {
  font-weight: 800; letter-spacing: .3px;
  display: flex; align-items: center; gap: .5rem;
}
.navbar-ca .navbar-brand i { color: var(--ca-green-light); }
.navbar-ca .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; }
.navbar-ca .nav-link.active,
.navbar-ca .nav-link:hover { color: #fff !important; }
.navbar-ca .nav-link.active {
  background: rgba(255,255,255,.12); border-radius: 6px;
}
.navbar-ca .badge { font-weight: 600; }

.tagline {
  font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ca-green-light);
}

/* ---- cards ---- */
.card {
  border: 1px solid var(--ca-border);
  border-radius: .85rem;
  box-shadow: 0 2px 10px rgba(11,79,140,.05);
  background: var(--ca-card);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--ca-border);
  font-weight: 600;
  color: var(--ca-blue-dark);
}

/* ---- stat cards on dashboard ---- */
.stat-card {
  border: 0; border-radius: .85rem; overflow: hidden;
  background: var(--gradient-soft);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11,79,140,.12); }
.stat-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background: var(--ca-blue);
}
.stat-card .label {
  color: var(--ca-muted); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 600;
}
.stat-card .value {
  font-size: 1.75rem; font-weight: 800; color: var(--ca-blue-dark);
  line-height: 1.1;
}
.stat-card.green::before  { background: var(--ca-green); }
.stat-card.green .value   { color: var(--ca-green-dark); }
.stat-card.amber::before  { background: var(--ca-gold); }
.stat-card.amber .value   { color: #8a6700; }
.stat-card.red::before    { background: #c0392b; }
.stat-card.red .value     { color: #a02517; }

/* ---- buttons ---- */
.btn-primary {
  background: var(--ca-blue); border-color: var(--ca-blue);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ca-blue-dark); border-color: var(--ca-blue-dark);
}
.btn-success {
  background: var(--ca-green); border-color: var(--ca-green);
}
.btn-success:hover, .btn-success:focus {
  background: var(--ca-green-dark); border-color: var(--ca-green-dark);
}
.btn-soft-primary {
  background: var(--ca-blue-light); color: var(--ca-blue-dark);
  border: 1px solid #b9d3ee;
}
.btn-soft-primary:hover { background: #c8defa; color: var(--ca-blue-dark); }
.btn-soft-success {
  background: var(--ca-green-light); color: var(--ca-green-dark);
  border: 1px solid #b9e2c8;
}
.btn-soft-success:hover { background: #c5ecd1; color: var(--ca-green-dark); }

/* ---- tables ---- */
.table thead th {
  background: var(--ca-blue-light);
  color: var(--ca-blue-dark);
  font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 2px solid var(--ca-blue);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f7fafd;
}
.table-hover > tbody > tr:hover > * { background-color: #eef6fb; }

/* ---- badges ---- */
.badge { font-weight: 600; padding: .42em .65em; border-radius: 4px; }

/* workflow status badges */
.wf-Initiated         { background:#e3eaf3; color:#3a4b5e; }
.wf-Pending\ Partner  { background:#fff3cd; color:#856404; }
.wf-Pending\ Client   { background:#fce8d9; color:#8a4a17; }
.wf-Ready\ for\ File  { background:#cfe9d8; color:#1a5b34; }
.wf-Filed\/Completed  { background:#1f8b4c; color:#fff; }
.wf-Hold              { background:#6c757d; color:#fff; }
.wf-Not\ to\ File     { background:#495057; color:#fff; }

/* priority badges */
.pr-Low     { background:#e9ecef; color:#495057; }
.pr-Normal  { background:#d6e4f5; color:#274565; }
.pr-High    { background:#ffe4b5; color:#8a5a00; }
.pr-Urgent  { background:#dc3545; color:#fff; }

/* ---- forms ---- */
.form-label { font-weight: 600; color: var(--ca-blue-dark); font-size: .85rem; }
.required:after { content:" *"; color:#dc3545; }
.form-control:focus, .form-select:focus {
  border-color: var(--ca-blue);
  box-shadow: 0 0 0 .15rem rgba(11,79,140,.18);
}

/* ---- alerts ---- */
.alert-success { background: var(--ca-green-light); color: var(--ca-green-dark); border-color:#b9e2c8; }
.alert-info    { background: var(--ca-blue-light);  color: var(--ca-blue-dark);  border-color:#bcdaf1; }

/* ---- bell ---- */
.notif-bell .badge {
  position: absolute; top: 2px; right: 0;
  background: var(--ca-gold); color: #fff;
  font-size: .65rem; padding: .25em .4em;
}
.notif-bell .dropdown-menu {
  min-width: 320px; max-height: 420px; overflow-y: auto;
}
.notif-item.unread { background: #fffbe9; }

/* ---- footer ---- */
.app-footer {
  background: #fff; border-top: 1px solid var(--ca-border);
  padding: 1.25rem 0; margin-top: 3rem; text-align: center;
}
.app-footer .brand-line {
  font-weight: 700; color: var(--ca-blue-dark);
}
.app-footer .tag-line {
  font-size: .85rem; color: var(--ca-muted);
}
.app-footer .credit {
  font-size: .78rem; color: var(--ca-muted); margin-top: .25rem;
}
.app-footer .credit strong { color: var(--ca-green-dark); }

/* ---- DataTables tweaks ---- */
.dataTables_wrapper .dt-buttons { margin-bottom: .5rem; }
.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ca-border); border-radius: 4px; padding: 2px 8px;
}

/* ---- login page ---- */
.login-hero {
  background: var(--gradient-hero);
  min-height: 100vh; display: flex; align-items: center;
}
.login-card .brand { color: var(--ca-blue-dark); }
.login-card .tag-line { color: var(--ca-green-dark); font-weight: 500; }

/* ---- utility ---- */
.text-ca-blue  { color: var(--ca-blue-dark) !important; }
.text-ca-green { color: var(--ca-green-dark) !important; }
.bg-ca-soft    { background: var(--gradient-soft); }
.hover-shadow { transition: box-shadow .15s ease, transform .15s ease; }
.hover-shadow:hover { box-shadow: 0 6px 18px rgba(11,79,140,.12); transform: translateY(-1px); }

.section-pill {
  display:inline-block; padding:.2em .55em; margin:.1em;
  background: var(--ca-blue-light); color: var(--ca-blue-dark);
  border-radius: 999px; font-size:.72rem; font-weight:600;
}
.section-pill.acct { background: var(--ca-green-light); color: var(--ca-green-dark); }
.section-pill.aud  { background: #f0e7fb;             color: #5a2ea6; }
.section-pill.gst  { background: #fde9d8;             color: #8a4a17; }

@media (max-width: 768px) {
  .stat-card .value { font-size: 1.4rem; }
}

/* =====================================================================
   Compact tables — Phase 11
   Single-line rows for module list views. Cells truncate with ellipsis
   so text never wraps and breaks the row height.
===================================================================== */
.table.table-sm > :not(caption) > * > * {
  padding: .25rem .45rem;
  font-size: .82rem;
  line-height: 1.2;
  vertical-align: middle;
}
.table.table-sm td,
.table.table-sm th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.table.table-sm code,
.table.table-sm .badge { font-size: .72rem; }
.table.table-sm .btn-sm { padding: .12rem .35rem; font-size: .72rem; }
.table.table-sm small   { font-size: .68rem; color: #777; }
.table.table-sm td .form-select-sm,
.table.table-sm td .form-control-sm { padding: .12rem .35rem; height: auto; font-size: .75rem; min-width: 90px; }
.table.table-sm tr { height: 1.85em; }
.table.table-sm br { display: none; }   /* drop the optional <br> breaks so each row stays single-line */

/* DataTables — page-length and search inputs slightly smaller */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { font-size: .82rem; padding: .15rem .4rem; height: auto; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: .8rem; }

/* =====================================================================
   GLOBAL one-liner table rows  — Phase 14
   Applies to EVERY table used as a module list (the .table base class) so
   rows stay on one line regardless of cell content. Long text truncates
   with ellipsis. Hover the cell to see the full string via the browser's
   built-in title tooltip wherever the page bothered to set one.
   Opt-out: add class "wrap-ok" to a specific <table> or <td>.
===================================================================== */
table.table tbody td,
table.table tbody th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  vertical-align: middle;
}
table.table tbody td br,
table.table tbody th br { display: none; }
table.table tbody td .form-select-sm,
table.table tbody td .form-control-sm {
  min-width: 120px;
  padding: .12rem .35rem;
  height: auto;
  font-size: .75rem;
}
table.table tbody td .badge { white-space: nowrap; }

/* opt-out hooks */
table.table.wrap-ok tbody td,
table.table.wrap-ok tbody th,
table.table tbody td.wrap-ok,
table.table tbody th.wrap-ok {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
table.table.wrap-ok tbody td br,
table.table.wrap-ok tbody th br { display: inline; }