/* =============================================================================
   apjakaltheme.css — Apjakal Corporate Brand Override Layer
   ============================================================================= */

/* ───────────────── 1. ROOT TOKENS ───────────────── */
:root {
  --color-primary:               #F43024;
  --color-primary-hover:         #d42a1f;
  --color-primary-soft:          #FEE4E2;

  --color-text-main:             #374151;
  --color-text-muted:            #6B7280;

  --color-border:                #E5E7EB;
  --color-bg:                    #F3F4F6;
  --color-surface:               #FFFFFF;
  --color-surface-alt:           #F1F5F9;

  --color-navbar-bg:             #0F172A;
  --color-navbar-text:           #F9FAFB;
  --color-sidebar-bg:            #111827;
  --color-sidebar-text:          #E5E7EB;
  --color-sidebar-active-bg:     #1F2937;
  --color-sidebar-active-border: #F97316;

  --shadow-soft:   0 1px 3px rgba(15,23,42,0.06);
  --shadow-card:   0 1px 4px rgba(15,23,42,0.09);
  --shadow-chrome: 0 1px 4px rgba(15,23,42,0.18);

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* qboat aliases */
  --primary-color:  #F43024;
  --primary-rgb:    244, 48, 36;
  --text-color:     #374151;
  --body-color:     #F3F4F6;
  --card-color:     #FFFFFF;
  --border-color:   #E5E7EB;
  --card-shadow:    0 1px 4px rgba(15,23,42,0.09);
  --sidebar-color:  #111827;
}

/* ───────────────── 2. SIDEBAR ───────────────── */
.sidebar {
  --gray-8:       #E5E7EB;
  --gray-7:       #CBD5E1;
  --gray-6:       #94A3B8;
  --gray-5:       #64748B;
  --white:        #FFFFFF;
  --border-color: rgba(15,23,42,0.24);

  /* Slightly transparent background + blur */
  background-color: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  & > div,
  .flex-grow-1 .menu-list,
  .flex-grow-1 .menu-list ul,
  .flex-grow-1 .menu-list li,
  .menu-list > li ul,
  .menu-list > li .sub-menu {
    background: transparent !important;
  }
}

.sidebar .menu-list a.m-link,
.sidebar .menu-list a.ms-link {
  color: var(--color-sidebar-text) !important;
  background: transparent !important;
}

.sidebar .menu-list > li ul li a,
.sidebar .menu-list > li .sub-menu a {
  color: rgba(203, 213, 225, 0.75) !important;
  background: transparent !important;
  font-size: 13px;
  padding: 3px 8px !important;
}

.sidebar .icon-sm,
.sidebar .icon-xs,
.sidebar .menu-list a svg,
.sidebar .menu-list a .icon,
.sidebar .sidebar-item-icon svg {
  stroke: #9CA3AF !important;
  color:  #9CA3AF !important;
  fill:   rgba(156,163,175,0.2) !important;
}

/* Hover: Orange bg + white text */
.sidebar .menu-list a.m-link:hover,
.sidebar .menu-list a.ms-link:hover,
.sidebar .menu-list a.sidebar-link:hover,
.sidebar .menu-list > li ul li a:hover {
  color: #FFFFFF !important;
  background-color: var(--color-sidebar-active-border) !important;
  opacity: 1 !important;
}

/* Sidebar li must always be transparent */
.sidebar .sidebar-item,
.sidebar .sidebar-item:hover,
.sidebar .menu-list > li,
.sidebar .menu-list > li:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Kill any ::before pseudo-element that could overlay with a white/light bg */
.sidebar .menu-list a::before,
.sidebar .menu-list li a::before,
.sidebar .menu-list li .has-arrow::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Kill inner element backgrounds on hover */
.sidebar .menu-list a.m-link:hover *,
.sidebar .menu-list a.ms-link:hover *,
.sidebar .menu-list a.sidebar-link:hover * {
  background-color: transparent !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

/* Hover icons: White */
.sidebar .menu-list a.m-link:hover svg,
.sidebar .menu-list a.m-link:hover .icon,
.sidebar .menu-list a.ms-link:hover svg,
.sidebar .menu-list a.ms-link:hover .icon,
.sidebar .menu-list a.sidebar-link:hover svg,
.sidebar .menu-list a.sidebar-link:hover .icon {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    fill: rgba(255,255,255,0.2) !important;
}

/* Expanded parent item: Bootstrap sets aria-expanded=true when submenu is open — keep dark */
.sidebar .menu-list a[aria-expanded="true"],
.sidebar .menu-list a.has-arrow[aria-expanded="true"] {
  background-color: rgba(249, 115, 22, 0.12) !important;
  color: var(--color-sidebar-text) !important;
  border-left: 3px solid var(--color-sidebar-active-border) !important;
}

.sidebar .menu-list a.m-link.active,
.sidebar .menu-list a.ms-link.active,
.sidebar .menu-list a.sidebar-link.active {
  color: #F9FAFB !important;
  background-color: #111827 !important;
  border-left: 3px solid var(--color-sidebar-active-border) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
}

/* brand text in sidebar */
.sidebar .menu-list {
  padding-top: 25px !important;
}
.sidebar .menu-list .brand-icon {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 10px !important;
  padding-bottom: 10px !important;
}
.sidebar .menu-list .brand-icon a,
.sidebar .menu-list .brand-icon span,
.sidebar .menu-list .brand-icon strong,
.sidebar .brand-box span,
.sidebar .brand-box strong,
.sidebar .company-name {
  color: #FFFFFF !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

/* #companynamebrand is INSIDE the white logo box — needs dark text */
#companynamebrand {
  color: #374151 !important;
  opacity: 0.85 !important;
  visibility: visible !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  display: block !important;
  text-align: center;
  padding-bottom: 4px;
}

/* ───────────────── 3. NAVBAR / PAGE HEADER ───────────────── */
.page-header {
  /* Slightly transparent background + blur */
  background-color: rgba(11, 18, 32, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  box-shadow: var(--shadow-chrome) !important;
  border-bottom: none !important;
}

.page-header a,
.page-header a:hover,
.page-header a:visited {
  color: var(--color-navbar-text) !important;
  opacity: 0.82;
}
.page-header a:hover {
  opacity: 1;
  color: #FFFFFF !important;
}

/* Search Input */
.page-header .search-bar input,
.page-header .search-bar .form-control {
  background-color: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md);
}

/* Search Dropdown (Awesomplete) — White bg, Black text */
.awesomplete > ul {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  min-width: 300px;
}
.awesomplete > ul > li {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #f1f5f9;
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  background-color: #F3F4F6 !important;
  color: #000000 !important;
}
.awesomplete > ul > li strong,
.awesomplete > ul > li span,
.awesomplete > ul > li p {
  color: #000000 !important;
}
.awesomplete mark {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* ───────────────── 4. PROFILE DROPDOWN ───────────────── */
.header-menu .dropdown-menu,
.page-header .dropdown-menu {
  background-color: #FFFFFF !important;
  color: #111827 !important;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15,23,42,0.06) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.18) !important;
  min-width: 220px;
  padding: 6px 0;
}

.header-menu .dropdown-menu .dropdown-item,
.page-header .dropdown-menu .dropdown-item {
  font-size: 13px;
  color: #111827 !important;
  padding: 6px 14px;
}

.header-menu .dropdown-menu .dropdown-item:hover,
.page-header .dropdown-menu .dropdown-item:hover {
  background-color: #F3F4F6 !important;
  color: #111827 !important;
}

/* ───────────────── 5. TYPOGRAPHY / BODY ───────────────── */
body {
  font-family: 'Inter','Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg) !important;
  color: var(--color-text-main) !important;
}

/* ───────────────── 6. BRANDING BADGE ───────────────── */
.apjakal-brand-badge {
  position: fixed;
  top: 4px;
  left: 12px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  background: transparent;
  color: rgba(15,23,42,0.75);
  font-size: 10px;
  font-family: 'Inter','Roboto',sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.apjakal-brand-badge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(148,163,184,0.25),
    rgba(148,163,184,0.7),
    rgba(148,163,184,0.25)
  );
}

.apjakal-brand-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: var(--color-primary);
  flex-shrink: 0;
}


/* ───────────────── 7. BUTTONS ───────────────── */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(244,48,36,0.20);
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:active,
.btn.btn-primary:active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-primary-hover) !important;
  border-color:     var(--color-primary-hover) !important;
  color: #ffffff !important;
}
.btn-primary:focus,
.btn.btn-primary:focus { box-shadow: 0 0 0 3px var(--color-primary-soft) !important; }
.btn-primary:disabled,
.btn.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #f9a09a !important;
  border-color:     #f9a09a !important;
  color: #ffffff !important; opacity: 0.7;
}

.btn-default {
  background-color: var(--color-surface) !important;
  border-color:     var(--color-border) !important;
  color:            var(--color-text-main) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.btn-default:hover {
  background-color: var(--color-surface-alt) !important;
  border-color: #9CA3AF !important;
}

/* Fix: new-style.css sets .bg-primary { background: black } */
.bg-primary,
.btn.bg-primary { background-color: var(--color-primary) !important; color: #ffffff !important; }

/* Paging active button */
.list-paging-area .btn-group .btn.btn-default.btn-info {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color: #ffffff !important;
}

/* Filter outline pill */
.page-form .filter-button.btn-primary-light {
  border-color: var(--color-primary) !important;
  color:        var(--color-primary) !important;
  background:   transparent !important;
}


/* ───────────────── 8. FORM INPUTS ───────────────── */
/*
   Frappe link fields render selected values as input.bold or similar.
   The qboat :is(a) { color: var(--primary-color) } + Frappe's own CSS
   causes selected link-field text to appear red.
   Fix: explicitly force all form control text to --color-text-main.
*/
.frappe-control input,
.frappe-control input.bold,
.frappe-control .form-control,
.frappe-control .form-control.bold,
.frappe-control input[type="text"],
.frappe-control input[type="text"].bold,
.form-control {
  color: var(--color-text-main) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
.frappe-control input:focus,
.frappe-control input.bold:focus,
.form-control:focus,
.frappe-control .form-control:focus {
  color: var(--color-text-main) !important;
  background-color: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  outline: none;
}
.form-control::placeholder,
.frappe-control input::placeholder,
.frappe-control textarea::placeholder { color: var(--color-text-muted) !important; opacity: 0.65; }

.frappe-control textarea,
.frappe-control select {
  color: var(--color-text-main) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

.control-label,
.field-area label { color: var(--color-text-muted); font-weight: 500; font-size: 0.8rem; }

/* Section dividers inside forms */
.section-head {
  color: var(--color-text-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Checkboxes */
.checkbox input[type="checkbox"]:checked,
.row-check input[type="checkbox"]:checked,
.level-item input[type="checkbox"]:checked,
.list-subject input[type="checkbox"]:checked,
.dt-cell__content--col-0 input[type="checkbox"]:checked,
.dt-cell__content--header-0 input[type="checkbox"]:checked,
.modal-body input[type="checkbox"]:checked { accent-color: var(--color-primary) !important; }


/* ───────────────── 9. CARDS, WORKSPACE TILES, DASHBOARD ───────────────── */
.widget,
.widget-group .widget,
.dashboard-widget-box,
.onboarding-step,
.workspace-shortcut-widget,
.number-card {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-lg) !important;
}

.widget .widget-head .widget-title,
.workspace-shortcut-widget .widget-head .widget-title,
.number-card .number-card-head .number-card-label { color: var(--color-text-main) !important; }


/* ───────────────── 10. LIST VIEW ───────────────── */
.list-row-container .list-row,
.list-item-table .list-item-container {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  transition: background 0.1s;
}
.list-row-container .list-row:hover,
.list-item-table .list-item-container:hover { background-color: var(--color-surface-alt) !important; }

.list-row-head,
.list-headers {
  background-color: var(--color-surface-alt) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.list-row-head .list-header-subject,
.columns-filter .column-header-inner .label {
  color: var(--color-text-muted) !important;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Status Indicator Pills ──────────────────────────────────────────────────
   new-style.css forces: .list-row .indicator-pill span { color: black !important }
   Override: all solid-coloured pills get white text; only the "blue" soft-tint
   pill (light background) keeps a dark/brand-colour text for readability.      */

/* White text on all colored solid-bg pills */
.indicator-pill span,
.list-row .indicator-pill span { color: #ffffff !important; }

/* Red / Overdue — our brand red bg, white text */
.indicator-pill.red,
.indicator-pill[data-color="red"] {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.indicator-pill.red span,
.indicator-pill[data-color="red"] span { color: #ffffff !important; }

/* Orange / Open */
.indicator-pill.orange                { color: #ffffff !important; }
.indicator-pill.orange span           { color: #ffffff !important; }

/* Yellow / Pending */
.indicator-pill.yellow                { color: #ffffff !important; }
.indicator-pill.yellow span           { color: #ffffff !important; }

/* Green / Completed / Active */
.indicator-pill.green                 { color: #ffffff !important; }
.indicator-pill.green span            { color: #ffffff !important; }

/* Purple */
.indicator-pill.purple                { color: #ffffff !important; }
.indicator-pill.purple span           { color: #ffffff !important; }

/* Dark grey */
.indicator-pill.darkgrey              { color: #ffffff !important; }
.indicator-pill.darkgrey span         { color: #ffffff !important; }

/* Blue pill: soft/light bg — keep brand text, NOT white */
.indicator-pill.blue {
  background-color: var(--color-primary-soft) !important;
  color:            var(--color-primary) !important;
}
.indicator-pill.blue span,
.list-row .indicator-pill.blue span { color: var(--color-primary) !important; }

.list-paging-area {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
}


/* ───────────────── 11. FORM VIEW CHROME ───────────────── */
.page-head {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.form-page,
.layout-main-section-wrapper { background-color: var(--color-bg); }


/* ───────────────── 12. KILL QBOAT GRADIENTS & PASTEL COLORS ───────────────── */
.body-bg           { background-color: var(--color-bg) !important; }
.page-inner-layout { background-color: var(--color-surface) !important; }

/* Flatten all bg-gradient-* utility classes */
[class*="bg-gradient-"] {
  background-image: none !important;
  background-color: var(--color-surface-alt) !important;
}

/* qboat title gradient text — strip and use normal color */
.content-page-container .page-head .page-head-content .page-title .title-area .title-text,
.page-title .title-area .title-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--color-text-main) !important;
  color: var(--color-text-main) !important;
}

/* Table headers — was pastel blue, now neutral */
.table-ui thead > tr > th {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
}


/* ───────────────── 13. SCROLLBARS ───────────────── */
::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: #D1D5DB; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover{ background: #9CA3AF; }


/* ───────────────── 14. UTILITIES ───────────────── */
.text-primary { color: var(--color-primary) !important; }
.bg-primary   { background-color: var(--color-primary) !important; color: #ffffff !important; }