/* payam-crm2.css
   CRM2 vertical light skin on the existing Gentelella markup.
   Colours, radii, shadows and timing are the ThemeForest pack
   (assets/crm2/css/style.css, skin_color.css, color_theme.css).
   The pack stylesheet is vendored and not linked: it sets h2 to ~30px,
   restyles every .btn, and used to import the RTL sheet. This file applies
   the same chrome to .left_col, .nav_menu, .x_panel, .btn and .table.

   Layout stays in payam-option-a.css, payam-phone.css and payam-phone-step2.css:
   the job title is not floated, action groups wrap, search forms have no
   outer border, the phone rail does not reserve 120px, and notes sit above Save.
   Do not set margin-left, rail width, or float here. */

/* ----- Sidebar. White rail (dark surface in dark mode), 10px items.
   Active, current, and open parents use the same plain surface as every other item.
   Icon colours and the existing hover wash stay. No filled active pill. ----- */
.left_col,
.theme-dark .left_col,
.nav_title,
.theme-dark .nav_title {
  background: var(--c-surface);
  color: var(--c-text);
}
/* The rail is position:absolute, so it used to end at the last menu item and the
   grey page showed under and beside it. Stretch it to the page column, at least
   the viewport. The phone job scroller stays position:fixed (higher specificity). */
.main_container {
  position: relative;
  min-height: 100vh;
}
@media (max-width: 991px) {
  body:has(#form-edit-job) .main_container {
    min-height: 0;
  }
}
@media (min-width: 992px) {
  body.nav-md .container.body .col-md-3.left_col:not(.menu_fixed),
  body.nav-sm .container.body .col-md-3.left_col:not(.menu_fixed) {
    top: 0;
    height: auto;
    min-height: 100vh;
    min-height: max(100vh, 100%);
    background: var(--c-surface);
  }
}
.left_col .nav.side-menu > li > a {
  border-radius: 10px;
  transition: background-color .3s ease, color .3s ease;
}
.left_col .nav.side-menu > li > a > i[class^="icon-"],
.left_col .nav.side-menu > li > a > i[class*=" icon-"],
#menu_toggle i[class^="icon-"],
.icon-global-search i[class^="icon-"] {
  font-style: normal;
  line-height: 1;
  display: inline-block;
  width: auto !important;
  vertical-align: middle;
  color: var(--crm2-navy);
}
.nav-sm .nav.side-menu li a i[class^="icon-"] {
  font-size: 22px !important;
  margin-bottom: 4px;
}
.left_col .nav.side-menu > li.active > a,
.left_col .nav.side-menu > li.current-page > a,
.left_col .nav.side-menu > li.active-sm > a,
.nav-sm .left_col .nav.side-menu > li.active-sm > a,
.nav-sm > .nav.side-menu > li.active-sm > a,
.theme-dark .nav.side-menu > li.active > a,
.theme-dark .left_col .nav.side-menu > li.active > a,
.theme-dark .left_col .nav.side-menu > li.current-page > a,
.theme-dark .left_col .nav.side-menu > li.active-sm > a,
.left_col .nav.child_menu > li.active > a,
.left_col .nav.child_menu > li.current-page > a,
.theme-dark .left_col .nav.child_menu > li.active > a,
.theme-dark .left_col .nav.child_menu > li.current-page > a {
  background: transparent !important;
  background-image: none !important;
  color: var(--c-text) !important;
  text-shadow: none;
  box-shadow: none;
  border-radius: 10px !important;
}
.left_col .nav.side-menu > li.active > a:hover,
.left_col .nav.side-menu > li.current-page > a:hover,
.left_col .nav.side-menu > li.active-sm > a:hover,
.left_col .nav.child_menu > li.active > a:hover,
.left_col .nav.child_menu > li.current-page > a:hover,
.theme-dark .left_col .nav.side-menu > li.active > a:hover,
.theme-dark .left_col .nav.side-menu > li.current-page > a:hover,
.theme-dark .left_col .nav.child_menu > li.active > a:hover,
.theme-dark .left_col .nav.child_menu > li.current-page > a:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
}
.left_col .nav li.current-page,
.left_col .nav.side-menu > li.active,
.left_col .nav.side-menu > li.active-sm,
.left_col .nav.child_menu > li.active,
.left_col .nav.child_menu > li.current-page {
  background: transparent;
  background-image: none;
}
.nav-sm ul.nav.child_menu {
  border-radius: 10px;
}

/* ----- Top bar. One search field, CRM2 grey input, 10px menu button. ----- */
.nav_menu,
.theme-dark .nav_menu {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-divider);
  box-shadow: none;
}
#menu_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-top: 8px;
  border-radius: 10px;
  color: var(--crm2-navy);
  transition: background-color .3s ease, color .3s ease;
}
#menu_toggle:hover,
#menu_toggle:focus {
  background: rgba(0, 0, 0, .03);
  color: var(--crm2-primary);
  text-decoration: none;
}
.nav_menu .form-global-search,
.nav_menu .form-quick-goto-job {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav_menu .form-global-search input.form-control,
.nav_menu .form-quick-goto-job input.form-control {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  height: 42px;
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav_menu .form-global-search input.form-control:focus,
.nav_menu .form-quick-goto-job input.form-control:focus {
  border-color: var(--crm2-primary);
  box-shadow: 0 0 0 3px rgba(61, 111, 216, .15);
}
.form-global-search .icon-global-search,
.form-quick-goto-job .icon-global-search {
  color: var(--c-text-2);
}

/* ----- Cards and buttons. CRM2 box: 10px, hairline, soft shadow, .5s. ----- */
.x_panel,
.theme-dark .x_panel {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .5s ease;
}
.x_title {
  border-bottom: 1px solid var(--c-divider);
}
.x_title h2,
h4.page-title,
.phone-job-number {
  font-family: var(--font-display);
  font-weight: 500;
}
.btn {
  border-radius: 5px;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.btn:hover,
.btn:focus {
  box-shadow: 0 8px 18px -10px rgba(23, 43, 76, .35);
}
.job-action-group {
  border-radius: 10px;
  border-color: var(--c-border);
  background: var(--c-surface);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.job-action-group:hover {
  border-color: #c8d8ec;
  box-shadow: var(--shadow-1);
}
.theme-dark .btn-success,
.theme-dark .btn-primary,
.theme-dark .btn-red,
.theme-dark a.btn-success,
.theme-dark a.btn-primary {
  color: #fff;
}

/* ----- Tables. CRM2 colour headers, hover, click, soft fade.
   List tables (DataTables) use the primary header. Other tables use the lite header
   so a job form is not a wall of strong colour. Service-tier rows keep their own fill. ----- */
.right_col table.table > tbody > tr,
.right_col table.table > tbody > tr > td {
  transition: background-color .35s ease, box-shadow .35s ease;
}
.right_col table.datatable > thead > tr > th,
.right_col table.table-has-bulk-actions > thead > tr > th,
.right_col table.dataTable > thead > tr > th {
  background: var(--crm2-primary);
  color: #fff;
  border-color: transparent;
  font-weight: 500;
}
.right_col table.table:not(.datatable):not(.table-has-bulk-actions):not(.dataTable) > thead > tr > th {
  background: var(--crm2-primary-lite);
  color: var(--c-on-accent-container);
  font-weight: 600;
}
.right_col table.table > tbody > tr:hover > td,
.right_col table.table > tbody > tr:hover > th {
  background-color: var(--crm2-primary-lite);
}
.right_col table.table > tbody > tr.crm2-row-selected > td,
.right_col table.table > tbody > tr.crm2-row-selected > th {
  background-color: #c5daf8;
  box-shadow: inset 3px 0 0 var(--crm2-primary);
}
.theme-dark .right_col table.datatable > thead > tr > th,
.theme-dark .right_col table.table-has-bulk-actions > thead > tr > th,
.theme-dark .right_col table.dataTable > thead > tr > th {
  background: #234878;
  color: #fff;
}
.theme-dark .right_col table.table > tbody > tr:hover > td {
  background-color: #1a3050;
}
.theme-dark .right_col table.table > tbody > tr.crm2-row-selected > td {
  background-color: #243d5c;
  box-shadow: inset 3px 0 0 var(--c-accent);
}
/* Sort cue stays visible on a primary-colour header. */
.right_col table.datatable > thead th.ds-th[aria-sort="ascending"],
.right_col table.datatable > thead th.ds-th[aria-sort="descending"],
.right_col table.dataTable > thead th.ds-th[aria-sort="ascending"],
.right_col table.dataTable > thead th.ds-th[aria-sort="descending"],
.right_col table.table-has-bulk-actions > thead th.ds-th[aria-sort="ascending"],
.right_col table.table-has-bulk-actions > thead th.ds-th[aria-sort="descending"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 #fff;
}
.right_col table.datatable > thead th.ds-th[aria-sort="ascending"]::after,
.right_col table.dataTable > thead th.ds-th[aria-sort="ascending"]::after,
.right_col table.table-has-bulk-actions > thead th.ds-th[aria-sort="ascending"]::after {
  border-bottom-color: #fff;
}
.right_col table.datatable > thead th.ds-th[aria-sort="descending"]::after,
.right_col table.dataTable > thead th.ds-th[aria-sort="descending"]::after,
.right_col table.table-has-bulk-actions > thead th.ds-th[aria-sort="descending"]::after {
  border-top-color: #fff;
}
.right_col table.dataTable thead .sorting_asc,
.right_col table.dataTable thead .sorting_desc {
  color: #fff;
  box-shadow: inset 0 -2px 0 #fff;
}
.right_col table.dataTable thead .sorting_asc::before {
  border-bottom-color: #fff;
}
.right_col table.dataTable thead .sorting_desc::before {
  border-top-color: #fff;
}

/* Tier rows keep Emergency / Priority / Economy. Hover and click only deepen them. */
.jb-dash tr.jb-emergency:hover td { background: #f8d4d0 !important; }
.jb-dash tr.jb-priority:hover td { background: #d5e6fb !important; }
.jb-dash tr.jb-economy:hover td { background: #d4f0e0 !important; }
.jb-dash tr.jb-emergency.crm2-row-selected td { background: #f6c8c3 !important; }
.jb-dash tr.jb-priority.crm2-row-selected td { background: #c5daf8 !important; }
.jb-dash tr.jb-economy.crm2-row-selected td { background: #c3ead4 !important; }

/* CRM2 utility fills, for any table that already uses these class names. */
.bg-primary { background-color: var(--crm2-primary) !important; color: #fff; }
.bg-info { background-color: var(--crm2-info) !important; color: #fff; }
.bg-success { background-color: var(--crm2-success) !important; color: #fff; }
.bg-warning { background-color: var(--crm2-warning) !important; color: #172b4c; }
.bg-danger { background-color: var(--crm2-danger) !important; color: #fff; }
.right_col thead.bg-primary > tr > th,
.right_col thead.bg-info > tr > th,
.right_col thead.bg-success > tr > th,
.right_col thead.bg-danger > tr > th { color: #fff; }
.right_col thead.bg-warning > tr > th { color: #172b4c; }

@media (max-width: 767px) {
  /* The pack forces nowrap on phone tables. Keep job text wrapping. */
  .right_col .table > tbody > tr > td,
  .right_col .table > thead > tr > th {
    white-space: normal;
  }
}

/* In-page Icomoon icons (buttons, alerts, lists). One em, inline, so action
   rows stay the same height. Sidebar sizing is the rule above. */
.right_col i[class^="icon-"],
.right_col i[class*=" icon-"],
.nav_menu i[class^="icon-"],
.nav_menu i[class*=" icon-"],
.alert i[class^="icon-"],
.alert i[class*=" icon-"],
.btn i[class^="icon-"],
.btn i[class*=" icon-"] {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  width: auto;
  vertical-align: -0.125em;
}
.right_col i.fa-2x[class^="icon-"],
.right_col i.fa-2x[class*=" icon-"],
.nav_menu i.fa-2x[class^="icon-"],
.nav_menu i.fa-2x[class*=" icon-"] {
  font-size: 2em;
}
.right_col i.fa-3x[class^="icon-"],
.right_col i.fa-3x[class*=" icon-"] {
  font-size: 3em;
}