/* ==========================================================================
   Octopusta ERP — Design System
   Loaded last; deliberately overrides the legacy AdminLTE 2 / Bootstrap 3 skin.
   Scope: body.octopusta (added in the layouts) so it beats the .skin-* rules.
   ========================================================================== */

:root {
  /* Brand */
  --oct-primary:        #6C4CF1;
  --oct-primary-600:    #5B3BE0;
  --oct-primary-700:    #4A2FC4;
  --oct-primary-100:    #EAE4FF;
  --oct-primary-50:     #F4F1FF;
  --oct-accent:         #00D8C0;
  --oct-accent-600:     #00B7A3;
  --oct-accent-50:      #E4FBF7;

  /* Neutrals */
  --oct-ink:            #0E1220;
  --oct-ink-2:          #161C30;
  --oct-ink-3:          #1F2740;
  --oct-bg:             #F4F5FA;
  --oct-surface:        #FFFFFF;
  --oct-text:           #1B2033;
  --oct-text-2:         #414A66;
  --oct-muted:          #6B7391;
  --oct-border:         #E6E9F2;
  --oct-border-strong:  #D4D9E8;

  /* Semantic */
  --oct-success:        #12B981;
  --oct-success-50:     #E4F8F1;
  --oct-warning:        #F5A524;
  --oct-warning-50:     #FEF3E2;
  --oct-danger:         #F04770;
  --oct-danger-50:      #FDE8EE;
  --oct-info:           #3AA0FF;
  --oct-info-50:        #E7F2FF;

  /* Typography — Latin and Arabic are separate families; the browser picks
     per glyph from the stack, so one declaration serves both scripts. */
  --oct-font-latin: 'Tajawal', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --oct-font-arabic: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --oct-font: 'Tajawal', 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --oct-font-num: 'Tajawal', 'Plus Jakarta Sans', sans-serif;

  /* Shape */
  --oct-r-sm: 8px;
  --oct-r:    12px;
  --oct-r-lg: 16px;
  --oct-r-xl: 22px;

  /* Elevation */
  --oct-sh-1: 0 1px 2px rgba(16, 20, 38, .05), 0 1px 3px rgba(16, 20, 38, .04);
  --oct-sh-2: 0 2px 6px rgba(16, 20, 38, .06), 0 8px 24px rgba(16, 20, 38, .06);
  --oct-sh-3: 0 8px 20px rgba(16, 20, 38, .09), 0 24px 48px rgba(16, 20, 38, .10);
  --oct-ring: 0 0 0 3px rgba(108, 76, 241, .18);

  --oct-grad: linear-gradient(135deg, #7C5CFF 0%, #6C4CF1 45%, #00D8C0 160%);
}

/* Arabic pages lead with the Arabic family so shared glyphs (digits,
   punctuation) come from it and the line rhythm stays consistent. */
html[dir="rtl"], html[lang^="ar"] {
  --oct-font: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
  --oct-font-num: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body.octopusta,
body.octopusta .content-wrapper,
body.octopusta .right-side {
  background-color: var(--oct-bg);
  color: var(--oct-text);
  font-family: var(--oct-font);
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.octopusta h1, body.octopusta h2, body.octopusta h3,
body.octopusta h4, body.octopusta h5, body.octopusta h6,
body.octopusta .box-title {
  font-family: var(--oct-font);
  font-weight: 700;
  color: var(--oct-text);
  letter-spacing: -.011em;
}
body.octopusta a { color: var(--oct-primary); text-decoration: none; }
body.octopusta a:hover, body.octopusta a:focus { color: var(--oct-primary-700); text-decoration: none; }
body.octopusta ::selection { background: var(--oct-primary-100); color: var(--oct-primary-700); }

/* Scrollbars */
body.octopusta ::-webkit-scrollbar { width: 10px; height: 10px; }
body.octopusta ::-webkit-scrollbar-track { background: transparent; }
body.octopusta ::-webkit-scrollbar-thumb { background: #C6CBDD; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
body.octopusta ::-webkit-scrollbar-thumb:hover { background: #A9B0C9; background-clip: content-box; }

/* --------------------------------------------------------------------------
   2. Header / top navbar
   -------------------------------------------------------------------------- */
body.octopusta .main-header .navbar,
body.octopusta .main-header > .navbar {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--oct-border);
  box-shadow: 0 1px 2px rgba(16, 20, 38, .04);
  min-height: 62px;
}
body.octopusta .main-header .logo {
  background: var(--oct-ink) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--oct-font);
  font-weight: 800;
  letter-spacing: -.02em;
  height: 62px;
  line-height: 62px;
  font-size: 18px;
  transition: none;
}
body.octopusta .main-header .logo:hover { background: var(--oct-ink) !important; }
body.octopusta .main-header .logo .oct-brand {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 62px; overflow: hidden;
}
body.octopusta .main-header .logo .oct-brand img { height: 30px; width: auto; margin: 0; padding: 0; flex: none; }
body.octopusta .main-header .logo .oct-brand-name {
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Do NOT force .logo-mini visible: AdminLTE hides it until the sidebar collapses,
   and showing both marks pushes the wordmark out of the clipped logo box. */
body.octopusta .main-header .logo .logo-mini { align-items: center; justify-content: center; }
body.octopusta.sidebar-collapse .main-header .logo > .logo-mini { display: flex; }
body.octopusta .main-header .logo .logo-mini img { height: 30px; margin: 0; padding: 0; }
body.octopusta .main-header .navbar .sidebar-toggle {
  color: var(--oct-text-2) !important;
  padding: 20px 16px;
  font-size: 17px;
}
body.octopusta .main-header .navbar .sidebar-toggle:hover {
  background: var(--oct-primary-50) !important;
  color: var(--oct-primary) !important;
}
body.octopusta .main-header .navbar .nav > li > a {
  color: var(--oct-text-2) !important;
  font-weight: 600;
  padding: 20px 14px;
}
body.octopusta .main-header .navbar .nav > li > a:hover,
body.octopusta .main-header .navbar .nav > li > a:focus,
body.octopusta .main-header .navbar .nav .open > a {
  background: var(--oct-primary-50) !important;
  color: var(--oct-primary) !important;
}
body.octopusta .main-header .navbar .navbar-custom-menu .btn { border-radius: var(--oct-r-sm); }
body.octopusta .main-header .navbar .label-warning,
body.octopusta .main-header .navbar .label-success,
body.octopusta .main-header .navbar .label-danger { border-radius: 999px; }
body.octopusta #online_indicator { color: var(--oct-accent) !important; }

/* Dropdowns */
body.octopusta .dropdown-menu {
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  box-shadow: var(--oct-sh-3);
  padding: 6px;
  margin-top: 8px;
}
body.octopusta .dropdown-menu > li > a {
  border-radius: var(--oct-r-sm);
  padding: 9px 12px;
  font-weight: 500;
  color: var(--oct-text-2);
}
body.octopusta .dropdown-menu > li > a:hover,
body.octopusta .dropdown-menu > li > a:focus {
  background: var(--oct-primary-50);
  color: var(--oct-primary);
}
body.octopusta .dropdown-menu > .divider { background: var(--oct-border); margin: 6px 4px; }

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */
body.octopusta .main-sidebar,
body.octopusta .left-side {
  background: linear-gradient(180deg, var(--oct-ink) 0%, var(--oct-ink-2) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
body.octopusta .sidebar { padding-bottom: 24px; }
body.octopusta .sidebar-menu > li > a {
  color: #A9B1CC !important;
  font-weight: 600;
  font-size: 13.5px;
  border-left: 0 !important;
  border-radius: 10px;
  margin: 2px 10px;
  padding: 11px 14px;
  transition: background .16s ease, color .16s ease;
}
body.octopusta .sidebar-menu > li > a > .fa,
body.octopusta .sidebar-menu > li > a > .fas,
body.octopusta .sidebar-menu > li > a > .far,
body.octopusta .sidebar-menu > li > a > i {
  width: 22px;
  color: #7B85A6;
  transition: color .16s ease;
}
body.octopusta .sidebar-menu > li:hover > a,
body.octopusta .sidebar-menu > li.active > a,
body.octopusta .sidebar-menu > li.menu-open > a {
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
}
body.octopusta .sidebar-menu > li:hover > a > i,
body.octopusta .sidebar-menu > li.menu-open > a > i { color: #CFD5EA; }
body.octopusta .sidebar-menu > li.active > a {
  background: var(--oct-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(108, 76, 241, .35);
}
body.octopusta .sidebar-menu > li.active > a > i { color: #fff; }
body.octopusta .sidebar-menu > li > a > .pull-right-container > .fa-angle-left { color: #6D779B; }
body.octopusta .sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, .22) !important;
  border-radius: 10px;
  margin: 2px 10px 6px;
  padding: 6px;
}
body.octopusta .sidebar-menu .treeview-menu > li > a {
  color: #98A1BE !important;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 12px;
}
body.octopusta .sidebar-menu .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
body.octopusta .sidebar-menu .treeview-menu > li.active > a {
  background: rgba(108, 76, 241, .28) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--oct-accent);
}
body.octopusta .sidebar-menu li.header {
  background: transparent !important;
  color: #5D6684 !important;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 18px 24px 8px;
}
body.octopusta .sidebar-form,
body.octopusta .sidebar-form .form-control {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
  color: #E4E8F5 !important;
  box-shadow: none;
}
body.octopusta .sidebar-form .btn { background: transparent !important; color: #98A1BE !important; border: 0; }
body.octopusta .user-panel > .info,
body.octopusta .user-panel > .info > a { color: #E4E8F5 !important; font-weight: 600; }

/* Collapsed sidebar keeps the rounded look sane */
body.octopusta.sidebar-collapse .sidebar-menu > li > a { margin: 2px 6px; }

/* --------------------------------------------------------------------------
   4. Content shell
   -------------------------------------------------------------------------- */
body.octopusta .content-header {
  background: transparent;
  padding: 24px 24px 4px;
}
body.octopusta .content-header > h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
body.octopusta .content-header > h1 > small {
  color: var(--oct-muted);
  font-weight: 500;
  font-size: 14px;
}
body.octopusta .content { padding: 16px 24px 28px; }
body.octopusta .breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  top: 26px;
  right: 24px;
}
body.octopusta .breadcrumb > li > a { color: var(--oct-muted); }
body.octopusta .breadcrumb > .active { color: var(--oct-text); }

/* --------------------------------------------------------------------------
   5. Boxes / cards
   -------------------------------------------------------------------------- */
body.octopusta .box {
  background: var(--oct-surface);
  border: 1px solid var(--oct-border);
  border-top: 1px solid var(--oct-border);
  border-radius: var(--oct-r-lg);
  box-shadow: var(--oct-sh-1);
  margin-bottom: 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.octopusta .box:hover { box-shadow: var(--oct-sh-2); }
body.octopusta .box.box-primary,
body.octopusta .box.box-info,
body.octopusta .box.box-success,
body.octopusta .box.box-warning,
body.octopusta .box.box-danger,
body.octopusta .box.box-default { border-top-width: 1px; }
body.octopusta .box.box-primary { border-top: 3px solid var(--oct-primary); }
body.octopusta .box.box-info    { border-top: 3px solid var(--oct-info); }
body.octopusta .box.box-success { border-top: 3px solid var(--oct-success); }
body.octopusta .box.box-warning { border-top: 3px solid var(--oct-warning); }
body.octopusta .box.box-danger  { border-top: 3px solid var(--oct-danger); }
body.octopusta .box-header {
  border-bottom: 1px solid var(--oct-border);
  padding: 16px 20px;
  border-radius: var(--oct-r-lg) var(--oct-r-lg) 0 0;
}
body.octopusta .box-header.with-border { border-bottom: 1px solid var(--oct-border); }
body.octopusta .box-header > .box-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.octopusta .box-header > .box-tools .btn-box-tool { color: var(--oct-muted); }
body.octopusta .box-header > .box-tools .btn-box-tool:hover { color: var(--oct-primary); }
body.octopusta .box-body { padding: 20px; }
body.octopusta .box-footer {
  background: #FBFBFE;
  border-top: 1px solid var(--oct-border);
  border-radius: 0 0 var(--oct-r-lg) var(--oct-r-lg);
  padding: 14px 20px;
}
body.octopusta .box.box-solid > .box-header { color: #fff; border-radius: var(--oct-r-lg) var(--oct-r-lg) 0 0; }
body.octopusta .box.box-solid.box-primary > .box-header { background: var(--oct-grad); }
body.octopusta .box.box-solid.box-info    > .box-header { background: var(--oct-info); }
body.octopusta .box.box-solid.box-success > .box-header { background: var(--oct-success); }
body.octopusta .box.box-solid.box-warning > .box-header { background: var(--oct-warning); }
body.octopusta .box.box-solid.box-danger  > .box-header { background: var(--oct-danger); }
body.octopusta .box.box-solid > .box-header > .box-title { color: #fff; }
body.octopusta .box.box-solid { border: 1px solid var(--oct-border); }

/* Nav-tab boxes */
body.octopusta .nav-tabs-custom {
  border-radius: var(--oct-r-lg);
  box-shadow: var(--oct-sh-1);
  border: 1px solid var(--oct-border);
  overflow: hidden;
}
body.octopusta .nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--oct-border); padding: 0 8px; }
body.octopusta .nav-tabs-custom > .nav-tabs > li { margin: 0; border-top: 0; }
body.octopusta .nav-tabs-custom > .nav-tabs > li > a {
  border: 0 !important;
  color: var(--oct-muted);
  font-weight: 600;
  padding: 15px 16px;
  border-radius: 0;
}
body.octopusta .nav-tabs-custom > .nav-tabs > li.active > a,
body.octopusta .nav-tabs-custom > .nav-tabs > li > a:hover { color: var(--oct-primary); }
body.octopusta .nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: transparent;
  box-shadow: inset 0 -2.5px 0 var(--oct-primary);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
body.octopusta .btn {
  border-radius: var(--oct-r-sm);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
body.octopusta .btn:active { transform: translateY(1px); }
body.octopusta .btn:focus, body.octopusta .btn.focus { outline: none; box-shadow: var(--oct-ring); }
body.octopusta .btn.btn-flat { border-radius: var(--oct-r-sm); }
body.octopusta .btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--oct-r); }
body.octopusta .btn-sm { padding: 6px 12px; font-size: 12.5px; }
body.octopusta .btn-xs { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }

body.octopusta .btn-primary {
  background: var(--oct-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(108, 76, 241, .28);
}
body.octopusta .btn-primary:hover, body.octopusta .btn-primary:focus,
body.octopusta .btn-primary:active, body.octopusta .btn-primary.active {
  background: var(--oct-grad); filter: brightness(1.06);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(108, 76, 241, .38);
}
body.octopusta .btn-success { background: var(--oct-success); color: #fff; box-shadow: 0 4px 14px rgba(18, 185, 129, .24); }
body.octopusta .btn-success:hover, body.octopusta .btn-success:focus, body.octopusta .btn-success:active { background: #0FA271; color: #fff; }
body.octopusta .btn-info { background: var(--oct-info); color: #fff; box-shadow: 0 4px 14px rgba(58, 160, 255, .24); }
body.octopusta .btn-info:hover, body.octopusta .btn-info:focus, body.octopusta .btn-info:active { background: #1E8BF0; color: #fff; }
body.octopusta .btn-warning { background: var(--oct-warning); color: #fff; box-shadow: 0 4px 14px rgba(245, 165, 36, .24); }
body.octopusta .btn-warning:hover, body.octopusta .btn-warning:focus, body.octopusta .btn-warning:active { background: #DE9314; color: #fff; }
body.octopusta .btn-danger { background: var(--oct-danger); color: #fff; box-shadow: 0 4px 14px rgba(240, 71, 112, .24); }
body.octopusta .btn-danger:hover, body.octopusta .btn-danger:focus, body.octopusta .btn-danger:active { background: #DA3560; color: #fff; }
body.octopusta .btn-default {
  background: var(--oct-surface); color: var(--oct-text-2);
  border-color: var(--oct-border-strong); box-shadow: var(--oct-sh-1);
}
body.octopusta .btn-default:hover, body.octopusta .btn-default:focus, body.octopusta .btn-default:active {
  background: #F7F8FC; color: var(--oct-text); border-color: var(--oct-border-strong);
}
body.octopusta .bg-maroon, body.octopusta .btn.bg-maroon {
  background: var(--oct-accent-600) !important; color: #fff !important;
}
body.octopusta .bg-purple, body.octopusta .btn.bg-purple { background: var(--oct-primary) !important; color: #fff !important; }
body.octopusta .btn-group > .btn:first-child:not(:last-child) { border-radius: var(--oct-r-sm) 0 0 var(--oct-r-sm); }
body.octopusta .btn-group > .btn:last-child:not(:first-child) { border-radius: 0 var(--oct-r-sm) var(--oct-r-sm) 0; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
body.octopusta label { font-weight: 600; font-size: 13px; color: var(--oct-text-2); margin-bottom: 6px; }
body.octopusta .form-control {
  border: 1px solid var(--oct-border-strong);
  border-radius: var(--oct-r-sm);
  box-shadow: none;
  color: var(--oct-text);
  font-size: 13.5px;
  height: 38px;
  padding: 8px 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.octopusta textarea.form-control { height: auto; }
body.octopusta .form-control:focus {
  border-color: var(--oct-primary);
  box-shadow: var(--oct-ring);
}
body.octopusta .form-control::placeholder { color: #9AA2BC; }
body.octopusta .input-group-addon {
  background: #F5F6FB;
  border: 1px solid var(--oct-border-strong);
  color: var(--oct-muted);
  border-radius: var(--oct-r-sm);
  font-size: 13px;
}
body.octopusta .input-group .form-control:first-child,
body.octopusta .input-group-addon:first-child { border-radius: var(--oct-r-sm) 0 0 var(--oct-r-sm); }
body.octopusta .input-group .form-control:last-child,
body.octopusta .input-group-addon:last-child { border-radius: 0 var(--oct-r-sm) var(--oct-r-sm) 0; }
body.octopusta .has-error .form-control { border-color: var(--oct-danger); }
body.octopusta .has-error .help-block, body.octopusta .has-error .control-label { color: var(--oct-danger); }
body.octopusta .form-group { margin-bottom: 18px; }

/* select2 */
body.octopusta .select2-container--default .select2-selection--single,
body.octopusta .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--oct-border-strong) !important;
  border-radius: var(--oct-r-sm) !important;
  min-height: 38px;
}
body.octopusta .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px; color: var(--oct-text); font-size: 13.5px;
}
body.octopusta .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
body.octopusta .select2-container--default.select2-container--focus .select2-selection--multiple,
body.octopusta .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--oct-primary) !important;
  box-shadow: var(--oct-ring);
}
body.octopusta .select2-dropdown {
  border: 1px solid var(--oct-border) !important;
  border-radius: var(--oct-r) !important;
  box-shadow: var(--oct-sh-3);
  overflow: hidden;
}
body.octopusta .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--oct-primary) !important;
}
body.octopusta .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--oct-primary-50); border: 1px solid var(--oct-primary-100);
  color: var(--oct-primary-700); border-radius: 6px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Tables / DataTables
   -------------------------------------------------------------------------- */
body.octopusta .table { color: var(--oct-text-2); font-size: 13.5px; }
body.octopusta .table > thead > tr > th {
  background: #F7F8FC;
  border-bottom: 1px solid var(--oct-border) !important;
  border-top: 0;
  color: var(--oct-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 14px;
  white-space: nowrap;
}
body.octopusta .table > tbody > tr > td {
  border-top: 1px solid var(--oct-border);
  padding: 12px 14px;
  vertical-align: middle;
}
body.octopusta .table-hover > tbody > tr:hover { background: var(--oct-primary-50); }
body.octopusta .table-striped > tbody > tr:nth-of-type(odd) { background: #FBFBFE; }
body.octopusta .table-bordered, body.octopusta .table-bordered > tbody > tr > td,
body.octopusta .table-bordered > thead > tr > th { border-color: var(--oct-border); }
body.octopusta .table > tfoot > tr > th, body.octopusta .table > tfoot > tr > td {
  background: #F7F8FC; border-top: 1px solid var(--oct-border); font-weight: 700; color: var(--oct-text);
}
body.octopusta .dataTables_wrapper .dataTables_filter input,
body.octopusta .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--oct-border-strong); border-radius: var(--oct-r-sm); padding: 6px 10px;
}
body.octopusta .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--oct-r-sm) !important; border: 1px solid transparent !important;
  color: var(--oct-text-2) !important; font-weight: 600;
}
body.octopusta .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.octopusta .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--oct-grad) !important; color: #fff !important; border-color: transparent !important;
}
body.octopusta .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--oct-primary-50) !important; color: var(--oct-primary) !important; border-color: transparent !important;
}
body.octopusta .pagination > li > a, body.octopusta .pagination > li > span {
  border: 1px solid var(--oct-border); color: var(--oct-text-2); margin: 0 3px; border-radius: var(--oct-r-sm) !important;
  font-weight: 600;
}
body.octopusta .pagination > .active > a, body.octopusta .pagination > .active > span,
body.octopusta .pagination > .active > a:hover {
  background: var(--oct-grad); border-color: transparent; color: #fff;
}

/* --------------------------------------------------------------------------
   9. Stat widgets
   -------------------------------------------------------------------------- */
body.octopusta .small-box {
  border-radius: var(--oct-r-lg);
  box-shadow: var(--oct-sh-2);
  overflow: hidden;
  border: 0;
  position: relative;
}
body.octopusta .small-box > .inner { padding: 20px 22px; }
body.octopusta .small-box h3 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
body.octopusta .small-box p { font-weight: 600; opacity: .92; }
body.octopusta .small-box .icon { opacity: .18; top: 6px; }
body.octopusta .small-box > .small-box-footer { background: rgba(0, 0, 0, .12); font-weight: 600; }
body.octopusta .small-box.bg-aqua   { background: linear-gradient(135deg, #00D8C0, #009F9A) !important; }
body.octopusta .small-box.bg-green  { background: linear-gradient(135deg, #2BD9A0, #0E9C6C) !important; }
body.octopusta .small-box.bg-yellow { background: linear-gradient(135deg, #FFC24B, #E58A0B) !important; }
body.octopusta .small-box.bg-red    { background: linear-gradient(135deg, #FF6E92, #D62E58) !important; }
body.octopusta .small-box.bg-blue   { background: linear-gradient(135deg, #5AB0FF, #2273D8) !important; }
body.octopusta .small-box.bg-purple { background: linear-gradient(135deg, #8C6BFF, #5B3BE0) !important; }

body.octopusta .info-box {
  border-radius: var(--oct-r-lg);
  box-shadow: var(--oct-sh-1);
  background: var(--oct-surface);
  border: 1px solid var(--oct-border);
  min-height: 92px;
}
body.octopusta .info-box-icon { border-radius: var(--oct-r-lg) 0 0 var(--oct-r-lg); height: 92px; line-height: 92px; width: 92px; }
body.octopusta .info-box-content { padding: 18px 10px; }
body.octopusta .info-box-number { font-size: 22px; font-weight: 800; color: var(--oct-text); }
body.octopusta .info-box-text { color: var(--oct-muted); font-weight: 600; text-transform: none; font-size: 13px; }

/* Colour helper classes used across the app */
body.octopusta .bg-aqua, body.octopusta .bg-light-blue { background-color: var(--oct-accent) !important; }
body.octopusta .bg-green { background-color: var(--oct-success) !important; }
body.octopusta .bg-yellow, body.octopusta .bg-orange { background-color: var(--oct-warning) !important; }
body.octopusta .bg-red { background-color: var(--oct-danger) !important; }
body.octopusta .bg-blue { background-color: var(--oct-info) !important; }
body.octopusta .text-aqua, body.octopusta .text-light-blue { color: var(--oct-accent-600) !important; }
body.octopusta .text-green { color: var(--oct-success) !important; }
body.octopusta .text-yellow { color: var(--oct-warning) !important; }
body.octopusta .text-red { color: var(--oct-danger) !important; }
body.octopusta .text-blue { color: var(--oct-info) !important; }
body.octopusta .text-purple { color: var(--oct-primary) !important; }
body.octopusta .text-muted { color: var(--oct-muted) !important; }

/* --------------------------------------------------------------------------
   10. Labels / badges / alerts / modals
   -------------------------------------------------------------------------- */
body.octopusta .label, body.octopusta .badge {
  border-radius: 999px; font-weight: 700; font-size: 11px; padding: 4px 10px; letter-spacing: .01em;
}
body.octopusta .label-primary { background: var(--oct-primary-100); color: var(--oct-primary-700); }
body.octopusta .label-success { background: var(--oct-success-50); color: #0B7C57; }
body.octopusta .label-warning { background: var(--oct-warning-50); color: #A76A05; }
body.octopusta .label-danger  { background: var(--oct-danger-50); color: #B92048; }
body.octopusta .label-info    { background: var(--oct-info-50); color: #1B6FBF; }
body.octopusta .label-default { background: #EEF0F7; color: var(--oct-text-2); }
body.octopusta .badge { background: var(--oct-primary); }

body.octopusta .alert {
  border: 1px solid transparent; border-radius: var(--oct-r); padding: 14px 18px; font-weight: 500;
}
body.octopusta .alert-success { background: var(--oct-success-50); border-color: #B7E9D6; color: #0B7C57; }
body.octopusta .alert-info    { background: var(--oct-info-50); border-color: #BEDCFB; color: #1B6FBF; }
body.octopusta .alert-warning { background: var(--oct-warning-50); border-color: #F7DCA9; color: #A76A05; }
body.octopusta .alert-danger, body.octopusta .alert-error { background: var(--oct-danger-50); border-color: #F8C3D1; color: #B92048; }

body.octopusta .modal-content {
  border: 0; border-radius: var(--oct-r-xl); box-shadow: var(--oct-sh-3); overflow: hidden;
}
body.octopusta .modal-header {
  border-bottom: 1px solid var(--oct-border); padding: 18px 24px; background: var(--oct-surface);
}
body.octopusta .modal-header .modal-title { font-size: 17px; font-weight: 800; }
body.octopusta .modal-body { padding: 24px; }
body.octopusta .modal-footer { border-top: 1px solid var(--oct-border); padding: 16px 24px; background: #FBFBFE; }
body.octopusta .modal-backdrop.in { opacity: .45; background: #0B0F1A; }

body.octopusta .popover, body.octopusta .tooltip-inner {
  border-radius: var(--oct-r); box-shadow: var(--oct-sh-3); border-color: var(--oct-border);
}
body.octopusta .tooltip-inner { background: var(--oct-ink); padding: 7px 11px; font-weight: 500; }

/* toastr */
body.octopusta #toast-container > div {
  border-radius: var(--oct-r); box-shadow: var(--oct-sh-3); opacity: 1; padding: 16px 18px 16px 52px; font-weight: 600;
}
body.octopusta #toast-container > .toast-success { background-color: var(--oct-success); }
body.octopusta #toast-container > .toast-error   { background-color: var(--oct-danger); }
body.octopusta #toast-container > .toast-info    { background-color: var(--oct-info); }
body.octopusta #toast-container > .toast-warning { background-color: var(--oct-warning); }

/* Progress / misc */
body.octopusta .progress { border-radius: 999px; background: #EDEFF7; box-shadow: none; height: 8px; }
body.octopusta .progress-bar { background: var(--oct-grad); border-radius: 999px; box-shadow: none; }
body.octopusta hr { border-top-color: var(--oct-border); }
body.octopusta .page-header { border-bottom: 1px solid var(--oct-border); }
body.octopusta .well { background: #F7F8FC; border: 1px solid var(--oct-border); border-radius: var(--oct-r); box-shadow: none; }
body.octopusta .list-group-item { border-color: var(--oct-border); }
body.octopusta .list-group-item:first-child { border-radius: var(--oct-r) var(--oct-r) 0 0; }
body.octopusta .list-group-item:last-child { border-radius: 0 0 var(--oct-r) var(--oct-r); }
body.octopusta .pace .pace-progress { background: var(--oct-accent); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
body.octopusta .main-footer {
  background: var(--oct-surface);
  border-top: 1px solid var(--oct-border);
  color: var(--oct-muted);
  font-size: 12.5px;
  padding: 14px 24px;
}
body.octopusta .main-footer .btn-success { background: var(--oct-surface); color: var(--oct-muted); border: 1px solid var(--oct-border); box-shadow: none; }
body.octopusta .main-footer .btn-success:hover { background: var(--oct-primary-50); color: var(--oct-primary); }

/* --------------------------------------------------------------------------
   12. Auth screens (login / register / password reset)
   -------------------------------------------------------------------------- */
body.octopusta-auth {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(1100px 620px at 10% -12%, rgba(108, 76, 241, .58), transparent 62%),
    radial-gradient(900px 560px at 94% 8%, rgba(0, 216, 192, .30), transparent 60%),
    radial-gradient(760px 700px at 55% 118%, rgba(124, 92, 255, .30), transparent 62%),
    #070A13;
  color: #E8EBF7;
  font-family: var(--oct-font);
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body.octopusta-auth {
  --oct-font: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
}

.oct-auth { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 100vh; }

/* ---- brand side ---- */
.oct-auth__brand {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; position: relative;
}
.oct-auth__brand::after {
  content: ''; position: absolute; top: 14%; bottom: 14%; inset-inline-end: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}
.oct-auth__brand-inner { max-width: 420px; text-align: center; }
.oct-auth__logo { display: block; line-height: 0; }
.oct-auth__logo img { width: 264px; max-width: 80%; margin: 0 auto; height: auto; }
.oct-auth__tagline {
  margin: 26px 0 0; font-size: 16.5px; line-height: 1.75; color: #A9B2D6; font-weight: 500;
}
.oct-auth__points {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.oct-auth__points li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #C3CAE8;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 14px; border-radius: 999px;
}
.oct-auth__points i { color: var(--oct-accent); font-size: 12px; }

/* ---- form side ---- */
.oct-auth__panel { display: flex; flex-direction: column; padding: 24px 34px 20px; min-height: 100vh; }
.oct-auth__topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.oct-auth__lang {
  width: auto !important; min-width: 138px; height: 38px;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #E8EBF7 !important; border-radius: 10px; box-shadow: none;
  font-weight: 600; font-size: 13px;
}
.oct-auth__lang option { color: #1B2033; }
.oct-auth__topbar-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oct-auth__muted { color: #8E97BC; font-size: 13px; font-weight: 500; }
.oct-auth__ghost, a.oct-auth__ghost {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff !important; border-radius: 10px; font-weight: 700; font-size: 13px;
  padding: 8px 15px; transition: .2s;
}
.oct-auth__ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.oct-auth__link { color: var(--oct-accent) !important; font-weight: 600; font-size: 13.5px; }
.oct-auth__link:hover { color: #6FF0DF !important; }
.oct-auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.oct-auth__foot { text-align: center; color: #5E6790; font-size: 12px; font-weight: 500; }

/* ---- the card ---- */
body.octopusta-auth .right-col-content,
body.octopusta-auth .right-col-content-register {
  width: 100%; max-width: 440px; float: none; margin: 0; padding: 36px 34px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
body.octopusta-auth .right-col-content-register { max-width: 920px; }
.oct-card__head { text-align: center; margin-bottom: 28px; }
body.octopusta-auth .form-header {
  font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0;
}
.oct-card__sub { color: #8E97BC; font-size: 13.5px; margin-top: 8px; font-weight: 500; }

/* ---- fields ---- */
body.octopusta-auth .form-group { margin-bottom: 18px; position: relative; }
body.octopusta-auth label {
  display: block; color: #C3CAE8 !important;
  font-size: 12.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: .01em;
}
body.octopusta-auth .form-control {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  color: #F2F4FE;
  height: 48px;
  font-size: 14.5px;
  box-shadow: none;
  padding-inline-start: 42px;
  padding-inline-end: 14px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
body.octopusta-auth textarea.form-control { height: auto; padding-inline-start: 14px; }
body.octopusta-auth .form-control::placeholder { color: #8189AE; }
body.octopusta-auth .form-control:focus {
  background: rgba(255, 255, 255, .10);
  border-color: var(--oct-accent);
  box-shadow: 0 0 0 3px rgba(0, 216, 192, .20);
  color: #fff;
}
body.octopusta-auth .has-feedback .form-control-feedback {
  position: absolute; top: auto; bottom: 0; inset-inline-start: 0; inset-inline-end: auto;
  width: 42px; height: 48px; line-height: 48px; text-align: center;
  color: #8189AE; font-size: 14px; pointer-events: none; z-index: 3;
}
body.octopusta-auth .oct-eye {
  position: absolute; bottom: 0; inset-inline-end: 4px;
  width: 40px; height: 48px; background: none; border: 0; padding: 0;
  color: #8189AE; cursor: pointer; z-index: 3; transition: color .18s;
}
body.octopusta-auth .oct-eye:hover { color: var(--oct-accent); }
body.octopusta-auth .help-block { color: #FFA8BE; font-size: 12.5px; margin-top: 6px; }
body.octopusta-auth .has-error .form-control { border-color: #FF6E92; }

/* ---- checkbox ---- */
.oct-form-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 24px;
}
body.octopusta-auth label.oct-check,
.oct-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.oct-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.oct-check__box {
  width: 19px; height: 19px; border-radius: 6px; flex: none;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
  display: inline-flex; align-items: center; justify-content: center;
  transition: .18s;
}
.oct-check__box i { font-size: 10px; color: #fff; opacity: 0; transform: scale(.6); transition: .18s; }
.oct-check input:checked + .oct-check__box { background: var(--oct-grad); border-color: transparent; }
.oct-check input:checked + .oct-check__box i { opacity: 1; transform: scale(1); }
.oct-check input:focus-visible + .oct-check__box { box-shadow: 0 0 0 3px rgba(0, 216, 192, .28); }
body.octopusta-auth .oct-check__label,
.oct-check__label { display: inline; color: #C3CAE8 !important; font-size: 13.5px; font-weight: 600; margin: 0; }

/* ---- primary action ---- */
body.octopusta-auth .btn-login,
body.octopusta-auth .login-form .btn-primary {
  width: 100%; height: 48px; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  background: var(--oct-grad); border: 0; color: #fff;
  box-shadow: 0 14px 30px -12px rgba(108, 76, 241, .95);
  transition: transform .16s, box-shadow .2s, filter .2s;
}
body.octopusta-auth .btn-login:hover { transform: translateY(-1px); filter: brightness(1.06); }
body.octopusta-auth a { color: var(--oct-accent); font-weight: 600; }
body.octopusta-auth a:hover { color: #6FF0DF; }
body.octopusta-auth .btn.bg-maroon {
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important; border-radius: 10px;
}

@media (max-width: 991px) {
  .oct-auth { grid-template-columns: 1fr; }
  .oct-auth__brand { padding: 40px 24px 8px; min-height: 0; }
  .oct-auth__brand::after { display: none; }
  .oct-auth__brand-inner { max-width: 100%; }
  .oct-auth__logo img { width: 210px; }
  .oct-auth__tagline { font-size: 15px; margin-top: 18px; }
  .oct-auth__points { margin-top: 20px; }
  .oct-auth__panel { min-height: 0; padding: 18px 18px 24px; }
  body.octopusta-auth .right-col-content { padding: 28px 22px; }
}

/* --------------------------------------------------------------------------
   13. POS screen
   -------------------------------------------------------------------------- */
body.octopusta.lockscreen { background: var(--oct-bg); }
body.octopusta .pos-tab-container, body.octopusta .pos_form { background: transparent; }

/* --------------------------------------------------------------------------
   14. RTL touch-ups
   -------------------------------------------------------------------------- */
html[dir="rtl"] body.octopusta .sidebar-menu > li.active > a { box-shadow: 0 6px 18px rgba(108, 76, 241, .35); }
html[dir="rtl"] body.octopusta .main-sidebar { border-right: 0; border-left: 1px solid rgba(255, 255, 255, .05); }
html[dir="rtl"] body.octopusta .breadcrumb { right: auto; left: 24px; }
html[dir="rtl"] body.octopusta .info-box-icon { border-radius: 0 var(--oct-r-lg) var(--oct-r-lg) 0; }

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */
@media print {
  body.octopusta .box { box-shadow: none; border: 1px solid #ddd; }
  body.octopusta { background: #fff; }
}


/* --------------------------------------------------------------------------
   17. Header action buttons
   The legacy markup paints every toolbar button .btn-success, which reads as a
   green header. Re-cast them as brand-tinted ghosts, and keep the POS link
   (the only <a> among them) as the single primary action.
   -------------------------------------------------------------------------- */
body.octopusta .main-header .navbar button.btn-success,
body.octopusta .main-header .navbar .btn-group > button.btn-success {
  background: var(--oct-primary-50) !important;
  color: var(--oct-primary) !important;
  border: 1px solid var(--oct-primary-100) !important;
  box-shadow: none !important;
}
body.octopusta .main-header .navbar button.btn-success:hover,
body.octopusta .main-header .navbar button.btn-success:focus,
body.octopusta .main-header .navbar .btn-group.open > button.btn-success {
  background: var(--oct-primary-100) !important;
  color: var(--oct-primary-700) !important;
}
body.octopusta .main-header .navbar a.btn-success {
  background: var(--oct-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(108, 76, 241, .3) !important;
}
body.octopusta .main-header .navbar button.btn-danger {
  background: var(--oct-danger-50) !important;
  color: #B92048 !important;
  border: 1px solid #F8C3D1 !important;
  box-shadow: none !important;
}
/* The legacy header hard-codes white on some inline elements — unreadable now
   that the bar is light. */
body.octopusta .main-header .navbar [style*="color: #fff"],
body.octopusta .main-header .navbar [style*="color:#fff"] {
  color: var(--oct-text-2) !important;
}
body.octopusta .main-header .navbar .user-menu > a > span { color: var(--oct-text-2); font-weight: 600; }
body.octopusta .main-header .navbar .user-image { border-radius: 8px; }
body.octopusta .main-header .navbar .user-header {
  background: var(--oct-grad) !important;
  height: auto; padding: 22px 16px;
}
body.octopusta .main-header .navbar .user-footer { background: #FBFBFE; }

/* --------------------------------------------------------------------------
   18. Point of sale
   -------------------------------------------------------------------------- */
body.octopusta .product_list .product_box {
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  background: var(--oct-surface);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
body.octopusta .product_list .product_box:hover {
  transform: translateY(-3px);
  border-color: rgba(108, 76, 241, .45);
  box-shadow: 0 12px 26px -14px rgba(16, 20, 38, .5);
}
body.octopusta .product_list .text_div { padding: 8px 10px; }
body.octopusta .product_list .text_div .text { font-weight: 600; color: var(--oct-text-2); }

body.octopusta .pos-total, body.octopusta .bg-navy {
  background: linear-gradient(135deg, var(--oct-ink-3), var(--oct-ink)) !important;
  color: #fff !important;
  border-radius: var(--oct-r-sm);
}
body.octopusta .pos-total { font-weight: 800; letter-spacing: -.01em; }
body.octopusta .pos_form_totals .price_total, body.octopusta .pos_form_totals .total_quantity {
  font-weight: 800; color: var(--oct-text);
}
body.octopusta .active-cell { border: 2px solid var(--oct-primary) !important; border-radius: var(--oct-r-sm); }
body.octopusta .bg-lightgray { background-color: #F2F4FA !important; }
body.octopusta .option-div {
  background: #F5F6FB; border: 1px solid var(--oct-border-strong);
  color: var(--oct-text-2); border-radius: var(--oct-r-sm); font-weight: 600;
  transition: .18s;
}
body.octopusta .option-div-group .option-div:hover { border-color: var(--oct-primary); background: var(--oct-primary-50); }
body.octopusta .option-div-group .active .option-div,
body.octopusta .option-div-group .active > .option-div {
  border-color: var(--oct-primary); background: var(--oct-primary-50); color: var(--oct-primary-700);
}
body.octopusta .pos_product_div { padding: 2px; }
body.octopusta .bg-info { background-color: var(--oct-info) !important; }
body.octopusta .bg-navy.pos-total { box-shadow: 0 8px 22px -12px rgba(14, 18, 32, .8); }

/* --------------------------------------------------------------------------
   19. Registration wizard (jquery.steps) on the auth background
   -------------------------------------------------------------------------- */
body.octopusta-auth .wizard > .steps > ul > li > a,
body.octopusta-auth .wizard > .steps a {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #B9C0DE !important;
  font-weight: 700;
  margin: 0 6px;
  padding: 14px 16px;
}
body.octopusta-auth .wizard > .steps > ul > li.current > a,
body.octopusta-auth .wizard > .steps > ul > li.current > a:hover {
  background: var(--oct-grad) !important;
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 10px 26px -12px rgba(108, 76, 241, .9);
}
body.octopusta-auth .wizard > .steps > ul > li.done > a {
  background: rgba(0, 216, 192, .14) !important;
  border-color: rgba(0, 216, 192, .34);
  color: #5FF3E2 !important;
}
body.octopusta-auth .wizard > .content {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  min-height: 0;
  margin: 18px 6px;
  overflow: visible;
}
body.octopusta-auth .wizard > .content > .body { padding: 24px; width: 100%; height: auto; position: relative; }
body.octopusta-auth .wizard > .content > .body label { color: #D6DBF0; font-weight: 600; }
body.octopusta-auth .wizard > .content > .body label.error { color: #FFB3C6; }
body.octopusta-auth .wizard h3, body.octopusta-auth .wizard .content h4 { color: #fff; }
body.octopusta-auth .wizard > .actions { padding: 4px 6px 6px; }
body.octopusta-auth .wizard > .actions a,
body.octopusta-auth .wizard > .actions a:hover,
body.octopusta-auth .wizard > .actions a:active {
  background: var(--oct-grad) !important;
  border: 0; border-radius: 11px;
  color: #fff !important;
  font-weight: 700;
  padding: 11px 26px;
  box-shadow: 0 10px 24px -12px rgba(108, 76, 241, .9);
}
body.octopusta-auth .wizard > .actions .disabled a,
body.octopusta-auth .wizard > .actions .disabled a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #7C86AC !important;
  box-shadow: none;
}
body.octopusta-auth .input-group-addon {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #9AA3C6;
  border-radius: 11px 0 0 11px;
}
html[dir="rtl"] body.octopusta-auth .input-group-addon { border-radius: 0 11px 11px 0; }
body.octopusta-auth .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 11px !important;
  height: 46px;
}
body.octopusta-auth .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #EDEFFA; line-height: 44px;
}
body.octopusta-auth .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
body.octopusta-auth .btn-primary.oct-file, body.octopusta-auth .btn-file { border-radius: 11px; }

/* --------------------------------------------------------------------------
   20. Dashboard hero band
   The dashboard header is a coloured banner the KPI cards float over
   (.content-custom pulls up by -210px). Keep the pattern, brand the colour.
   -------------------------------------------------------------------------- */
body.octopusta .content-header-custom,
body.octopusta .content-wrapper .content-header-custom {
  background-color: var(--oct-primary) !important;
  background-image: linear-gradient(115deg, #7C5CFF 0%, #5B3BE0 45%, #0F1A3D 100%) !important;
  color: #fff !important;
  border-radius: 0 0 26px 26px;
}
body.octopusta .content-header-custom h1,
body.octopusta .content-wrapper .content-header-custom h1 {
  color: #fff !important;
  font-size: 25px;
  font-weight: 800;
}
body.octopusta .content-header-custom small,
body.octopusta .content-header-custom a { color: rgba(255, 255, 255, .82) !important; }
body.octopusta .content-header-custom #dashboard_date_filter {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.octopusta .content-custom .info-box-new-style,
body.octopusta .content-custom .info-box { box-shadow: var(--oct-sh-2); }

/* --------------------------------------------------------------------------
   21. Typography reach
   The legacy bundle hard-codes Helvetica/Arial on a handful of widgets that do
   not inherit from body. Pull them onto the brand stack — but never touch the
   icon fonts, which rely on their own family.
   -------------------------------------------------------------------------- */
body.octopusta .popover,
body.octopusta .tooltip,
body.octopusta .daterangepicker,
body.octopusta .ui-widget,
body.octopusta .ui-widget button,
body.octopusta .ui-widget input,
body.octopusta .ui-widget select,
body.octopusta .ui-widget textarea,
body.octopusta .select2-container,
body.octopusta .select2-dropdown,
body.octopusta .sweet-alert,
body.octopusta #toast-container > div,
body.octopusta .bootstrap-datetimepicker-widget,
body.octopusta .dataTables_wrapper,
body.octopusta .modal,
body.octopusta .swal2-container {
  font-family: var(--oct-font);
}
body.octopusta h1, body.octopusta h2, body.octopusta h3,
body.octopusta h4, body.octopusta h5, body.octopusta h6,
body.octopusta .h1, body.octopusta .h2, body.octopusta .h3 {
  font-family: var(--oct-font);
}
/* Tabular figures keep money columns aligned. */
body.octopusta .table td, body.octopusta .table th,
body.octopusta .info-box-number, body.octopusta .small-box h3,
body.octopusta .price_total, body.octopusta .pos-total,
body.octopusta input[type="number"], body.octopusta .display_currency {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Arabic sits slightly lower on the line than Latin at the same size. */
html[dir="rtl"] body.octopusta { line-height: 1.75; }
html[dir="rtl"] body.octopusta .sidebar-menu > li > a { font-size: 14px; }
html[dir="rtl"] body.octopusta .table > thead > tr > th { letter-spacing: 0; font-size: 12px; }

/* --------------------------------------------------------------------------
   22. Contact profile (contacts/{id})
   -------------------------------------------------------------------------- */
body.octopusta .oct-profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--oct-border);
}
body.octopusta .oct-profile__identity { display: flex; gap: 18px; align-items: flex-start; min-width: 0; flex: 1 1 420px; }
body.octopusta .oct-avatar {
  width: 62px; height: 62px; flex: none;
  border-radius: 18px;
  background: var(--oct-grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 10px 24px -10px rgba(108, 76, 241, .85);
}
body.octopusta .oct-profile__id { min-width: 0; }
body.octopusta .oct-profile__name {
  margin: 2px 0 12px;
  font-size: 23px; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
body.octopusta .oct-chip {
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: var(--oct-primary-50); color: var(--oct-primary-700);
  border: 1px solid var(--oct-primary-100);
  letter-spacing: 0;
}
body.octopusta .oct-chip--customer { background: var(--oct-info-50); color: #1B6FBF; border-color: #BEDCFB; }
body.octopusta .oct-chip--supplier { background: var(--oct-accent-50); color: var(--oct-accent-600); border-color: #A9EFE4; }
body.octopusta .oct-chip--both { background: var(--oct-primary-50); color: var(--oct-primary-700); border-color: var(--oct-primary-100); }
body.octopusta .oct-profile__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; }
body.octopusta .oct-meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.8px; font-weight: 600; color: var(--oct-text-2);
  background: #F5F6FB; border: 1px solid var(--oct-border);
  padding: 6px 12px; border-radius: 999px;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.octopusta .oct-meta i { color: var(--oct-muted); font-size: 12px; }
body.octopusta a.oct-meta--link { color: var(--oct-text-2); transition: .18s; }
body.octopusta a.oct-meta--link:hover {
  background: var(--oct-primary-50); border-color: var(--oct-primary-100); color: var(--oct-primary-700);
}
body.octopusta a.oct-meta--link:hover i { color: var(--oct-primary); }
body.octopusta .oct-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }

body.octopusta .oct-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  padding-top: 22px;
}
body.octopusta .oct-stat {
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  padding: 15px 16px;
  background: var(--oct-surface);
  position: relative;
  overflow: hidden;
}
body.octopusta .oct-stat::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: var(--oct-border-strong);
}
body.octopusta .oct-stat--brand::before { background: var(--oct-grad); }
body.octopusta .oct-stat--good::before  { background: var(--oct-success); }
body.octopusta .oct-stat--bad::before   { background: var(--oct-danger); }
body.octopusta .oct-stat--accent::before{ background: var(--oct-accent); }
body.octopusta .oct-stat__label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--oct-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
body.octopusta .oct-stat__value {
  display: block; font-size: 20px; font-weight: 800; color: var(--oct-text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
body.octopusta .oct-stat--bad .oct-stat__value  { color: var(--oct-danger); }
body.octopusta .oct-stat--good .oct-stat__value { color: var(--oct-success); }
body.octopusta .oct-profile__extra {
  padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--oct-border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 24px;
}
body.octopusta .oct-profile__extra strong { display: block; font-size: 12px; color: var(--oct-muted); font-weight: 700; }
body.octopusta .oct-profile__extra p { margin: 2px 0 12px; font-weight: 600; color: var(--oct-text); }
html[dir="rtl"] body.octopusta .oct-stat__label { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

/* Ledger + statement blocks */
body.octopusta .blue-heading,
body.octopusta tr.blue-heading,
body.octopusta tr.blue-heading th {
  background: #F7F8FC !important;
  color: var(--oct-text) !important;
  border-color: var(--oct-border) !important;
}
body.octopusta h3.blue-heading, body.octopusta p.blue-heading {
  background: transparent !important;
  color: var(--oct-text) !important;
  border-inline-start: 3px solid var(--oct-primary);
  padding: 4px 12px !important;
  font-weight: 800;
  border-radius: 3px;
}
body.octopusta #ledger_table tfoot td, body.octopusta #ledger_table tfoot th { font-weight: 800; }
body.octopusta .nav-tabs-custom > .nav-tabs.nav-justified > li > a { padding: 16px 10px; }

/* Page head used by the redesigned detail screens */
body.octopusta .oct-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
body.octopusta .oct-page-head__title { display: flex; align-items: center; gap: 14px; }
body.octopusta .oct-page-head__title h1 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
body.octopusta .oct-page-head__title small { color: var(--oct-muted); font-weight: 600; font-size: 12.5px; }
body.octopusta .oct-back {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--oct-surface); border: 1px solid var(--oct-border);
  color: var(--oct-text-2); box-shadow: var(--oct-sh-1); transition: .18s;
}
body.octopusta .oct-back:hover { background: var(--oct-primary-50); border-color: var(--oct-primary-100); color: var(--oct-primary); }
html[dir="ltr"] body.octopusta .oct-back i { transform: scaleX(-1); }
body.octopusta .oct-page-head__tools { min-width: 300px; flex: 0 1 380px; }
@media (max-width: 767px) {
  body.octopusta .oct-page-head__tools { min-width: 100%; }
  body.octopusta .oct-profile__actions { width: 100%; }
}

/* --------------------------------------------------------------------------
   23. Dashboard KPI cards
   The stock cards are a full-height colour block plus a 3D rotate on hover.
   Recast them as calm tiles: tinted icon chip, quiet label, loud number.
   -------------------------------------------------------------------------- */
body.octopusta .info-box.info-box-new-style {
  display: flex !important;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 20px !important;
  min-height: 0;
  border-radius: var(--oct-r-lg);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1) !important;
  transform: none !important;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
  width: 100%;
}
body.octopusta .info-box.info-box-new-style:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--oct-sh-2) !important;
  border-color: var(--oct-border-strong);
}
body.octopusta .info-box-new-style .info-box-icon {
  height: 48px; width: 48px; min-width: 48px; line-height: 48px;
  border-radius: 14px;
  box-shadow: none !important;
  float: none;
  position: relative;
}
body.octopusta .info-box-new-style .info-box-icon i { font-size: 21px !important; }
body.octopusta .info-box-new-style .info-box-icon i.fa { font-size: 19px !important; }
/* the stacked "!" badge some cards overlay on their icon */
body.octopusta .info-box-new-style .info-box-icon i + i {
  position: absolute; right: 8px; bottom: 7px;
  font-size: 10px !important; opacity: .85;
}
html[dir="rtl"] body.octopusta .info-box-new-style .info-box-icon i + i { right: auto; left: 8px; }

body.octopusta .info-box-new-style .info-box-content {
  padding: 0 !important; margin: 0 !important; flex: 1; min-width: 0;
}
body.octopusta .info-box-new-style .info-box-text {
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--oct-muted);
  text-transform: none; letter-spacing: 0; margin-bottom: 4px;
  white-space: normal;
}
body.octopusta .info-box-new-style .info-box-number {
  display: block;
  font-size: 23px; font-weight: 800; color: var(--oct-text);
  letter-spacing: -.025em; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
body.octopusta .info-box-new-style p.text-muted {
  font-size: 11.5px !important; line-height: 1.6; margin-top: 8px !important; color: var(--oct-muted) !important;
}
/* Soft, tinted icon chips instead of saturated blocks */
body.octopusta .info-box-new-style .info-box-icon.bg-aqua,
body.octopusta .info-box-new-style .info-box-icon.bg-light-blue {
  background: var(--oct-accent-50) !important; color: var(--oct-accent-600) !important;
}
body.octopusta .info-box-new-style .info-box-icon.bg-green {
  background: var(--oct-success-50) !important; color: #0B7C57 !important;
}
body.octopusta .info-box-new-style .info-box-icon.bg-yellow,
body.octopusta .info-box-new-style .info-box-icon.bg-orange {
  background: var(--oct-warning-50) !important; color: #A76A05 !important;
}
body.octopusta .info-box-new-style .info-box-icon.bg-red {
  background: var(--oct-danger-50) !important; color: #B92048 !important;
}
body.octopusta .info-box-new-style .info-box-icon.bg-blue,
body.octopusta .info-box-new-style .info-box-icon.bg-purple {
  background: var(--oct-primary-50) !important; color: var(--oct-primary) !important;
}
body.octopusta .info-box-new-style .info-box-icon.text-white { color: inherit !important; }
body.octopusta .col-custom { display: flex; margin-bottom: 4px; }

/* Hero band spacing so the tiles float cleanly over it */
body.octopusta .content-header-custom,
body.octopusta .content-wrapper .content-header-custom { padding: 26px 24px 200px !important; }
body.octopusta .content-custom { padding-left: 24px; padding-right: 24px; }
body.octopusta .content-custom > br:first-child { display: none; }
body.octopusta .content-header-custom #dashboard_location + .select2-container .select2-selection--single,
body.octopusta .content-header-custom .select2-container .select2-selection--single {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}
body.octopusta .content-header-custom .select2-container .select2-selection__rendered,
body.octopusta .content-header-custom .select2-container .select2-selection__placeholder { color: #fff !important; }

/* Chart cards */
body.octopusta .content-custom .box .box-header { padding: 18px 22px; }
body.octopusta .content-custom .box .box-title { font-size: 16px; }

/* Fix: the footnote <p> on the return cards is a sibling of .info-box-content,
   so in a flex row it competed for width and crushed the number. Let it wrap
   onto its own full-width line instead. */
body.octopusta .info-box.info-box-new-style { flex-wrap: wrap; }
body.octopusta .info-box.info-box-new-style > p.text-muted {
  flex: 1 0 100%;
  margin: 10px 0 0 !important;
  padding-top: 10px;
  border-top: 1px dashed var(--oct-border);
}
body.octopusta .info-box-new-style .info-box-number { white-space: nowrap; }

/* Hero band / floating card overlap, retuned so the first row of tiles sits on
   the band edge instead of being sliced by it. */
body.octopusta .content-wrapper .content-header-custom { padding: 26px 24px 110px !important; }
body.octopusta .content-wrapper .content-custom { margin-top: -94px !important; }
body.octopusta .content-wrapper .content-custom > .row:first-of-type { margin-bottom: 6px; }

/* Equal-height KPI rows (the return cards carry an extra footnote line).
   :has() keeps this scoped to the tile rows and degrades to the old ragged
   layout on browsers without it. */
body.octopusta .content-custom .row:has(> .col-custom) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
body.octopusta .content-custom .row:has(> .col-custom) > .col-custom { margin-bottom: 16px; }
body.octopusta .content-custom .row:has(> .col-custom) .info-box.info-box-new-style { height: 100%; align-content: center; }
body.octopusta .info-box-new-style .info-box-sub {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--oct-muted);
}
body.octopusta .info-box-new-style .info-box-sub span { font-weight: 700; color: var(--oct-text-2); }

/* A little light in the hero so the flat violet reads as a surface. */
body.octopusta .content-wrapper .content-header-custom {
  padding-bottom: 96px !important;
  position: relative;
  overflow: hidden;
}
body.octopusta .content-wrapper .content-header-custom::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(620px 320px at 88% -40%, rgba(0, 216, 192, .28), transparent 70%),
    radial-gradient(520px 280px at 8% 130%, rgba(255, 255, 255, .16), transparent 70%);
  pointer-events: none;
}
body.octopusta .content-wrapper .content-header-custom > * { position: relative; z-index: 1; }
body.octopusta .content-wrapper .content-custom { margin-top: -80px !important; }

/* Auth: join input-group addons to their field (the stock rules assume square
   corners, so the new radius left a visible seam). */
body.octopusta-auth .input-group { display: flex; align-items: stretch; }
body.octopusta-auth .input-group > .input-group-addon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; min-width: 46px; height: 48px; padding: 0;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  border-inline-end: 0;
  color: #99A3C6; font-size: 14px;
  border-start-start-radius: 12px; border-end-start-radius: 12px;
  border-start-end-radius: 0; border-end-end-radius: 0;
}
body.octopusta-auth .input-group > .form-control,
body.octopusta-auth .input-group > .select2-container {
  flex: 1 1 auto; width: 1%; min-width: 0;
  border-start-start-radius: 0; border-end-start-radius: 0;
  padding-inline-start: 14px;
}
body.octopusta-auth .input-group .select2-container--default .select2-selection--single {
  height: 48px; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important;
  border-inline-start: 0 !important;
}
body.octopusta-auth .input-group .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; }
body.octopusta-auth .input-group .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
body.octopusta-auth .input-group-btn > .btn,
body.octopusta-auth .btn-file {
  height: 48px; border-radius: 12px; border: 0;
  background: var(--oct-grad); color: #fff; font-weight: 700;
}
body.octopusta-auth .bootstrap-filestyle .form-control { border-radius: 12px; padding-inline-start: 14px; }

/* --------------------------------------------------------------------------
   24. Dashboard (home/index)
   Rebuilt from the old layout of eight identical tiles, two full-width charts
   and six stacked tables. The shape here is: one toolbar, three headline
   metrics, five supporting tiles, two charts side by side, and every work-list
   table collapsed into a single tabbed card.

   All of it is grid-based and uses logical properties, so the Arabic RTL build
   mirrors without a second set of rules.
   -------------------------------------------------------------------------- */
body.octopusta .oct-dash {
  padding: 22px 24px 40px !important;
  background: var(--oct-bg);
}

/* ---- toolbar ---- */
body.octopusta .oct-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
body.octopusta .oct-topbar__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oct-text);
}
body.octopusta .oct-topbar__meta {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--oct-muted);
  font-variant-numeric: tabular-nums;
}
body.octopusta .oct-topbar__meta:empty { display: none; }
body.octopusta .oct-topbar__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.octopusta .oct-topbar__loc { min-width: 210px; }

body.octopusta .btn.oct-rangebtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--oct-r);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  color: var(--oct-text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--oct-sh-1);
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.octopusta .btn.oct-rangebtn:hover,
body.octopusta .btn.oct-rangebtn:focus {
  border-color: var(--oct-primary);
  box-shadow: var(--oct-ring);
  color: var(--oct-text);
}
body.octopusta .oct-rangebtn > i:first-child { color: var(--oct-primary); font-size: 14px; }
body.octopusta .oct-rangebtn__caret { color: var(--oct-muted); font-size: 11px; }

/* ---- headline metrics ---- */
body.octopusta .oct-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}
body.octopusta .oct-kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  min-height: 140px;
  border-radius: var(--oct-r-lg);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
body.octopusta .oct-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--oct-sh-2);
  border-color: var(--oct-border-strong);
}
/* The first card is the number the page exists for; give it the brand wash so
   the eye lands there before anything else. */
body.octopusta .oct-kpis > .oct-kpi:first-child {
  background:
    linear-gradient(135deg, rgba(108, 76, 241, .07) 0%, rgba(0, 216, 192, .05) 100%),
    var(--oct-surface);
  border-color: rgba(108, 76, 241, .22);
}
body.octopusta .oct-kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body.octopusta .oct-kpi__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--oct-muted);
}
body.octopusta .oct-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: 12px;
  font-size: 16px;
}
body.octopusta .oct-kpi__icon--brand   { background: var(--oct-primary-50); color: var(--oct-primary); }
body.octopusta .oct-kpi__icon--success { background: var(--oct-success-50); color: #0B7C57; }
body.octopusta .oct-kpi__icon--warning { background: var(--oct-warning-50); color: #A76A05; }

body.octopusta .oct-kpi__value {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--oct-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.octopusta .oct-kpi__value .fa-spin { font-size: 17px; color: var(--oct-muted); }
body.octopusta .oct-kpi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  min-height: 24px;
}

/* ---- delta pill ---- */
body.octopusta .oct-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.octopusta .oct-delta:empty { display: none; }
body.octopusta .oct-delta i { font-size: 10px; }
body.octopusta .oct-delta span { direction: ltr; unicode-bidi: isolate; }
body.octopusta .oct-delta.is-up   { background: var(--oct-success-50); color: #0B7C57; }
body.octopusta .oct-delta.is-down { background: var(--oct-danger-50);  color: #B92048; }
body.octopusta .oct-delta.is-flat { background: #EEF0F7;               color: var(--oct-muted); }

body.octopusta .oct-spark { color: var(--oct-primary); line-height: 0; opacity: .85; }
body.octopusta .oct-spark svg { display: block; }

/* ---- supporting tiles ---- */
body.octopusta .oct-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
body.octopusta .oct-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--oct-r);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.octopusta .oct-tile:hover {
  border-color: var(--oct-border-strong);
  box-shadow: var(--oct-sh-2);
}
body.octopusta .oct-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  min-width: 34px;
  border-radius: 10px;
  font-size: 14px;
}
body.octopusta .oct-tile__icon--brand   { background: var(--oct-primary-50); color: var(--oct-primary); }
body.octopusta .oct-tile__icon--warning { background: var(--oct-warning-50); color: #A76A05; }
body.octopusta .oct-tile__icon--danger  { background: var(--oct-danger-50);  color: #B92048; }
body.octopusta .oct-tile__body { min-width: 0; flex: 1; }
body.octopusta .oct-tile__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--oct-muted);
  margin-bottom: 3px;
}
body.octopusta .oct-tile__value {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--oct-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.octopusta .oct-tile__value .fa-spin { font-size: 12px; color: var(--oct-muted); }
body.octopusta .oct-tile__sub {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--oct-muted);
  font-variant-numeric: tabular-nums;
}
body.octopusta .oct-tile__sub span { color: var(--oct-text-2); font-weight: 700; }
body.octopusta .oct-tile__sub-sep { color: var(--oct-border-strong) !important; margin: 0 3px; }

/* ---- cards (charts + tabs) ---- */
body.octopusta .oct-card {
  border-radius: var(--oct-r-lg);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1);
  overflow: hidden;
}
body.octopusta .oct-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--oct-border);
}
body.octopusta .oct-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--oct-text);
}
body.octopusta .oct-card__body { padding: 14px 18px 18px; }

body.octopusta .oct-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
body.octopusta .oct-card--chart .oct-card__body { padding: 8px 10px 10px; }

/* ---- empty state ---- */
body.octopusta .oct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 20px;
  text-align: center;
  color: var(--oct-muted);
}
body.octopusta .oct-empty i { font-size: 30px; opacity: .38; }
body.octopusta .oct-empty p { margin: 0; font-size: 13px; font-weight: 600; }

/* ---- work-list tabs ---- */
body.octopusta .oct-card--tabs { margin-bottom: 18px; }
body.octopusta .oct-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--oct-border);
  overflow-x: auto;
  scrollbar-width: thin;
}
body.octopusta .oct-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 11px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--oct-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
body.octopusta .oct-tabs__btn i { font-size: 13px; opacity: .8; }
body.octopusta .oct-tabs__btn:hover {
  color: var(--oct-text);
  background: var(--oct-primary-50);
  border-radius: 10px 10px 0 0;
}
body.octopusta .oct-tabs__btn.is-active {
  color: var(--oct-primary);
  border-bottom-color: var(--oct-primary);
}
body.octopusta .oct-tabs__btn.is-active i { opacity: 1; }

body.octopusta .oct-pane { display: none; }
body.octopusta .oct-pane.is-active { display: block; }
body.octopusta .oct-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* A lone tooltip marker where the heading used to be; when tooltips are
   switched off business-wide the directive prints nothing and the flex row
   simply collapses to the filter. */
body.octopusta .oct-pane__tip { font-size: 14px; line-height: 1; }
body.octopusta .oct-pane__head:empty { display: none; }
body.octopusta .oct-pane__filter { min-width: 220px; }

/* ---- tables inside the panes ---- */
body.octopusta .oct-table { margin-bottom: 0; }
body.octopusta .oct-table > thead > tr > th {
  border-bottom: 1px solid var(--oct-border) !important;
  border-top: 0 !important;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oct-muted);
  padding: 10px 12px;
  white-space: nowrap;
}
body.octopusta .oct-table > tbody > tr > td {
  border-top: 1px solid var(--oct-border) !important;
  padding: 11px 12px;
  font-size: 13px;
  color: var(--oct-text-2);
  vertical-align: middle;
}
body.octopusta .oct-table > tbody > tr:hover > td { background: var(--oct-primary-50); }
body.octopusta .oct-table td.dataTables_empty {
  padding: 44px 12px;
  text-align: center;
  color: var(--oct-muted);
  font-weight: 600;
}
body.octopusta .oct-table__foot td {
  background: var(--oct-bg);
  font-weight: 700;
  color: var(--oct-text);
}

/* DataTables chrome: the stock toolbar is loud next to these cards. */
body.octopusta .oct-pane .dt-buttons .btn {
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  color: var(--oct-text-2);
  box-shadow: none;
}
body.octopusta .oct-pane .dt-buttons .btn:hover {
  border-color: var(--oct-primary);
  color: var(--oct-primary);
  background: var(--oct-primary-50);
}
body.octopusta .oct-pane .dataTables_filter input {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--oct-border);
  padding-inline: 12px;
  font-size: 13px;
}
body.octopusta .oct-pane .dataTables_info {
  font-size: 12px;
  color: var(--oct-muted);
  padding-top: 12px;
}
body.octopusta .oct-pane .dataTables_paginate .paginate_button {
  border-radius: 9px !important;
  font-size: 12.5px;
}

/* ---- responsive ---- */
@media (max-width: 1400px) {
  body.octopusta .oct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  body.octopusta .oct-kpis   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards in two columns leaves an odd single card on row two. The lead
     metric takes the full first row instead, which also keeps it dominant. */
  body.octopusta .oct-kpis > .oct-kpi:first-child { grid-column: 1 / -1; }
  body.octopusta .oct-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body.octopusta .oct-dash   { padding: 16px 14px 32px !important; }
  body.octopusta .oct-kpis,
  body.octopusta .oct-tiles  { grid-template-columns: minmax(0, 1fr); }
  body.octopusta .oct-topbar { align-items: flex-start; flex-direction: column; }
  body.octopusta .oct-topbar__tools { width: 100%; }
  body.octopusta .oct-topbar__loc,
  body.octopusta .oct-pane__filter { min-width: 0; flex: 1; }
}

/* --------------------------------------------------------------------------
   25. RTL direction fixes
   rtl.css flips the .pull-left / .pull-right helpers correctly, but a few
   components in the AdminLTE build float themselves directly rather than
   through those helpers. rtl.css only re-points their left/right *offsets*,
   which does nothing to a float, so they stay stuck on the LTR side.

   .box-header > .box-tools is the visible one: it holds the "Add" button on
   ~85 screens, and in Arabic it floated onto the right, on top of the card
   title. Flip the float itself.
   -------------------------------------------------------------------------- */
html[dir="rtl"] body.octopusta .box-header > .box-tools { float: left; }
html[dir="rtl"] body.octopusta .timeline > li > .timeline-item > .time { float: left; }

/* A date range is written "start - end". The string is bidi-neutral, so in an
   RTL paragraph the browser renders the two dates in visual right-to-left
   order and the field reads "12/31/2026 - 01/01/2026" — end before start.
   Isolating the value as LTR keeps the reading order, while text-align:right
   keeps the field looking like every other RTL input next to it. */
html[dir="rtl"] body.octopusta input[id*="date_range"],
html[dir="rtl"] body.octopusta input[name*="date_range"],
html[dir="rtl"] body.octopusta input[id*="date_filter"],
html[dir="rtl"] body.octopusta #dashboard_date_filter > span {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* Any label that falls back to English inside this RTL UI ("Assigned to:")
   puts its trailing colon on the wrong side, because the colon is a neutral
   character taking the surrounding RTL paragraph direction. plaintext derives
   each label's direction from its own first strong character, so Arabic labels
   stay RTL and Latin ones read correctly, without touching alignment. */
html[dir="rtl"] body.octopusta .form-group > label,
html[dir="rtl"] body.octopusta .control-label,
html[dir="rtl"] body.octopusta .checkbox label,
html[dir="rtl"] body.octopusta .radio label { unicode-bidi: plaintext; }

/* --------------------------------------------------------------------------
   26. Role permission form (roles/create, roles/{id}/edit)
   ~200 permissions in ~35 groups. The old screen laid them out as one
   full-width checkbox per line — a single column roughly 6,000px tall with no
   search and the only Save button at the very bottom.

   The markup inside each group is unchanged (the "select all" handler in
   app.js still finds its .check_group ancestor); the Bootstrap grid columns
   are simply neutralised and re-composed as cards.
   -------------------------------------------------------------------------- */
body.octopusta .oct-roleform {
  padding: 22px 24px 40px !important;
  background: var(--oct-bg);
}

/* ---- sticky toolbar ---- */
body.octopusta .oct-rolebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r-lg);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-2);
}
body.octopusta .oct-rolebar__field { flex: 0 1 300px; min-width: 200px; }
body.octopusta .oct-rolebar__field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--oct-muted);
}
body.octopusta .oct-req { color: var(--oct-danger); margin-inline-start: 3px; }

body.octopusta .oct-rolebar__search { position: relative; flex: 1 1 240px; min-width: 180px; }
body.octopusta .oct-rolebar__search i {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--oct-muted);
  pointer-events: none;
}
body.octopusta .oct-rolebar__search input { padding-inline-start: 36px; }
body.octopusta .oct-rolebar__search input::-webkit-search-cancel-button { cursor: pointer; }

body.octopusta .oct-rolebar__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
body.octopusta .oct-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--oct-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
body.octopusta .oct-count strong { color: var(--oct-primary); font-size: 15px; font-weight: 800; }

body.octopusta .btn.oct-btn-primary {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--oct-r);
  background: var(--oct-grad);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--oct-sh-1);
}
body.octopusta .btn.oct-btn-primary:hover,
body.octopusta .btn.oct-btn-primary:focus { color: #fff; box-shadow: var(--oct-sh-2); }
body.octopusta .btn.oct-btn-ghost {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  background: var(--oct-surface);
  color: var(--oct-text-2);
  font-size: 13px;
  font-weight: 700;
}
body.octopusta .btn.oct-btn-ghost:hover {
  border-color: var(--oct-danger);
  color: var(--oct-danger);
  background: var(--oct-danger-50);
}

/* ---- the group grid ----
   Multi-column rather than CSS grid: the groups vary from 1 to 20 rows tall,
   and columns pack them without the ragged gaps a row-based grid leaves. */
body.octopusta .oct-perms {
  columns: 3 320px;
  column-gap: 16px;
}
body.octopusta .oct-perms > hr { display: none; }

body.octopusta .oct-perms > .check_group,
body.octopusta .oct-perms > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r-lg);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1);
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.octopusta .oct-perms > .check_group:hover,
body.octopusta .oct-perms > .row:hover {
  border-color: var(--oct-border-strong);
  box-shadow: var(--oct-sh-2);
}
body.octopusta .oct-perms > .is-hidden { display: none !important; }

/* Neutralise the Bootstrap columns: title + "select all" share the header
   line, the permission list takes the full width beneath it. */
body.octopusta .oct-perms [class*="col-md-"] {
  float: none;
  width: auto;
  padding: 0;
}
body.octopusta .oct-perms > .check_group > .col-md-1,
body.octopusta .oct-perms > .check_group > .col-md-3,
body.octopusta .oct-perms > .row > .col-md-3 { flex: 1 1 auto; min-width: 0; }
body.octopusta .oct-perms > .check_group > .col-md-2 { flex: 0 0 auto; }
body.octopusta .oct-perms > .check_group > .col-md-9,
body.octopusta .oct-perms > .row > .col-md-9 {
  flex: 1 1 100%;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--oct-border);
}

body.octopusta .oct-perms h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--oct-text);
  line-height: 1.35;
}

/* the group's own "select all" chip */
body.octopusta .oct-perms > .check_group > .col-md-2 .checkbox {
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--oct-primary-50);
}
body.octopusta .oct-perms > .check_group > .col-md-2 .checkbox label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--oct-primary);
}

/* ---- permission rows ---- */
body.octopusta .oct-perms .col-md-12 { display: block; }
body.octopusta .oct-perms .checkbox { margin: 0; padding: 0; }
body.octopusta .oct-perms .col-md-9 .checkbox { padding: 4px 0; }
body.octopusta .oct-perms .checkbox.is-hidden { display: none !important; }
body.octopusta .oct-perms .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--oct-text-2);
  cursor: pointer;
}
body.octopusta .oct-perms .checkbox label:hover { color: var(--oct-text); }
body.octopusta .oct-perms .col-md-9 hr {
  margin: 9px 0;
  border-top: 1px dashed var(--oct-border);
}
body.octopusta .oct-perms .fa-info-circle { font-size: 12px; margin-inline-start: 4px; }

body.octopusta .oct-perms__empty {
  margin: 30px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--oct-muted);
}

/* ---- iCheck, restyled ----
   The stock skin is a 22px PNG sprite. Scoped to this screen so the rest of
   the app keeps the checkbox it has today. */
body.octopusta .oct-roleform .icheckbox_square-blue,
body.octopusta .oct-roleform .iradio_square-blue {
  position: relative;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  background: var(--oct-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--oct-border-strong);
  border-radius: 5px;
  transition: background-color .15s ease, border-color .15s ease;
}
body.octopusta .oct-roleform .iradio_square-blue { border-radius: 50%; }
body.octopusta .oct-roleform .icheckbox_square-blue.hover,
body.octopusta .oct-roleform .iradio_square-blue.hover { border-color: var(--oct-primary); }
body.octopusta .oct-roleform .icheckbox_square-blue.checked,
body.octopusta .oct-roleform .iradio_square-blue.checked {
  background: var(--oct-primary) !important;
  border-color: var(--oct-primary);
}
body.octopusta .oct-roleform .icheckbox_square-blue.checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
body.octopusta .oct-roleform .iradio_square-blue.checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
}
body.octopusta .oct-roleform .icheckbox_square-blue.disabled,
body.octopusta .oct-roleform .iradio_square-blue.disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 860px) {
  body.octopusta .oct-roleform { padding: 16px 14px 32px !important; }
  body.octopusta .oct-perms { columns: 1; }
  body.octopusta .oct-rolebar__meta { margin-inline-start: 0; width: 100%; }
  body.octopusta .btn.oct-btn-primary { flex: 1; }
}

/* --------------------------------------------------------------------------
   27. Sidebar
   Supersedes the tuning in section 3. Dark rail, but without the saturated
   gradient block the active row used to get: it is a soft violet tint with a
   leading accent instead. Section headers, the filter field and the
   independent scroll area all live here too.
   -------------------------------------------------------------------------- */
body.octopusta .main-sidebar,
body.octopusta .left-side {
  background: linear-gradient(180deg, #0D1220 0%, #131A2C 55%, #171E33 100%) !important;
  border-inline-start: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
  box-shadow: none;
}
body.octopusta .oct-sidebar {
  display: flex;
  flex-direction: column;
  /* .main-sidebar carries a padding-top equal to the brand row (62px, and
     100px under 767px). A flat 100vh here therefore overhung the viewport by
     exactly that much and overflow:hidden swallowed the tail of the menu -
     the last entries could not be scrolled into view at all. */
  height: calc(100vh - 62px);
  padding-bottom: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  body.octopusta .oct-sidebar { height: calc(100vh - 100px); }
}

/* ---- brand ---- */
body.octopusta .main-header .logo,
body.octopusta .oct-sidebar > .logo {
  flex: 0 0 auto;
  background: #0D1220 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
body.octopusta .main-header .logo:hover { background: #0D1220 !important; }
body.octopusta .main-header .logo .oct-brand-name,
body.octopusta .main-header .logo .oct-brand,
body.octopusta .oct-sidebar > .logo span { color: #FFFFFF !important; font-weight: 800; }

/* ---- filter ---- */
body.octopusta .oct-sidebar__search {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 14px 10px;
}
body.octopusta .oct-sidebar__search i {
  position: absolute;
  inset-inline-start: 26px;
  top: 50%;
  transform: translateY(-40%);
  font-size: 13px;
  color: #6E7796;
  pointer-events: none;
}
body.octopusta .oct-sidebar__search input {
  width: 100%;
  height: 38px;
  padding-inline: 34px 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #E6EAF5;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color .16s ease, background .16s ease;
}
body.octopusta .oct-sidebar__search input::placeholder { color: #6E7796; font-weight: 500; }
body.octopusta .oct-sidebar__search input:focus {
  border-color: rgba(124, 92, 255, .6);
  background: rgba(255, 255, 255, .09);
}

/* ---- the scrolling menu ---- */
body.octopusta .oct-sidebar > .sidebar-menu {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
body.octopusta .oct-sidebar > .sidebar-menu::-webkit-scrollbar { width: 6px; }
body.octopusta .oct-sidebar > .sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: 99px;
}
body.octopusta .oct-sidebar > .sidebar-menu::-webkit-scrollbar-track { background: transparent; }

/* ---- section headers ---- */
body.octopusta .sidebar-menu > li.header {
  background: transparent !important;
  color: #6B7492 !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 18px 20px 7px;
  pointer-events: none;
}
body.octopusta .sidebar-menu > li.header.is-orphan,
body.octopusta .sidebar-menu > li.is-filtered { display: none !important; }

/* ---- rows ---- */
body.octopusta .sidebar-menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #B2BAD4 !important;
  font-weight: 600;
  font-size: 15.5px;
  border-left: 0 !important;
  border-radius: 10px;
  margin: 1px 10px;
  padding: 11px 13px;
  transition: background .15s ease, color .15s ease;
}
body.octopusta .sidebar-menu > li > a > i {
  width: 22px;
  min-width: 22px;
  font-size: 17px;
  text-align: center;
  color: #7E88AB;
  transition: color .15s ease;
}
/* Only the label may grow. .pull-right-container is a <span> too, so a bare
   "> a > span" rule made the caret box grow as well and its auto margin never
   pushed it to the row end — which is why the carets sat at ragged positions. */
body.octopusta .sidebar-menu > li > a > span:not(.pull-right-container) {
  flex: 1 1 auto;
  min-width: 0;
}
body.octopusta .sidebar-menu > li:hover > a,
body.octopusta .sidebar-menu > li.menu-open > a {
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
}
body.octopusta .sidebar-menu > li:hover > a > i,
body.octopusta .sidebar-menu > li.menu-open > a > i { color: #CBD2E8; }

/* active: soft violet tint with a leading accent, not a gradient block */
body.octopusta .sidebar-menu > li.active > a {
  background: rgba(108, 76, 241, .22) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: none;
}
body.octopusta .sidebar-menu > li.active > a > i { color: #B9A6FF; }

/* the dropdown caret sits at the row's end in both directions */
body.octopusta .sidebar-menu > li > a > .pull-right-container {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  margin-inline-start: auto;
  transform: none;
  display: flex;
  align-items: center;
}
body.octopusta .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
  float: none !important;
  margin: 0;
  font-size: 14px;
  color: #6B7492;
  transition: transform .18s ease, color .18s ease;
}
body.octopusta .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left,
body.octopusta .sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left { color: #CBD2E8; }
html[dir="rtl"] body.octopusta .sidebar-menu > li > a > .pull-right-container > .fa-angle-left { transform: rotate(180deg); }
body.octopusta .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); }
html[dir="rtl"] body.octopusta .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(90deg); }

/* ---- children ---- */
body.octopusta .sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, .20) !important;
  border-radius: 10px;
  margin: 2px 10px 6px;
  padding: 5px;
}
body.octopusta .sidebar-menu .treeview-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9BA4C2 !important;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 11px;
}
body.octopusta .sidebar-menu .treeview-menu > li > a > i { font-size: 14px; width: 18px; text-align: center; }
body.octopusta .sidebar-menu .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}
body.octopusta .sidebar-menu .treeview-menu > li.active > a {
  background: rgba(108, 76, 241, .26) !important;
  color: #fff !important;
  font-weight: 600;
}

/* ---- collapsed to icons ---- */
body.octopusta.sidebar-collapse .oct-sidebar__search { display: none; }
body.octopusta.sidebar-collapse .sidebar-menu > li.header { display: none !important; }
body.octopusta.sidebar-collapse .sidebar-menu > li > a { justify-content: center; margin: 1px 6px; }
body.octopusta.sidebar-collapse .sidebar-menu > li > a > .pull-right-container { display: none !important; }

/* --------------------------------------------------------------------------
   28. Contact view (contacts/{id})
   Builds on the profile header in section 22. What was left: the tab strip
   used .nav-justified so a two-word tab wrapped onto a second line and threw
   the whole bar out of alignment; the ledger filters were four grid columns of
   differing heights; and the statement's two columns collided in RTL leaving a
   large hole in the middle of the page.
   -------------------------------------------------------------------------- */
body.octopusta .oct-contactview { padding: 22px 24px 40px !important; }

/* ---- stat cards: the amount owed is the number people open this page for ---- */
body.octopusta .oct-contactview .oct-stats { gap: 14px; }
body.octopusta .oct-contactview .oct-stat {
  border-inline-start: 3px solid var(--oct-border);
  border-radius: var(--oct-r);
  transition: box-shadow .18s ease, border-color .18s ease;
}
body.octopusta .oct-contactview .oct-stat:hover { box-shadow: var(--oct-sh-2); }
body.octopusta .oct-contactview .oct-stat--bad {
  border-inline-start-color: var(--oct-danger);
  background: linear-gradient(180deg, var(--oct-danger-50) 0%, var(--oct-surface) 62%);
}
body.octopusta .oct-contactview .oct-stat--bad .oct-stat__value { font-size: 24px; color: #B92048; }
body.octopusta .oct-contactview .oct-stat--good   { border-inline-start-color: var(--oct-success); }
body.octopusta .oct-contactview .oct-stat--brand  { border-inline-start-color: var(--oct-primary); }
body.octopusta .oct-contactview .oct-stat--accent { border-inline-start-color: var(--oct-accent-600); }
body.octopusta .oct-contactview .oct-stat--muted  { border-inline-start-color: var(--oct-border-strong); }

/* ---- tab strip ---- */
body.octopusta .oct-contactview .nav-tabs-custom {
  border-radius: var(--oct-r-lg);
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  box-shadow: var(--oct-sh-1);
  overflow: hidden;
}
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs {
  display: flex;
  flex-wrap: nowrap;              /* was .nav-justified: equal widths forced wrapping */
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--oct-border);
  overflow-x: auto;
  scrollbar-width: thin;
}
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs > li {
  flex: 0 0 auto;
  width: auto;
  float: none;
  margin: 0;
  border: 0;
}
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  margin: 0;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 10px 10px 0 0;
  background: transparent !important;
  color: var(--oct-muted) !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs > li > a > i { font-size: 13px; opacity: .85; }
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--oct-text) !important;
  background: var(--oct-primary-50) !important;
}
body.octopusta .oct-contactview .nav-tabs-custom > .nav-tabs > li.active > a {
  color: var(--oct-primary) !important;
  border-bottom-color: var(--oct-primary) !important;
  background: transparent !important;
}
body.octopusta .oct-contactview .nav-tabs-custom > .tab-content { padding: 18px 20px 22px; }

/* ---- ledger toolbar ---- */
body.octopusta .oct-ledgerbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--oct-border);
}
body.octopusta .oct-ledgerbar .oct-field { flex: 0 1 230px; min-width: 180px; }
body.octopusta .oct-ledgerbar .oct-field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--oct-muted);
}
body.octopusta .oct-ledgerbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
body.octopusta .oct-ledgerbar .oct-segment { display: flex; }
body.octopusta .oct-ledgerbar .oct-segment > .btn {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--oct-border);
  background: var(--oct-surface);
  color: var(--oct-text-2);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
  border-radius: 0;
}
body.octopusta .oct-ledgerbar .oct-segment > .btn:first-child {
  border-start-start-radius: var(--oct-r); border-end-start-radius: var(--oct-r);
}
body.octopusta .oct-ledgerbar .oct-segment > .btn:last-child {
  border-start-end-radius: var(--oct-r); border-end-end-radius: var(--oct-r);
}
body.octopusta .oct-ledgerbar .oct-segment > .btn.active {
  background: var(--oct-primary) !important;
  border-color: var(--oct-primary);
  color: #fff !important;
  box-shadow: none;
}
body.octopusta .oct-ledgerbar .oct-btn-ghost { height: 38px; display: inline-flex; align-items: center; gap: 7px; }

/* ---- the statement itself ----
   Scoped to the in-page container so the PDF export, which renders this same
   view standalone with its own width-50/f-left classes, is untouched. */
body.octopusta #contact_ledger_div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r-lg);
  background: var(--oct-surface);
}
body.octopusta #contact_ledger_div > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}
/* business header and the transactions table span the full width */
body.octopusta #contact_ledger_div > .col-md-12 { grid-column: 1 / -1; }
body.octopusta #contact_ledger_div > .col-md-12:first-child {
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--oct-border);
}
body.octopusta #contact_ledger_div .blue-heading {
  color: var(--oct-text);
  font-weight: 800;
  margin-bottom: 6px;
  /* section 22 gives these headings a leading accent bar; inside the
     right-aligned statement columns it reads as a stray floating line. */
  border-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}
body.octopusta #contact_ledger_div h3.blue-heading { font-size: 17px; letter-spacing: -.02em; }
body.octopusta #contact_ledger_div p.blue-heading { font-size: 12px; color: var(--oct-muted); text-transform: uppercase; letter-spacing: .08em; }
body.octopusta #contact_ledger_div hr { margin: 10px 0; border-top: 1px solid var(--oct-border); }
body.octopusta #contact_ledger_div table { width: 100%; font-variant-numeric: tabular-nums; }
body.octopusta #contact_ledger_div table > tbody > tr > td,
body.octopusta #contact_ledger_div table > tbody > tr > th {
  padding: 8px 10px;
  font-size: 13px;
  border-top: 1px solid var(--oct-border) !important;
}
body.octopusta #contact_ledger_div table > thead > tr > th {
  padding: 9px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--oct-muted);
  border-bottom: 1px solid var(--oct-border) !important;
  border-top: 0 !important;
  white-space: nowrap;
}
body.octopusta #contact_ledger_div table.no-border > tbody > tr > td { border-top-color: transparent !important; }
body.octopusta #contact_ledger_div table > tbody > tr:last-child > td { font-weight: 800; color: var(--oct-text); }
/* the transactions listing sits below the two summary columns */
body.octopusta #contact_ledger_div > .table-responsive,
body.octopusta #contact_ledger_div > table,
body.octopusta #contact_ledger_div > h4,
body.octopusta #contact_ledger_div > p:last-of-type { grid-column: 1 / -1; }

@media (max-width: 860px) {
  body.octopusta .oct-contactview { padding: 16px 14px 32px !important; }
  body.octopusta #contact_ledger_div { grid-template-columns: minmax(0, 1fr); }
  body.octopusta .oct-ledgerbar__actions { margin-inline-start: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   29. DataTables: RTL sort indicators and total rows
   -------------------------------------------------------------------------- */

/* The sort caret is positioned at right:8px and the header reserves room for
   it with padding-right:30px. rtl.css flips the padding to the other side but
   not the caret, so in Arabic the caret is drawn on top of the column label.
   Move both to the inline-end together. */
html[dir="rtl"] body.octopusta table.dataTable thead .sorting:after,
html[dir="rtl"] body.octopusta table.dataTable thead .sorting_asc:after,
html[dir="rtl"] body.octopusta table.dataTable thead .sorting_desc:after,
html[dir="rtl"] body.octopusta table.dataTable thead .sorting_asc_disabled:after,
html[dir="rtl"] body.octopusta table.dataTable thead .sorting_desc_disabled:after {
  right: auto;
  left: 8px;
}
html[dir="rtl"] body.octopusta table.dataTable thead > tr > th.sorting,
html[dir="rtl"] body.octopusta table.dataTable thead > tr > th.sorting_asc,
html[dir="rtl"] body.octopusta table.dataTable thead > tr > th.sorting_desc,
html[dir="rtl"] body.octopusta table.dataTable thead > tr > td.sorting,
html[dir="rtl"] body.octopusta table.dataTable thead > tr > td.sorting_asc,
html[dir="rtl"] body.octopusta table.dataTable thead > tr > td.sorting_desc {
  padding-right: 10px;
  padding-left: 26px;
}

/* Footer totals. Each metric is written "label - <span>amount</span>" with the
   pairs separated by <br>. In a narrow column the pair wraps between the label
   and its amount, so the figure ends up orphaned on its own line ("- مستحق دفع
   المشتريات" above a bare "300.00"). nowrap keeps each pair intact; the <br>
   still provides the line break between pairs. */
body.octopusta tr.footer-total > td,
body.octopusta tr.footer-total > th {
  background: var(--oct-bg) !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--oct-text);
  vertical-align: middle;
  padding: 10px 12px;
}
body.octopusta tr.footer-total small {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--oct-text-2);
}
body.octopusta tr.footer-total small span { font-weight: 700; color: var(--oct-text); }
/* .font-17 forces 17px on these rows, which is larger than the data above it. */
body.octopusta tr.footer-total.font-17 > td { font-size: 13px !important; }

/* --------------------------------------------------------------------------
   30. Purchase / order document (the invoice modal)
   The partial is shared by the on-screen modal and the print output, so this
   stays light-on-white and avoids anything that only works on screen. It
   replaces the hard-coded .bg-gray body and .bg-green header rows the tables
   used, which matched nothing else in the app.
   -------------------------------------------------------------------------- */
body.octopusta .oct-invoice__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--oct-border);
  background: var(--oct-surface);
  border-radius: var(--oct-r-lg) var(--oct-r-lg) 0 0;
}
body.octopusta .oct-invoice__head .modal-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oct-text);
}
body.octopusta .oct-invoice__head .modal-title b { font-weight: 700; color: var(--oct-muted); font-size: 14px; }

body.octopusta .oct-invoice { padding: 22px; background: var(--oct-surface); }

/* ---- the three identity columns ---- */
body.octopusta .oct-invoice .invoice-info { display: flex; flex-wrap: wrap; margin: 0 0 18px; }
body.octopusta .oct-invoice .invoice-col {
  padding: 16px 18px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  background: var(--oct-bg);
  font-size: 13px;
  line-height: 1.75;
  color: var(--oct-text-2);
  margin-inline-end: 12px;
  flex: 1 1 240px;
  min-width: 0;
}
body.octopusta .oct-invoice .invoice-col:last-child { margin-inline-end: 0; }
body.octopusta .oct-invoice .invoice-col > address {
  margin: 6px 0 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.75;
}
body.octopusta .oct-invoice .invoice-col b,
body.octopusta .oct-invoice .invoice-col strong { color: var(--oct-text); font-weight: 700; }

/* status chips */
body.octopusta .oct-inv-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: #EEF0F7;
  color: var(--oct-text-2);
}
body.octopusta .oct-inv-chip--received,
body.octopusta .oct-inv-chip--paid,
body.octopusta .oct-inv-chip--completed { background: var(--oct-success-50); color: #0B7C57; }
body.octopusta .oct-inv-chip--pending,
body.octopusta .oct-inv-chip--partial,
body.octopusta .oct-inv-chip--ordered { background: var(--oct-warning-50); color: #A76A05; }
body.octopusta .oct-inv-chip--due,
body.octopusta .oct-inv-chip--overdue { background: var(--oct-danger-50); color: #B92048; }

/* ---- line items + payments ---- */
body.octopusta .oct-invoice .table-responsive {
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  background: var(--oct-surface);
  overflow-x: auto;
}
body.octopusta table.oct-inv-table {
  margin: 0;
  background: var(--oct-surface) !important;
  font-variant-numeric: tabular-nums;
}
body.octopusta table.oct-inv-table > thead > tr > th,
body.octopusta table.oct-inv-table > tbody > tr:first-child > th {
  background: #EEF1F8 !important;
  border-bottom: 1px solid var(--oct-border) !important;
  border-top: 0 !important;
  padding: 11px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--oct-muted);
  white-space: nowrap;
}
body.octopusta table.oct-inv-table > tbody > tr > td {
  padding: 11px 12px;
  font-size: 13px;
  color: var(--oct-text-2);
  border-top: 1px solid var(--oct-border) !important;
  vertical-align: middle;
}
body.octopusta table.oct-inv-table > tbody > tr:hover > td { background: var(--oct-primary-50); }
body.octopusta table.oct-inv-table small { color: var(--oct-muted); }

/* ---- totals ---- */
body.octopusta table.oct-inv-totals {
  margin: 0;
  background: var(--oct-surface);
  font-variant-numeric: tabular-nums;
}
body.octopusta table.oct-inv-totals > tbody > tr > th,
body.octopusta table.oct-inv-totals > tbody > tr > td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--oct-border) !important;
  padding: 9px 12px;
  font-size: 13px;
  vertical-align: middle;
}
body.octopusta table.oct-inv-totals > tbody > tr > th { font-weight: 600; color: var(--oct-text-2); }
body.octopusta table.oct-inv-totals > tbody > tr > td { color: var(--oct-text); font-weight: 700; }
body.octopusta table.oct-inv-totals > tbody > tr.oct-inv-grand > th,
body.octopusta table.oct-inv-totals > tbody > tr.oct-inv-grand > td {
  border-bottom: 0 !important;
  border-top: 2px solid var(--oct-border-strong) !important;
  padding-top: 13px;
  font-size: 16px;
  font-weight: 800;
  color: var(--oct-text);
}
body.octopusta table.oct-inv-totals > tbody > tr.oct-inv-grand > td .display_currency { color: var(--oct-primary); }

/* ---- section headings + note boxes ---- */
body.octopusta .oct-invoice h4,
body.octopusta .oct-invoice > .row > .col-sm-6 > strong,
body.octopusta .oct-invoice > .row > .col-md-12 > strong {
  display: block;
  margin: 4px 0 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--oct-text);
}
body.octopusta .oct-invoice > .row { margin-bottom: 18px; }
body.octopusta .oct-invoice > .row:last-child { margin-bottom: 0; }
body.octopusta .oct-inv-note {
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  background: var(--oct-surface) !important;
  box-shadow: none;
  font-size: 13px;
  color: var(--oct-text-2);
}

/* ---- footer actions ---- */
body.octopusta .oct-invoice + .modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--oct-border);
  background: var(--oct-surface);
  border-radius: 0 0 var(--oct-r-lg) var(--oct-r-lg);
}

/* Print keeps the document plain: no tinted rows, no page background. */
@media print {
  body.octopusta .oct-invoice { background: #fff; padding: 0; }
  body.octopusta .oct-invoice .invoice-col,
  body.octopusta .oct-invoice .table-responsive,
  body.octopusta .oct-inv-note { border-color: #ccc; }
  body.octopusta table.oct-inv-table > tbody > tr:hover > td { background: transparent; }
}

/* Activity log inside the invoice only — the partial is shared with other
   documents, so this stays scoped rather than restyling it app-wide. */
body.octopusta .oct-invoice table:not(.oct-inv-table):not(.oct-inv-totals) {
  margin: 0;
  font-size: 12.5px;
}
body.octopusta .oct-invoice table:not(.oct-inv-table):not(.oct-inv-totals) > thead > tr > th {
  border-bottom: 1px solid var(--oct-border) !important;
  border-top: 0 !important;
  padding: 9px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--oct-muted);
}
body.octopusta .oct-invoice table:not(.oct-inv-table):not(.oct-inv-totals) > tbody > tr > td {
  border-top: 1px solid var(--oct-border) !important;
  padding: 9px 10px;
  color: var(--oct-text-2);
  vertical-align: middle;
}
body.octopusta .oct-invoice .label,
body.octopusta .oct-invoice .badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   31. RTL popovers
   rtl.css pins every popover with:

       .popover { left: auto; right: 0 }

   Bootstrap positions a popover by writing an inline `left`, but once left,
   width and right are all set on an element whose direction is rtl, CSS drops
   `left` and honours `right` (CSS 2.1 §10.3.7). Every popover therefore flew to
   the right edge of the window instead of sitting under its trigger — measured
   at x=1317 for a trigger at x=809.

   Releasing `right` lets Bootstrap's inline `left` take effect again.
   -------------------------------------------------------------------------- */
html[dir="rtl"] body.octopusta .popover { right: auto; }

/* The arrow is mirrored to right:50% by rtl.css, which would likewise swallow
   the inline `left` Bootstrap sets when it has to nudge a popover away from the
   viewport edge. left:50% with a negative left margin is symmetric, so it
   centres the arrow in both directions and stays adjustable. */
html[dir="rtl"] body.octopusta .popover.top > .arrow,
html[dir="rtl"] body.octopusta .popover.bottom > .arrow {
  right: auto;
  left: 50%;
  margin-right: 0;
  margin-left: -11px;
}

/* --------------------------------------------------------------------------
   32. Language switcher in the navbar
   -------------------------------------------------------------------------- */
body.octopusta .oct-langmenu > a {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 15px 12px !important;
  color: var(--oct-text-2) !important;
  font-weight: 700;
}
body.octopusta .oct-langmenu > a:hover,
body.octopusta .oct-langmenu.open > a {
  background: var(--oct-primary-50) !important;
  color: var(--oct-primary) !important;
}
body.octopusta .oct-langmenu > a > i { font-size: 16px; }
body.octopusta .oct-langmenu__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  direction: ltr;
  unicode-bidi: isolate;
}
body.octopusta .oct-langmenu__list {
  min-width: 210px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--oct-border);
  border-radius: var(--oct-r);
  box-shadow: var(--oct-sh-3);
}
body.octopusta .oct-langmenu__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--oct-text-2);
}
body.octopusta .oct-langmenu__list > li > a:hover {
  background: var(--oct-primary-50);
  color: var(--oct-primary);
}
body.octopusta .oct-langmenu__list > li.active > a {
  background: var(--oct-primary-50);
  color: var(--oct-primary);
  font-weight: 700;
}
body.octopusta .oct-langmenu__list > li.active > a > i { font-size: 11px; }