/* ================================================================
   PhiliBill — ERPNext portal page theme
   Covers: /me · /invoices · /orders · /quotations · /issues
           /project · /shipments · /addresses · /timesheets
           /support · /material-requests · /rfq etc.

   Palette: void #04080f · deep #080e1a · dark #0c1524 · card #111d2e
            blue #0a84ff · text #e2e8f5 · muted #7a8da8
================================================================ */

/* ── CSS vars for portal pages ───────────────────────────────── */
:root {
  --fg-color:     #111d2e;
  --bg-color:     #04080f;
  --card-bg:      #111d2e;
  --border-color: rgba(255,255,255,0.07);
  --text-color:   #e2e8f5;
  --muted-color:  #7a8da8;
  --blue:         #0a84ff;
  --blue-dim:     rgba(10,132,255,0.15);
  --bg-light-gray: #080e1a;
}

/* ── Page background ─────────────────────────────────────────── */
body,
.page-content-wrapper,
.page-content,
.frappe-app { background: #04080f !important; color: #e2e8f5 !important; }

/* ── Frappe website navbar (portal pages) ────────────────────── */
.navbar,
.navbar.navbar-expand-lg { background: #080e1a !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; box-shadow: 0 1px 20px rgba(0,0,0,0.4) !important; min-height: 88px !important; }
.navbar .navbar-brand { color: #e2e8f5 !important; font-weight: 700 !important; letter-spacing: .04em !important; height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.navbar .navbar-brand img { max-height: none !important; height: 72px !important; width: auto !important; }
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav > li > a { color: #7a8da8 !important; transition: color .2s; }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav > li > a:hover { color: #e2e8f5 !important; }
.navbar .navbar-toggler { border-color: rgba(255,255,255,0.2) !important; }
.navbar .navbar-toggler-icon { filter: invert(1) !important; }
.navbar .dropdown-menu { background: #111d2e !important; border-color: rgba(255,255,255,0.10) !important; }
.navbar .dropdown-item { color: #e2e8f5 !important; }
.navbar .dropdown-item:hover { background: rgba(10,132,255,0.12) !important; }
.navbar .dropdown-divider { border-top-color: rgba(255,255,255,0.07) !important; }

/* ── Portal sidebar ──────────────────────────────────────────── */
.portal-sidebar,
.web-sidebar { background: transparent !important; }
.portal-sidebar .sidebar-label {
  color: #7a8da8 !important; font-size: .68rem !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  padding: 10px 12px 4px !important; display: block !important;
}
.portal-sidebar li a,
.web-sidebar li a {
  color: #7a8da8 !important; display: block !important; padding: 8px 12px !important;
  border-radius: 7px !important; text-decoration: none !important;
  font-size: .9rem !important; transition: all .15s !important;
}
.portal-sidebar li a:hover,
.web-sidebar li a:hover { color: #e2e8f5 !important; background: rgba(10,132,255,0.10) !important; }
.portal-sidebar li.active > a,
.web-sidebar li.active > a {
  color: #e2e8f5 !important; background: rgba(10,132,255,0.15) !important;
  border-left: 3px solid #0a84ff !important; padding-left: 9px !important;
  font-weight: 600 !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.page-breadcrumbs { background: #04080f !important; padding-top: 10px !important; }
.breadcrumb { background: transparent !important; margin-bottom: 4px !important; }
.breadcrumb-item a { color: #0a84ff !important; }
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before { color: #7a8da8 !important; }

/* ── Headings and body text ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: #e2e8f5 !important; }
p, li, td, th, span, label { color: #e2e8f5 !important; }
.text-muted, .muted { color: #7a8da8 !important; }
.text-danger { color: #ff3b30 !important; }
.text-success { color: #32d74b !important; }
.text-primary { color: #0a84ff !important; }

/* ── Links ───────────────────────────────────────────────────── */
a, a:visited { color: #0a84ff !important; }
a:hover { color: #4db8ff !important; }

/* ── Web list items ──────────────────────────────────────────── */
.transaction-list-items,
.web-list-items {
  background: #111d2e !important; border-radius: 8px !important;
  overflow: hidden !important; border: 1px solid rgba(255,255,255,0.07) !important;
}
.web-list-item,
.transaction-list-item {
  background: #111d2e !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 14px 20px !important;
}
.web-list-item:last-child,
.transaction-list-item:last-child { border-bottom: none !important; }
.web-list-item:hover,
.transaction-list-item:hover { background: #0d1826 !important; }
.web-list-item a,
.transaction-list-item a { color: #0a84ff !important; text-decoration: none !important; }
.web-list-item .text-muted,
.transaction-list-item .text-muted { color: #7a8da8 !important; }

/* List header */
.list-item-header,
.web-list-header {
  background: #0c1524 !important; color: #7a8da8 !important;
  padding: 10px 20px !important; font-size: .78rem !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Empty state ─────────────────────────────────────────────── */
.web-empty-state,
.empty-state { color: #7a8da8 !important; text-align: center !important; padding: 48px 0 !important; }
.web-empty-state .lead,
.empty-state .lead { color: #7a8da8 !important; }

/* ── Cards / panels ──────────────────────────────────────────── */
.card, .well,
.frappe-card {
  background: #111d2e !important; border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important; color: #e2e8f5 !important;
}
.card-header {
  background: #0c1524 !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  color: #e2e8f5 !important;
}
.card-body { color: #e2e8f5 !important; background: #111d2e !important; }
.card-footer { background: #0c1524 !important; border-top: 1px solid rgba(255,255,255,0.07) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary,
.btn-new-doc {
  background: #0a84ff !important; border-color: #0a84ff !important;
  color: #fff !important; border-radius: 7px !important;
}
.btn-primary:hover { background: #1a90ff !important; box-shadow: 0 0 18px rgba(10,132,255,0.35) !important; }
.btn-default, .btn-secondary {
  background: #0c1524 !important; border-color: rgba(255,255,255,0.10) !important;
  color: #e2e8f5 !important; border-radius: 7px !important;
}
.btn-default:hover, .btn-secondary:hover { background: #111d2e !important; }
.btn-danger { background: #ff3b30 !important; border-color: #ff3b30 !important; color: #fff !important; }
.btn-success { background: #32d74b !important; border-color: #32d74b !important; color: #fff !important; }

/* ── Form controls ───────────────────────────────────────────── */
.form-control, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  background: #0c1524 !important; border-color: rgba(255,255,255,0.10) !important;
  color: #e2e8f5 !important; border-radius: 7px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: #0a84ff !important; box-shadow: 0 0 0 3px rgba(10,132,255,0.25) !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #4a5d75 !important; }
.form-control:disabled, input:disabled, select:disabled, textarea:disabled {
  background: #080e1a !important; color: #4a5d75 !important;
}
.control-label, label { color: #7a8da8 !important; font-size: .85rem !important; }
.input-group-text {
  background: #0c1524 !important; border-color: rgba(255,255,255,0.10) !important;
  color: #7a8da8 !important;
}

/* ── Indicator pills / badges ────────────────────────────────── */
.indicator-pill, .badge { border-radius: 6px !important; font-size: .75rem !important; padding: 3px 9px !important; }
.indicator-pill.blue,  .badge-primary  { background: rgba(10,132,255,0.15) !important; color: #4db8ff !important; border: 1px solid rgba(10,132,255,0.30) !important; }
.indicator-pill.green, .badge-success  { background: rgba(50,215,75,0.12) !important;  color: #32d74b !important; }
.indicator-pill.red,   .badge-danger   { background: rgba(255,59,48,0.12) !important;  color: #ff3b30 !important; }
.indicator-pill.orange                 { background: rgba(255,149,0,0.12) !important;  color: #ff9500 !important; }
.indicator-pill.yellow,.badge-warning  { background: rgba(255,214,10,0.12) !important; color: #ffd60a !important; }
.indicator-pill.gray                   { background: rgba(255,255,255,0.07) !important;color: #7a8da8 !important; }

/* ── Tables ──────────────────────────────────────────────────── */
.table { color: #e2e8f5 !important; }
.table td, .table th { border-color: rgba(255,255,255,0.07) !important; background: #111d2e !important; color: #e2e8f5 !important; }
.table thead th { background: #0c1524 !important; color: #7a8da8 !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(10,132,255,0.04) !important; }
.table-hover tbody tr:hover td { background: #0d1826 !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { border-radius: 8px !important; }
.alert-info    { background: rgba(10,132,255,0.10) !important; border-color: rgba(10,132,255,0.25) !important; color: #4db8ff !important; }
.alert-warning { background: rgba(255,214,10,0.10) !important; border-color: rgba(255,214,10,0.25) !important; color: #ffd60a !important; }
.alert-danger  { background: rgba(255,59,48,0.10) !important;  border-color: rgba(255,59,48,0.25) !important;  color: #ff3b30 !important; }
.alert-success { background: rgba(50,215,75,0.10) !important;  border-color: rgba(50,215,75,0.25) !important;  color: #32d74b !important; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link { background: #0c1524 !important; border-color: rgba(255,255,255,0.10) !important; color: #e2e8f5 !important; }
.pagination .page-item.active .page-link { background: #0a84ff !important; border-color: #0a84ff !important; color: #fff !important; }
.pagination .page-link:hover { background: #111d2e !important; }

/* ── /me account page specifics ──────────────────────────────── */
.account-info { background: #111d2e !important; border-color: rgba(255,255,255,0.07) !important; border-radius: 8px !important; overflow: hidden !important; }
.account-info .col { border-bottom-color: rgba(255,255,255,0.07) !important; }
.my-account-header { color: #e2e8f5 !important; }
.my-account-name, .my-account-item { color: #e2e8f5 !important; }
.my-account-item-desc { color: #7a8da8 !important; }
.my-account-item-link a { color: #0a84ff !important; text-decoration: none !important; }
.my-account-item-link a:hover { color: #4db8ff !important; }
.my-account-item-link .edit-profile-icon { stroke: #0a84ff !important; }

/* ── Helpdesk portal (/support) ──────────────────────────────── */
.hd-portal-container { background: #04080f !important; }
.hd-portal-header { background: #080e1a !important; }
.hd-portal-search input { background: #0c1524 !important; color: #e2e8f5 !important; border-color: rgba(255,255,255,0.10) !important; }
.hd-ticket-list-item { background: #111d2e !important; border-color: rgba(255,255,255,0.07) !important; }
.hd-ticket-list-item:hover { background: #0d1826 !important; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-content { background: #0c1524 !important; border: 1px solid rgba(255,255,255,0.10) !important; }
.modal-header { background: #111d2e !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.modal-footer { background: #111d2e !important; border-top: 1px solid rgba(255,255,255,0.07) !important; }
.modal-title { color: #e2e8f5 !important; }
.modal-backdrop { opacity: 0.7 !important; background: #000 !important; }
.close, .btn-close { color: #7a8da8 !important; filter: invert(1) !important; opacity: .7 !important; }

/* ── Dropdowns ───────────────────────────────────────────────── */
.dropdown-menu { background: #111d2e !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important; }
.dropdown-item { color: #e2e8f5 !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(10,132,255,0.12) !important; color: #e2e8f5 !important; }
.dropdown-divider { border-top-color: rgba(255,255,255,0.07) !important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #080e1a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── Portal navbar brand injection target ────────────────────── */
.ps-portal-brand {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; gap: 20px !important;
  text-decoration: none !important; color: #e2e8f5 !important;
  line-height: 1 !important;
}
.ps-portal-logo-img {
  height: 60px !important; width: auto !important;
  display: block !important; flex-shrink: 0 !important;
  object-fit: contain !important;
}
.ps-portal-text {
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
.ps-portal-wordmark {
  font-size: .95rem; font-weight: 800; letter-spacing: .14em;
  color: #e2e8f5 !important; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}
.ps-portal-sub {
  font-size: .65rem; letter-spacing: .08em;
  color: #7a8da8 !important; text-transform: uppercase; white-space: nowrap;
}