/* ToLogistiko theme for Perfex: two styles on the same tokens.
   body.tl-brand  = Brand (light, navy + green, like tologistiko.com)
   body.tl-modern = Modern (dark navy menu and top bar, bright accents) */

body.tl-theme {
  --tl-font: "forma-djr-greek-text", Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tl-display: "forma-djr-greek-display", "forma-djr-greek-text", Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  --tl-ink: #14213d;
  --tl-ink-soft: #4a5568;
  --tl-line: #e2e6ee;
  --tl-page: #f6f8fc;
  --tl-card: #ffffff;
  --tl-brand: #1d3f76;
  --tl-brand-hover: #163260;
  --tl-blue: #2f6bbd;
  --tl-green: #4f8f2f;
  --tl-green-lt: #e9f3e2;
  --tl-amber: #c9822a;
  --tl-thead: #f1f4fa;
  /* side menu + top bar */
  --tl-side-bg: #ffffff;
  --tl-side-line: #e2e6ee;
  --tl-side-text: #4a5568;
  --tl-side-icon: #7a8699;
  --tl-side-hover: #f1f4fa;
  --tl-side-active-bg: #e8eef8;
  --tl-side-active-text: #1d3f76;
  --tl-side-sub-bg: transparent;
  --tl-top-bg: #ffffff;
  --tl-top-text: #4a5568;
  --tl-top-search: #f1f4fa;
  --tl-top-search-text: #14213d;
  /* main button */
  --tl-primary: #1d3f76;
  --tl-primary-hover: #163260;
  --tl-primary-text: #ffffff;
  font-family: var(--tl-font);
  color: var(--tl-ink);
}

body.tl-modern {
  --tl-page: #eef1f7;
  --tl-thead: #eef1f7;
  --tl-side-bg: #0f1a30;
  --tl-side-line: #0f1a30;
  --tl-side-text: #a9b8d0;
  --tl-side-icon: #7f91b0;
  --tl-side-hover: #18264a;
  --tl-side-active-bg: #2f6bbd;
  --tl-side-active-text: #ffffff;
  --tl-side-sub-bg: #0b1426;
  --tl-top-bg: #15223d;
  --tl-top-text: #cdd6e6;
  --tl-top-search: #0f1a30;
  --tl-top-search-text: #ffffff;
  --tl-primary: #6eb445;
  --tl-primary-hover: #5ea137;
  --tl-primary-text: #0f1a30;
}

/* ---------------------------------------------------------------- base */
body.tl-theme,
body.tl-theme #wrapper,
body.tl-theme .content { background: var(--tl-page); }
body.tl-theme, body.tl-theme button, body.tl-theme input, body.tl-theme select, body.tl-theme textarea,
body.tl-theme .btn, body.tl-theme .form-control, body.tl-theme table { font-family: var(--tl-font); }
body.tl-theme h1, body.tl-theme h2, body.tl-theme h3, body.tl-theme h4,
body.tl-theme .tw-text-lg.tw-font-semibold { font-family: var(--tl-display); color: var(--tl-ink); }
/*
 * Links are blue, but a link drawn as a button keeps the button's own text colour: without the
 * exclusion this rule outranks Bootstrap's white text on red, green and blue buttons and leaves
 * blue writing on a red button. The exclusion sits inside :where(), which adds no weight, so the
 * rule is exactly as strong as it always was for every other link.
 */
body.tl-theme a:where(:not(.btn)) { color: var(--tl-blue); }
body.tl-theme a:where(:not(.btn)):hover, body.tl-theme a:where(:not(.btn)):focus { color: var(--tl-brand); }

/* ---------------------------------------------------------------- top bar */
body.tl-theme #header { background: var(--tl-top-bg); border-bottom: 1px solid var(--tl-side-line); box-shadow: none; }
body.tl-theme #header .hide-menu,
body.tl-theme #header .navbar-nav > li > a,
body.tl-theme #header .navbar-nav > li > a i,
body.tl-theme #header .navbar-nav > li > a svg,
body.tl-theme #header #top_search_button button { color: var(--tl-top-text) !important; }
body.tl-theme #header .logo-text, body.tl-theme #header .logo { color: var(--tl-top-search-text) !important; }
body.tl-theme #search_input {
  background: var(--tl-top-search) !important; color: var(--tl-top-search-text) !important;
  border: 1px solid var(--tl-side-line) !important;
}
body.tl-modern #search_input { border-color: #22335a !important; }
body.tl-modern #search_input::placeholder { color: #8fa1c0 !important; }
body.tl-modern #header .hide-menu:hover,
body.tl-modern #header .navbar-nav > li > a:hover { background: rgba(255, 255, 255, .08) !important; }
/* the round "+" quick-create button */
body.tl-theme #header li.icon > a > span.tw-rounded-full { background: var(--tl-primary) !important; }
body.tl-theme #header li.icon > a > span.tw-rounded-full i { color: var(--tl-primary-text) !important; }
body.tl-theme .tl-theme-switch > a { display: inline-flex; align-items: center; justify-content: center; height: 36px; width: 38px; margin-top: 10px; border-radius: 8px; }
body.tl-brand .tl-theme-switch > a:hover { background: var(--tl-side-hover); }

/* ---------------------------------------------------------------- side menu */
body.tl-theme aside#menu, body.tl-theme .sidebar {
  background: var(--tl-side-bg) !important; border-right: 1px solid var(--tl-side-line);
}
/*
 * Perfex pins the menu panel to the top and the bottom of the page and sizes it to the page once,
 * when the page loads. Opening Sales on a short page then makes the menu taller than its panel, and
 * the last rows (Utilities, Reports, Setup) hang below it on the light page. Unpinned at the
 * bottom, the panel grows with what is open, and Perfex's own min-height still stretches it to the
 * full page when the page is the longer of the two.
 */
body.tl-theme aside#menu { bottom: auto; }
body.tl-theme #side-menu > li > a {
  color: var(--tl-side-text) !important; border-radius: 9px; margin: 1px 10px; font-weight: 500;
}
body.tl-theme #side-menu > li > a .menu-icon { color: var(--tl-side-icon) !important; }
body.tl-theme #side-menu > li > a:hover,
body.tl-theme #side-menu > li > a:focus { background: var(--tl-side-hover) !important; color: var(--tl-side-active-text) !important; }
body.tl-brand #side-menu > li > a:hover { color: var(--tl-brand) !important; }
body.tl-theme #side-menu > li.active > a {
  background: var(--tl-side-active-bg) !important; color: var(--tl-side-active-text) !important; font-weight: 600;
  box-shadow: none !important; border: 0 !important;
}
body.tl-theme #side-menu > li.active > a .menu-icon { color: var(--tl-side-active-text) !important; }
body.tl-theme #side-menu .nav-second-level { background: var(--tl-side-sub-bg) !important; margin: 2px 10px; border-radius: 9px; }
body.tl-theme #side-menu .nav-second-level li a { color: var(--tl-side-text) !important; background: transparent !important; }
body.tl-theme #side-menu .nav-second-level li a:hover { color: var(--tl-side-active-text) !important; }
body.tl-brand #side-menu .nav-second-level li a:hover { color: var(--tl-brand) !important; }
body.tl-theme #side-menu .nav-second-level li.active a { color: var(--tl-side-active-text) !important; font-weight: 600; }
body.tl-brand #side-menu .nav-second-level li.active a { color: var(--tl-brand) !important; }
body.tl-modern #side-menu .nav-second-level li.active a { color: #ffffff !important; }
body.tl-modern #side-menu .nav-second-level li.active a::before { background: #6eb445 !important; }
body.tl-modern #side-menu .badge, body.tl-modern #side-menu .label { border: 0; }

/*
 * The Setup panel. It shares the "sidebar" class, so the rule above paints it like the side menu,
 * but its title and rows kept Perfex's own dark text: in the Modern look that is dark grey on dark
 * blue, close to unreadable. It gets the same colours as the side menu, in both looks.
 */
body.tl-theme #setup-menu .customizer-heading { color: var(--tl-side-active-text) !important; }
body.tl-theme #setup-menu .close-customizer { color: var(--tl-side-icon) !important; }
body.tl-theme #setup-menu .close-customizer:hover,
body.tl-theme #setup-menu .close-customizer:focus { background: var(--tl-side-hover) !important; color: var(--tl-side-active-text) !important; }
body.tl-theme #setup-menu > li > a {
  color: var(--tl-side-text) !important; border-radius: 9px; margin: 1px 10px; font-weight: 500;
}
body.tl-theme #setup-menu > li > a:hover,
body.tl-theme #setup-menu > li > a:focus { background: var(--tl-side-hover) !important; color: var(--tl-side-active-text) !important; }
body.tl-brand #setup-menu > li > a:hover { color: var(--tl-brand) !important; }
body.tl-theme #setup-menu > li.active > a {
  background: var(--tl-side-active-bg) !important; color: var(--tl-side-active-text) !important; font-weight: 600;
}
body.tl-theme #setup-menu .nav-second-level { background: var(--tl-side-sub-bg) !important; margin: 2px 10px; border-radius: 9px; }
body.tl-theme #setup-menu .nav-second-level li a { color: var(--tl-side-text) !important; background: transparent !important; }
body.tl-theme #setup-menu .nav-second-level li a:hover { color: var(--tl-side-active-text) !important; }
body.tl-brand #setup-menu .nav-second-level li a:hover { color: var(--tl-brand) !important; }
body.tl-theme #setup-menu .nav-second-level li.active a { color: var(--tl-side-active-text) !important; font-weight: 600; }
body.tl-modern #setup-menu .badge, body.tl-modern #setup-menu .label { border: 0; }

/* the user box at the top of the menu */
body.tl-theme .sidebar-user-profile > a.profile {
  border-color: var(--tl-side-line) !important; background: var(--tl-card) !important; color: var(--tl-ink) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
body.tl-modern .sidebar-user-profile > a.profile { background: #16233f !important; border-color: #22335a !important; color: #ffffff !important; }
body.tl-modern .sidebar-user-profile > a.profile .tw-text-neutral-500 { color: #8fa1c0 !important; }

/* ---------------------------------------------------------------- cards, tables */
body.tl-theme .panel_s, body.tl-theme .panel_s .panel-body {
  border-radius: 12px; border-color: var(--tl-line) !important; box-shadow: none !important;
}
body.tl-theme .panel_s { border: 1px solid var(--tl-line); overflow: visible; }
body.tl-theme .panel_s .panel-body { border: 0; }
body.tl-theme table.dataTable thead th, body.tl-theme .table thead th {
  background: var(--tl-thead) !important; color: var(--tl-ink) !important; font-weight: 600;
  border-bottom: 1px solid var(--tl-line) !important;
}
body.tl-theme .table > tbody > tr > td { border-color: var(--tl-line); }
body.tl-theme .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
body.tl-theme .form-control, body.tl-theme .bootstrap-select .dropdown-toggle {
  border-radius: 8px !important; border-color: #d5dbe6 !important;
}
body.tl-theme .form-control:focus { border-color: var(--tl-blue) !important; box-shadow: 0 0 0 3px rgba(47, 107, 189, .15) !important; }

/* ---------------------------------------------------------------- buttons */
body.tl-theme .btn { border-radius: 8px; font-weight: 600; }
body.tl-theme .btn-primary,
body.tl-theme .btn-primary:focus {
  background: var(--tl-primary) !important; border-color: var(--tl-primary) !important; color: var(--tl-primary-text) !important;
}
body.tl-theme .btn-primary:hover, body.tl-theme .btn-primary:active {
  background: var(--tl-primary-hover) !important; border-color: var(--tl-primary-hover) !important; color: var(--tl-primary-text) !important;
}
body.tl-theme .btn-success { background: var(--tl-green) !important; border-color: var(--tl-green) !important; color: #fff !important; }
body.tl-theme .btn-info { background: var(--tl-blue) !important; border-color: var(--tl-blue) !important; color: #fff !important; }
body.tl-theme .btn-default { border-color: #d5dbe6; color: var(--tl-ink); }
body.tl-theme .label-success, body.tl-theme .text-success { color: var(--tl-green) !important; }
body.tl-theme .label-success { border-color: #b9d9a5 !important; background: var(--tl-green-lt) !important; }
body.tl-theme .pagination > .active > a, body.tl-theme .pagination > .active > a:hover {
  background: var(--tl-brand) !important; border-color: var(--tl-brand) !important; color: #fff !important;
}
body.tl-modern .pagination > .active > a { background: var(--tl-blue) !important; border-color: var(--tl-blue) !important; }
body.tl-theme .nav-tabs > li.active > a, body.tl-theme .nav-tabs > li.active > a:hover { color: var(--tl-brand) !important; border-bottom-color: var(--tl-brand) !important; }
body.tl-theme .checkbox-primary input[type="checkbox"]:checked + label::before,
body.tl-theme .radio-primary input[type="radio"]:checked + label::after { background-color: var(--tl-brand); border-color: var(--tl-brand); }

/* ---------------------------------------------------------------- login page */
body.tl-theme.login_admin, body.tl-theme.authentication { background: var(--tl-page) !important; }
body.tl-modern.login_admin, body.tl-modern.authentication { background: #0f1a30 !important; }
body.tl-modern.login_admin .company-logo, body.tl-modern.authentication h1 { color: #ffffff; }

/* ---------------------------------------------------------------- customer portal */
body.tl-portal { background: #f6f8fc; }
body.tl-portal .navbar-default, body.tl-portal .navbar { background: #ffffff; border-color: var(--tl-line); }
body.tl-portal .btn-primary, body.tl-portal .btn-info { background: #1d3f76 !important; border-color: #1d3f76 !important; color: #fff !important; }
body.tl-portal .panel_s { border-radius: 12px; }
body.tl-modern .tl-theme-switch > a i { color: #ffd166 !important; }
/* Perfex's own "primary" utility colours follow the style too */
body.tl-theme .tw-bg-primary-600, body.tl-theme .tw-bg-primary-500 { background-color: var(--tl-primary) !important; color: var(--tl-primary-text) !important; }
body.tl-theme .hover\:tw-bg-primary-700:hover, body.tl-theme .group:hover .group-hover\:\!tw-bg-primary-700 { background-color: var(--tl-primary-hover) !important; }
body.tl-portal .tw-bg-primary-600, body.tl-portal .tw-bg-primary-500 { background-color: #1d3f76 !important; color: #fff !important; }
body.tl-portal .navbar a.btn-primary, body.tl-portal .navbar .btn-primary { background: #1d3f76 !important; border-color: #1d3f76 !important; color: #fff !important; }
body.tl-portal .navbar-nav > li.active > a, body.tl-portal .navbar-nav > li.customers-nav-item-login > a { background: #1d3f76 !important; color: #fff !important; border-radius: 8px; }