/* ===== Rubik Infotech theme: Dark Blue + White ===== */
:root {
  --brand: #2e3295;        /* navy blue, sampled from the Rubik logo */
  --brand-dark: #1f2268;   /* hover / active shade */
  --brand-light: #eceefb;  /* pale tint for subtle backgrounds */
}

body { background:#ffffff; color:#1f2430; }

/* Navbar */
.app-navbar { background-color: var(--brand) !important; }
.app-navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color:#fff !important; }
.app-navbar .dropdown-menu { border-radius: 8px; }
.app-navbar .dropdown-item:active { background-color: var(--brand); }
.app-logo { height: 40px; width: auto; }

/* Login screen */
.app-login-bg {
  background: linear-gradient(180deg, var(--brand-light) 0%, #ffffff 60%);
}

/* Cards */
.card { border-radius: 10px; border-color:#e3e6f5; box-shadow: 0 1px 4px rgba(46,50,149,0.06); }
.bg-light { background-color: var(--brand-light) !important; }

/* Buttons: brand navy as primary */
.btn-primary {
  background-color: var(--brand); border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--brand-dark) !important; border-color: var(--brand-dark) !important;
}
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background-color: var(--brand); border-color: var(--brand); }
.btn-link { color: var(--brand); }

/* Links & headings */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4, h5, h6 { color: #1c2150; }

/* Badges: keep status colors semantic, but tint the neutral ones navy */
.badge.bg-primary { background-color: var(--brand) !important; }
.badge.bg-secondary { background-color: #5a5f8a !important; }

/* Table & form accents */
.table thead th { color:#1c2150; border-bottom: 2px solid var(--brand-light); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 0.2rem rgba(46,50,149,0.15);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* Domain-specific helpers */
.savings-positive { color:#0f7a3d; font-weight:600; }
.savings-negative { color:#c0392b; font-weight:600; }
table.quotes-table th, table.quotes-table td { vertical-align: middle; }
.badge { font-weight: 500; }

/* Product-level "last negotiated" reference line on the negotiation screen */
.last-negotiated { background: var(--brand-light); border-left: 3px solid var(--brand); padding: 6px 10px; border-radius: 4px; font-size: .875rem; }

/* Row action buttons in master tables */
.row-actions { min-width: 120px; }
.row-actions .btn { margin: 2px 0 2px 2px; }
.row-actions form { display: inline; }
tr.row-inactive td { color: #8a8fb0; }
tr.row-editing td { background: var(--brand-light); }
table.quotes-table { font-size: .9rem; }

/* =====================================================================
   APP LAYER (v2) — shared look with the other Rubik portals.
   Desktop keeps the top navbar; phones get an app layout.
   ===================================================================== */
:root { --accent:#F58220; --line:#E3E6F1; --bottom-h:64px; --safe-b:env(safe-area-inset-bottom,0px);
  --bs-body-font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
body { background:#F4F6FB; font-family:var(--bs-body-font-family); }
body.has-nav .container { background:transparent; }
.app-navbar { box-shadow:0 2px 12px rgba(31,34,104,.18); }
.app-navbar .nav-link { border-radius:8px; font-weight:500; }
.app-navbar .nav-link:hover { background:rgba(255,255,255,.08); }
.card { border-radius:14px; border-color:var(--line); box-shadow:0 1px 2px rgba(21,25,53,.05),0 6px 16px rgba(21,25,53,.04); }
.card-header { background:#fff; border-bottom-color:#EEF0F7; font-weight:700; }
.table { --bs-table-bg:#fff; }
.table thead th { font-size:.8rem; font-weight:700; color:#5D6382; background:#F8F9FC; border-bottom:1px solid var(--line); white-space:nowrap; }
.btn { border-radius:10px; font-weight:600; }
.form-control,.form-select { border-radius:10px; border-color:#CDD2E3; }
.alert { border-radius:12px; }
.menu-btn,.mobile-user,.sidenav,.drawer-scrim,.bottom-nav { display:none; }
.app-login-bg { background:radial-gradient(900px 500px at 0% 0%,#E3E5FA 0%,transparent 60%),radial-gradient(700px 400px at 100% 100%,#FFE7D1 0%,transparent 55%),#F4F6FB; }
.app-login-bg .card { border-radius:22px; box-shadow:0 20px 50px rgba(21,25,53,.12)!important; border:0; }
.btn-sso { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:48px; border-radius:12px; background:var(--accent);
  color:#fff; font-weight:700; text-decoration:none; box-shadow:0 8px 18px rgba(245,130,32,.3); }
.btn-sso:hover { background:#DE6E0E; color:#fff; }
.sso-or { display:flex; align-items:center; gap:.75rem; margin:1rem 0; color:#9399B5; font-size:.85rem; }
.sso-or::before,.sso-or::after { content:""; flex:1; height:1px; background:var(--line); }

@media (max-width:991.98px) {
  /* replace the collapsing navbar with the slide-in menu */
  .app-navbar { margin-bottom:1rem!important; position:sticky; top:0; z-index:1020; padding:.4rem 0; }
  .app-navbar .navbar-toggler,.app-navbar .navbar-collapse { display:none!important; }
  .app-navbar .container-fluid { flex-wrap:nowrap; gap:.6rem; }
  .menu-btn { display:inline-flex; order:-1; width:42px; height:42px; align-items:center; justify-content:center; border-radius:12px;
    border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:1.35rem; }
  .app-logo { height:34px; background:#fff; border-radius:8px; padding:3px 6px; }
  .navbar-brand { margin-right:auto; }
  .mobile-user { display:inline-flex; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--brand); font-weight:800; align-items:center; justify-content:center; }
  .sidenav { display:flex; flex-direction:column; gap:2px; position:fixed; top:0; left:0; bottom:0; z-index:1050; width:min(300px,86vw); background:#fff; padding:0 .75rem 1rem;
    overflow-y:auto; transform:translateX(-105%); transition:transform .25s ease; box-shadow:0 20px 50px rgba(21,25,53,.25); }
  body.drawer-open .sidenav { transform:none; }
  .drawer-scrim { display:block; position:fixed; inset:0; z-index:1040; background:rgba(15,18,45,.45); opacity:0; pointer-events:none; transition:opacity .25s; }
  body.drawer-open .drawer-scrim { opacity:1; pointer-events:auto; }
  body.drawer-open { overflow:hidden; }
  .drawer-head { display:flex; align-items:center; gap:.75rem; padding:1.1rem 1rem 1rem 1.15rem; margin:0 -.75rem .75rem; border-bottom:1px solid var(--line); }
  .avatar { width:42px; height:42px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .who-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; } .who-text small { color:#5D6382; }
  .drawer-close { margin-left:auto; width:36px; height:36px; border-radius:50%; border:0; background:#F1F3F9; font-size:1.4rem; line-height:1; color:#5D6382; }
  .sidenav a { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:12px; color:#4A5070; font-weight:600; text-decoration:none; }
  .sidenav a i { font-size:1.15rem; width:22px; text-align:center; }
  .sidenav a:hover { background:#F4F6FB; }
  .sidenav a[aria-current] { background:var(--brand); color:#fff; box-shadow:0 6px 14px rgba(46,50,149,.22); }
  .drawer-foot { margin-top:auto; padding-top:1rem; }
  .sidenav .drawer-logout { justify-content:center; border:1px solid var(--line); color:#c0392b; }
}

@media (max-width:767.98px) {
  body.has-nav { padding-bottom:calc(var(--bottom-h) + var(--safe-b)); }
  .container { padding-left:.85rem; padding-right:.85rem; }
  h1,.h1 { font-size:1.4rem; } h2,.h2 { font-size:1.25rem; } h3,.h3 { font-size:1.1rem; }
  .d-flex.justify-content-between.align-items-center { flex-wrap:wrap; gap:.5rem; }
  .form-control,.form-select { min-height:48px; font-size:16px; }
  textarea.form-control { min-height:96px; }
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }
  .btn-sm { min-height:38px; }
  .card-body { padding:1rem; }

  /* tables become cards (column names added by ui.js) */
  .table-responsive { overflow:visible; }
  .table:not(.keep-table), .table:not(.keep-table) tbody, .table:not(.keep-table) td { display:block; width:100%; }
  .table:not(.keep-table) tr { display:block; }
  .table:not(.keep-table) thead { display:none; }
  .table:not(.keep-table) tbody tr { background:#fff; border:1px solid var(--line); border-radius:14px; padding:.5rem .9rem; margin-bottom:.6rem; box-shadow:0 1px 2px rgba(21,25,53,.05); }
  .table:not(.keep-table) > :not(caption) > * > * { border:0; padding:.35rem 0; box-shadow:none; background:transparent; }
  .table:not(.keep-table) td { display:flow-root; text-align:right; overflow-wrap:anywhere; }
  .table:not(.keep-table) td::before { content:attr(data-label); float:left; max-width:46%; margin-right:.75rem; text-align:left; color:#5D6382; font-size:.8rem; font-weight:600; line-height:1.9; }
  .table:not(.keep-table) td:not([data-label])::before,.table:not(.keep-table) td[data-label=""]::before,.table td.cell-wide::before { content:none; }
  .table:not(.keep-table) td:first-child { text-align:left; font-weight:700; padding-bottom:.5rem; margin-bottom:.2rem; border-bottom:1px solid #EEF0F7; }
  .table:not(.keep-table) td:first-child::before { content:none; }
  .table td.cell-wide { text-align:center; }
  .table tfoot, .table tfoot tr { display:block; }
  .table tfoot tr { display:flex; flex-wrap:wrap; justify-content:space-between; background:#F8F9FC; border-radius:14px; padding:.6rem .9rem; }
  .table td .form-control,.table td .form-select { text-align:left; }
  .row-actions { min-width:0; }
  .row-actions .btn { margin:2px; }
  .table-bordered > :not(caption) > * { border-width:0; }

  /* bottom app bar */
  .bottom-nav { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:1030;
    height:calc(var(--bottom-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
  .bn-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; background:none; padding:0;
    color:#8A8FA8; font-size:.68rem; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .bn-item i { font-size:1.3rem; line-height:1; }
  .bn-item.is-active { color:var(--brand); }
  .bn-fab-btn { width:54px; height:54px; margin-top:-26px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(245,130,32,.4); border:4px solid #F4F6FB; }
  .bn-fab-btn i { font-size:1.5rem; }
  body.drawer-open .bottom-nav { visibility:hidden; }
}
@media print { .bottom-nav,.sidenav,.drawer-scrim,.menu-btn { display:none!important; } }