/* App frame styles */

/* Navbar */
.app-navbar { border-radius: 0; }
.app-navbar .app-logo { display:inline-block; width:20px; height:20px; background:#666; border-radius:3px; margin-right:6px; vertical-align:middle; }
.app-navbar .app-name { font-weight:600; margin-left:4px; }

/* Chrome surfaces */
.app-navbar{ background: var(--chrome); border-bottom:1px solid #d9e1e6; }
.app-sidebar{ background: var(--chrome); border-right:1px solid #d9e1e6; }
#app-footer{ background: var(--chrome); border-top:1px solid #d9e1e6; }

/* Ensure brand text and links remain readable */
.app-navbar .navbar-brand,.app-navbar .navbar-brand:hover,.app-navbar .navbar-brand:focus{ color: var(--text); }
.app-navbar .btn-default{ background:#fff; color: var(--text); border-color:#ccc; }

/* Account dropdown contrast */
.app-navbar .app-account .dropdown-toggle{ background:#fff; color: var(--text); border-color:#ccc; }

/* Layout */
.app-frame { padding-top: 10px; }
.app-sidebar-col { padding-top: 10px; }
.app-main-col { padding-top: 10px; }

/* Sidebar nav */
.app-sidebar { }
.app-nav { list-style:none; margin:0; padding:0; }
.app-nav-group { padding:8px 12px; text-transform:uppercase; font-size:11px; color:#777; }
.app-nav-item a { display:block; padding:8px 12px; color:#333; }
/* duplicate removed; see accent-based rule below */

/* Content */
.page-title { margin:10px 0 15px; font-size:22px; font-weight:600; }
.app-messages .alert { margin-top:10px; }

/* Footer */
#app-footer { margin-top:20px; }
.app-footer-inner { padding:15px; color:#777; font-size:12px; }

/* Account */
.app-account .avatar-initial { display:inline-block; width:24px; height:24px; border-radius:50%; background:#777; color:#fff; text-align:center; line-height:24px; margin-right:6px; font-weight:600; }

/* Ensure sidebar is visible on desktop even when using .collapse API */
@media (min-width:768px) {
  #app-sidebar.collapse { display:block !important; height:auto !important; }
}

:root {
  --accent:#337ab7;
  --accent-600:#2e6da4;
  --logo-leaf:#878200;
  --primary:#666;
  --primary-600:#4d4d4d;
  --bg-default:#fff;
  --bg-paper:#f7f7f7;
  --text:#222;
  --text-muted:#666;
  --contrast-on-accent:#fff;
  --chrome:#ececec;
}
/* Env badge */
.env-badge{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:12px;background:#eef5ee;color:#2e7d32;font-size:11px;vertical-align:middle}
.env-badge .env-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2e7d32;margin-right:4px}
/* Sidebar groups */
.app-nav>li.app-nav-group{list-style:none;margin:0}
.app-nav-group-btn{width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.02em}
.app-nav-group-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.app-nav-items{margin:0;padding:0}
.app-nav-item a{display:block;padding:10px 12px;line-height:24px}
.app-nav-item a:focus{outline:2px solid var(--accent);outline-offset:-2px}
.app-nav-item .app-nav-icon{display:inline-block;width:18px;height:18px;border-radius:3px;background:#bbb;margin-right:8px;vertical-align:text-bottom}
/* Simple icon mapping by key (optional examples) */
.icon-dashboard{background:#bbb}
.icon-jobs{background:#bbb}
.icon-users{background:#bbb}
.icon-billing-records{background:#bbb}
.icon-job-board{background:#bbb}
.icon-account{background:#bbb}
.icon-logout{background:#bbb}
.icon-login{background:#bbb}
/* Chevron */
.app-nav-group-btn .chevron{display:inline-block;border:solid #999;border-width:0 2px 2px 0;padding:3px;margin-right:6px;transform:rotate(45deg);transition:transform .2s}
.app-nav-group-btn.collapsed .chevron{transform:rotate(-45deg)}
/* Title area, subtitle and chips */
.page-header{display:flex;align-items:baseline;justify-content:space-between;margin:10px 0 15px}
.page-subtitle{font-size:13px;color:#666;margin-top:-4px}
.page-chips{text-align:right}
/* Buttons hierarchy */
.btn-default{background:#fff;border-color:#ccc; color: var(--text);}
/* Cards */
.card{background:#fff;border:1px solid #e6e6e6;border-radius:4px;padding:15px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Improved active/hover */
.app-nav-item a:hover,.app-nav-item.active a{background:#e9f3ea}
/* Mobile sidebar overlay placeholder (optional) */
@media (max-width:767px){.app-sidebar{position:fixed;top:50px;bottom:0;z-index:1000;overflow:auto}}

/* Brand logo (inline SVG) */
.app-logo-link .brand-logo { color: var(--accent); }
/* Align brand contents vertically */
.app-navbar .navbar-brand.app-logo-link{ display:flex; align-items:center; }
/* removed duplicate: brand logo size normalized later */

/* Brand logo two-tone sizing and colors */
/* removed duplicate: brand logo size normalized later */
.app-navbar .brand-logo.two-tone svg .leaf { fill: var(--logo-leaf, var(--accent)); }
.app-navbar .brand-logo.two-tone svg .text { fill: var(--logo-text, #000); }

/* Theme tokens */
body.theme-default{--accent:#337ab7;--accent-600:#2e6da4;--primary:#666;--primary-600:#4d4d4d;--bg-default:#fff;--bg-paper:#f7f7f7;--text:#222;--text-muted:#666;--contrast-on-accent:#fff;--chrome:#ececec}
/* Flatly-compatible tokens for Rost */
body.theme-rost{--accent:#18bc9c;--accent-600:#159a80;--primary:#2c3e50;--primary-600:#233240;--bg-default:#fff;--bg-paper:#fcfcfc;--text:#2c3e50;--text-muted:#7b8a8b;--contrast-on-accent:#fff;--chrome:#ecf0f1}

/* Surfaces/text */
body{background:var(--bg-default);color:var(--text)}
.card,.panel{background:var(--bg-paper)}
/* Flatly theme mapping tweaks when enabled */
body.theme-rost a:not(.btn), body.theme-rost .btn-link{ color: var(--accent); }

/* Flatly: make header/sidebar links gray by default, teal on hover */
body.theme-rost .app-navbar a:not(.btn),
body.theme-rost .app-sidebar a:not(.btn){
  color: var(--text);
}
body.theme-rost .app-navbar a:not(.btn):hover,
body.theme-rost .app-sidebar a:not(.btn):hover,
body.theme-rost .app-nav-item.active a{
  color: var(--accent);
}


/* Buttons/links (reuse existing btn rules; these strengthen mapping) */

/* Logo and env badge use accent */
.app-navbar .brand-logo.two-tone svg .leaf{fill:var(--logo-leaf, var(--accent))}
.app-navbar .brand-logo.two-tone svg .text{fill:#000}
.env-badge{background:color-mix(in srgb, var(--accent) 15%, white);color:var(--accent)}
.env-badge .env-dot{background:var(--accent)}
/* Nav active/hover tint using accent (progressive enhancement) */
.app-nav-item a:hover,.app-nav-item.active a{background:color-mix(in srgb, var(--accent) 10%, white)}
/* Theme dropdown minor tweak */
.app-theme .dropdown-menu{min-width:140px}

/* Ensure header dropdowns overlay page content */
.navbar .dropdown-menu{ z-index: 1001; }

/* Header actions alignment */
.app-navbar .app-actions{ float:right; padding-top:8px; }
.app-navbar .app-actions .dropdown{ display:inline-block; vertical-align:middle; margin-left:10px; }
.app-navbar .app-actions .dropdown:first-child{ margin-left:0; }
.app-navbar .app-actions .navbar-btn{ margin-left:0; }
/* Keep menus aligned to right edge */
.app-navbar .app-actions .dropdown-menu{ right:0; left:auto; }

/* Mobile: stack but keep right aligned */
@media (max-width:767px){
  .app-navbar .app-actions{ float:none; text-align:right; padding:10px 0; }
  .app-navbar .app-actions .dropdown{ margin-left:8px; }
}

/* Keep header actions on same line as brand */
.app-navbar .container-fluid{ position:relative; }
.app-navbar .app-actions{ position:absolute; top:0; right:24px; height:50px; display:flex; align-items:center; gap:10px; float:none; padding-top:0; }
.app-navbar .app-actions .dropdown{ margin-left:10px; }
.app-navbar .app-actions .navbar-btn{ margin:8px 0; }

/* Mobile fallback: stack and avoid overlap */
@media (max-width:767px){
  .app-navbar .app-actions{ position:static; height:auto; display:block; text-align:right; padding:10px 0; }
}

/* Rost theme: brand logo leaf color override */
/* removed conflicting theme-specific leaf override (handled by theme tokens) */

/* Force override for Rost theme logo leaf */
/* removed conflicting theme-specific leaf override (handled by theme tokens) */

/* Brand logo leaf: fixed color across themes */
/* removed conflicting global leaf override (keep accent-based rule) */

/* Sidebar visibility toggle */
body.sidebar-hidden .app-sidebar-col{ display:none; }
body.sidebar-hidden .app-main-col{ border-left:0; max-width:100%; flex:1 1 100%; }
.app-navbar .app-sidebar-toggle{ margin-right:10px; }

/* App name sizing to match page titles */
/* removed duplicate: app-name sizing refined later */

/* Ensure navbar accommodates larger text */
.app-navbar .navbar-brand{ height:auto; padding-top:10px; padding-bottom:10px; }
.app-navbar .brand-logo svg{ vertical-align:middle; }

/* App name sizing refinement */
.app-navbar .app-name{ font-size:26px; line-height:1.1; }

/* Header/sidebar meeting and chrome background */
.app-navbar{ margin-bottom:0; }
.app-frame, .app-sidebar-col, .app-main-col{ padding-top:0; }
/* Put chrome on the column so gutters/padding match */
.app-sidebar-col{ background: var(--chrome); }
/* Make inner nav transparent so column color shows through */
.app-sidebar{ background: transparent; }

/* Sidebar/Main seam cleanup */
.app-sidebar{ border-right:0; }
.app-main-col{ padding-left:0; border-left:1px solid #e0e0e0; }
.app-main-col > .app-breadcrumbs, .app-main-col > .page-title, .app-main-col > .app-content, .app-main-col > *:first-child{ padding-left:15px; padding-right:15px; }

/* Ensure sidebar list has internal spacing */
.app-sidebar{ padding-left:15px; padding-right:15px; }

/* Equal-height layout with Flexbox */
/* Mobile first: stack (BS3 xs) */
.app-frame > .row{ display:block; }

/* >=768px (sm): switch to flex, remove floats, set widths */
@media (min-width:768px){
  .app-frame > .row{ display:flex; align-items:stretch; min-height: calc(100vh - 50px); }
  .app-sidebar-col, .app-main-col{ float:none; }
  .app-sidebar-col{ flex:0 0 25%; max-width:25%; }
  .app-main-col{ flex:1 1 auto; max-width:75%; }
}

/* >=992px (md): sidebar 2/12 width */
@media (min-width:992px){
  .app-sidebar-col{ flex:0 0 16.6667%; max-width:16.6667%; }
  .app-main-col{ flex:1 1 auto; max-width:83.3333%; }
}

/* Sidebar: remove bullets/markers */
.app-sidebar .app-nav, .app-sidebar .app-nav ul, .app-sidebar .app-nav li{ list-style: none !important; }
.app-sidebar .app-nav li::marker{ content: none; }
.app-sidebar .app-nav, .app-sidebar .app-nav ul{ margin:0; padding:0; }

/* Sidebar icons: use Bootstrap Icons, no background box */
.app-nav-item .app-nav-icon{ background:none; width:auto; height:auto; border-radius:0; margin-right:8px; color:var(--text-muted); font-size:18px; line-height:1; vertical-align:-2px; }
/* Hover/active accent for icons */
.app-nav-item a:hover .app-nav-icon, .app-nav-item.active a .app-nav-icon{ color:var(--accent); }

/* Sidebar text in Title Case */
.app-sidebar .app-nav-group-btn, .app-sidebar .app-nav-item a{ text-transform: capitalize; }

/* Header hamburger styling */
.app-navbar .app-sidebar-toggle{ background:transparent; border:0; box-shadow:none; color:var(--text); padding:8px 10px; }
.app-navbar .app-sidebar-toggle:hover{ background:transparent; color:var(--text); }
.app-navbar .app-sidebar-toggle:focus, .app-navbar .app-sidebar-toggle:active{ background:transparent; border-color:transparent; box-shadow:none; outline:2px solid var(--accent); outline-offset:2px; }
/* Ensure .btn-default rule doesn't override */
.app-navbar .app-sidebar-toggle.btn, .app-navbar .app-sidebar-toggle.btn-default{ background:transparent; }

/* Keyboard-only focus styles */
.app-nav-group-btn:focus{ outline: none; }
.app-nav-group-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.app-nav-item a:focus{ outline: none; }
.app-nav-item a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* Hamburger focus only on keyboard */
.app-navbar .app-sidebar-toggle:focus{ outline: none; box-shadow:none; }
.app-navbar .app-sidebar-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Sidebar typography aligned to app base */
.app-sidebar, .app-sidebar .app-nav-group-btn, .app-sidebar .app-nav-item a{ font-family: inherit; font-size: inherit; }
/* Tweak spacing to fit base line-height */
.app-sidebar .app-nav-group-btn{ padding:8px 12px; letter-spacing:0; }
.app-sidebar .app-nav-item a{ padding:8px 12px; line-height:1.42857143; }

/* Sidebar item typography matches view body */
.app-sidebar .app-nav-item a{ font-size:16px; line-height:1.42857143; font-weight:400; color:var(--text); }
.app-sidebar .app-nav-item a:hover{ color:var(--text); text-decoration:none; }
/* Sidebar group labels match items */
.app-sidebar .app-nav-group-btn{ font-size:16px; line-height:1.42857143; font-weight:400; color:var(--text); }
/* Icon color alignment */
.app-sidebar .app-nav-item .app-nav-icon{ color:var(--text-muted); }
.app-sidebar .app-nav-item a:hover .app-nav-icon, .app-sidebar .app-nav-item.active a .app-nav-icon{ color:var(--accent); }

/* Off-canvas sidebar for small screens */
@media (max-width:991px){
  .app-navbar{ position:relative; z-index:1050; }
  .app-frame > .row{ display:block; }
  .app-sidebar-col{ position:fixed; top:50px; bottom:0; left:0; width:260px; max-width:80%; z-index:1040; overflow:auto; background:var(--chrome); border-right:1px solid #e0e0e0; transform:translateX(-100%); transition:transform .2s ease-in-out; }
  /* Hidden by default on small screens; open when body has .sidebar-open */
  body.sidebar-open .app-sidebar-col{ transform:translateX(0); }
  /* Backdrop */
  .sidebar-backdrop{ position:fixed; top:50px; left:0; right:0; bottom:0; background:rgba(0,0,0,.2); display:none; z-index:1030; }
  body.sidebar-open .sidebar-backdrop{ display:block; }
  /* Main fills width */
  .app-main-col{ max-width:100%; flex:1 1 auto; padding-left:0; border-left:0; width:100% !important; }
  /* Ensure sidebar is displayable on mobile even if .sidebar-hidden is set */
  .sidebar-hidden .app-sidebar-col{ display:block; }
}

/* Account dropdown item normalization */
.dropdown-menu > li > a.app-theme-toggle{ display:block; padding:3px 20px; color:#333; font-weight:400; }
.dropdown-menu > li > a.app-theme-toggle:hover{ background:#f5f5f5; color:#262626; text-decoration:none; }
.dropdown-menu .app-dropdown-link{ display:block; width:100%; padding:3px 20px; color:#333; background:transparent; border:0; text-align:left; font-weight:400; }
.dropdown-menu .app-dropdown-link:hover{ background:#f5f5f5; color:#262626; text-decoration:none; }
.dropdown-menu .app-logout-form{ margin:0; }
.app-theme-icon{ font-size:18px; }

/* Header logo size and spacing adjustments */
.app-navbar .brand-logo svg{ width:60px !important; height:auto; }
.app-navbar .app-sidebar-toggle{ margin-right:14px; }
.app-navbar .navbar-brand .brand-logo{ margin-right:10px; }
.app-navbar .app-name{ margin-left:12px; }
.app-navbar .env-badge{ margin-left:12px; }

/* Account dropdown sizing in navbar */
.app-navbar .app-account .dropdown-toggle{ padding:8px 12px; line-height:20px; }
.app-navbar .app-account .avatar-initial{ width:22px; height:22px; line-height:22px; margin-right:8px; }
.app-navbar .app-account .account-name{ margin-right:4px; }

/* Fix account dropdown alignment in header */
.app-navbar .app-actions .navbar-btn{ margin:0 !important; }
.app-navbar .app-account .dropdown-toggle{ padding:6px 10px; line-height:22px; }
/* Ensure actions bar centers items within 50px navbar */
.app-navbar .app-actions{ height:50px; align-items:center; }

/* Precise centering for account dropdown */
.app-navbar{ min-height:50px; }
.app-navbar .app-actions{ top:0; height:50px; display:flex; align-items:center; }
.app-navbar .app-account .dropdown-toggle{ height:34px; padding:6px 12px; line-height:22px; display:flex; align-items:center; }

/* Keep hamburger and brand on one line */
.app-navbar .navbar-header{ display:flex; align-items:center; }
.app-navbar .navbar-header .navbar-brand{ float:none; }

/* Bootstrap Icons alignment and spacing */
.bi{vertical-align:-0.125em;line-height:1}
.btn .bi{margin-right:4px}
.btn .bi:last-child{margin-right:0}
.input-group-addon .bi{vertical-align:-0.125em}

.manage-jobs-row {
  margin-left: 0;
  margin-right: 0;
}

/* Autocomplete dropdown styles */
.autocomplete-results {
  padding: 4px 0;
}

.autocomplete-results .autocomplete-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.autocomplete-results .autocomplete-option:focus {
  outline: none;
}

.autocomplete-results .autocomplete-option:hover,
.autocomplete-results .autocomplete-option.active {
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: inherit;
}