/*
 * Modern skin over the Metronic layout4 RTL theme. Loaded last; theme files stay untouched.
 * Palette is taken from the Adel Electric logo (deep blue, teal, sky, green).
 * Status colors that come from the database (flags, row borders) are not overridden.
 */
:root {
    --ae-ink: #14233c;
    --ae-ink-soft: #4a5b78;
    --ae-blue: #303a3c;
    --ae-blue-dark: #1f2628;
    --ae-teal: #0f8f94;
    --ae-sky: #2aa3e6;
    --ae-green: #2fae66;
    --ae-amber: #f0a31a;
    --ae-red: #e04f4f;
    --ae-surface: #f2f5fa;
    --ae-card: #ffffff;
    --ae-line: #e0e6f0;
    --ae-radius: 10px;
    --ae-radius-sm: 7px;
    --ae-shadow: 0 1px 2px rgba(20, 35, 60, .05), 0 6px 18px rgba(20, 35, 60, .06);
    --ae-font: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- Type ---------- */
/* "html body" beats the inline body{font-size:1.5em} in the layout, which was sized for Lateef */
html body {
    font-family: var(--ae-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ae-ink);
    background: var(--ae-surface);
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .btn, html body .form-control, html body input, html body select, html body textarea, html body button,
html body .table, html body .badge, html body .label, html body .dropdown-menu, html body .select2-container,
html body .page-sidebar .page-sidebar-menu > li > a, html body .portlet > .portlet-title > .caption,
html body .modal-title, html body .breadcrumb, html body .help-block, html body .popover, html body .tooltip {
    font-family: var(--ae-font);
}
html body h1, html body h2, html body h3, html body h4 { font-weight: 700; color: var(--ae-ink); }
html body a { color: var(--ae-blue); transition: color .15s ease; }
html body a:hover, html body a:focus { color: var(--ae-blue-dark); text-decoration: none; }
html body :focus-visible { outline: 2px solid var(--ae-sky); outline-offset: 2px; }

/* ---------- Shell: header, sidebar, page ---------- */
html body.page-container-bg-solid, html body .page-container-bg-solid .page-content, html body .page-content {
    background: var(--ae-surface);
}
html body .page-header.navbar {
    background: var(--ae-card);
    border-bottom: 1px solid var(--ae-line);
    box-shadow: 0 1px 0 rgba(20, 35, 60, .02);
}
html body .page-header.navbar .page-top { background: transparent; box-shadow: none; }
html body .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle { border-radius: var(--ae-radius-sm) !important; }
html body .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover,
html body .page-header.navbar .top-menu .navbar-nav > li.dropdown.open > .dropdown-toggle { background: var(--ae-surface); }
html body .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i { color: var(--ae-ink-soft); }
html body .page-header.navbar .top-menu .navbar-nav > li.dropdown .badge { background: var(--ae-red); }

html body .page-sidebar, html body .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    background: var(--ae-card);
    border-radius: var(--ae-radius) !important;
    box-shadow: var(--ae-shadow);
}
html body .page-sidebar .page-sidebar-menu > li > a {
    color: var(--ae-ink);
    border: 0;
    margin: 2px 8px;
    border-radius: var(--ae-radius-sm) !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
html body .page-sidebar .page-sidebar-menu > li > a > i { color: var(--ae-ink-soft); transition: color .15s ease; }
html body .page-sidebar .page-sidebar-menu > li:hover > a,
html body .page-sidebar .page-sidebar-menu > li.open > a {
    background: var(--ae-surface);
    color: var(--ae-blue);
}
html body .page-sidebar .page-sidebar-menu > li:hover > a > i { color: var(--ae-blue); }
html body .page-sidebar .page-sidebar-menu > li.active > a,
html body .page-sidebar .page-sidebar-menu > li.active.open > a,
html body .page-sidebar .page-sidebar-menu > li.active > a:hover {
    background: var(--ae-blue);
    color: #fff;
}
html body .page-sidebar .page-sidebar-menu > li.active > a > i,
html body .page-sidebar .page-sidebar-menu > li.active > a > .selected { color: #fff; border: 0; }

html body .page-content .page-breadcrumb, html body .breadcrumb { background: transparent; color: var(--ae-ink-soft); }
html body .breadcrumb > li > a { color: var(--ae-ink-soft); }
html body .breadcrumb > .active { color: var(--ae-ink); font-weight: 500; }

/* ---------- Cards (portlets), modals ---------- */
html body .portlet.light, html body .portlet.light.bordered {
    background: var(--ae-card);
    border: 1px solid var(--ae-line) !important;
    border-radius: var(--ae-radius) !important;
    box-shadow: var(--ae-shadow);
}
html body .portlet.light > .portlet-title { border-bottom: 1px solid var(--ae-line); }
html body .portlet.light > .portlet-title > .caption { color: var(--ae-ink); font-weight: 700; }
html body .portlet > .portlet-title > .caption > .caption-subject,
html body .portlet > .portlet-title > .caption .font-green,
html body .portlet > .portlet-title > .caption > i { color: var(--ae-teal) !important; }
html body .portlet.box { border-radius: var(--ae-radius) !important; overflow: hidden; border-color: var(--ae-line); box-shadow: var(--ae-shadow); }
html body .portlet.box > .portlet-title { background: var(--ae-ink); }
html body .portlet.box.green > .portlet-title, html body .portlet.box.green-haze > .portlet-title { background: var(--ae-teal); }
html body .portlet.box.blue > .portlet-title { background: var(--ae-blue); }
html body .portlet.box.green, html body .portlet.box.blue, html body .portlet.box.green-haze { border-color: var(--ae-line); }

html body .modal-content { border: 0; border-radius: var(--ae-radius) !important; box-shadow: 0 20px 60px rgba(20, 35, 60, .25); }
html body .modal-header, html body .modal-footer { border-color: var(--ae-line); }
html body .fancybox-skin { border-radius: var(--ae-radius) !important; }

/* ---------- Forms ---------- */
html body .form-group { margin-bottom: 18px; }
html body label, html body .control-label {
    color: var(--ae-ink-soft);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
}
html body .form-control,
html body .select2-container--krajee-bs3 .select2-selection,
html body .select2-container--bootstrap .select2-selection,
html body .select2-container--default .select2-selection {
    height: 42px;
    padding: 8px 14px;
    font-size: 15px;
    color: var(--ae-ink);
    background-color: #f8fafd;
    border: 1px solid #d5ddea;
    border-radius: var(--ae-radius-sm) !important;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body textarea.form-control { height: auto; min-height: 96px; line-height: 1.7; resize: vertical; }
html body select.form-control[multiple], html body .select2-container .select2-selection--multiple { height: auto; min-height: 42px; }
html body .form-control:hover, html body .select2-container .select2-selection:hover { border-color: #b3c0d6; }
html body .form-control:focus,
html body .select2-container--focus .select2-selection,
html body .select2-container--open .select2-selection {
    background-color: #fff;
    border-color: var(--ae-blue);
    box-shadow: 0 0 0 3px rgba(48, 58, 60, .15);
    outline: 0;
}
html body .form-control::placeholder { color: #98a4b8; }
html body .form-control[disabled], html body .form-control[readonly], html body fieldset[disabled] .form-control {
    background-color: #eef1f6;
    color: var(--ae-ink-soft);
}
/* select2 single: vertically center the value and arrow inside the taller box */
html body .select2-container .select2-selection--single .select2-selection__rendered { line-height: 24px; padding: 0; color: var(--ae-ink); }
html body .select2-container .select2-selection--single .select2-selection__arrow { height: 40px; }
html body .select2-dropdown { border: 1px solid var(--ae-line); border-radius: var(--ae-radius-sm) !important; box-shadow: 0 12px 30px rgba(20, 35, 60, .14); overflow: hidden; }
html body .select2-container--krajee-bs3 .select2-results__option--highlighted[aria-selected],
html body .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background: var(--ae-blue); color: #fff; }
html body .select2-search--dropdown .select2-search__field { border-radius: var(--ae-radius-sm) !important; border: 1px solid #d5ddea; }

html body .input-group-addon {
    background: #eef1f6;
    border: 1px solid #d5ddea;
    color: var(--ae-ink-soft);
    border-radius: var(--ae-radius-sm) !important;
}
html body .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--ae-blue); width: 16px; height: 16px; vertical-align: -3px; }
html body .help-block { color: var(--ae-ink-soft); font-size: 13px; }
html body .has-error .form-control { border-color: var(--ae-red); background-color: #fff8f8; }
html body .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(224, 79, 79, .15); }
html body .has-error .help-block, html body .has-error .control-label { color: var(--ae-red); }
html body .has-success .form-control { border-color: var(--ae-green); }
/* compact inputs inside table cells and grid filters keep their density */
html body .table .form-control, html body .form-control.input-sm { height: 34px; padding: 4px 10px; font-size: 14px; }

/* ---------- Tables ---------- */
html body .table > thead > tr > th {
    color: var(--ae-ink-soft);
    font-weight: 700;
    border-bottom: 1px solid var(--ae-line);
    background: #f7f9fc;
}
html body .table > thead > tr > th a { color: var(--ae-ink-soft); }
/* sortable headers: hint on hover, arrow on the active column (Yii Sort adds .asc/.desc) */
html body .table > thead > tr > th a[data-sort]:hover { text-decoration: underline; }
html body .table > thead > tr > th a.asc::after,
html body .table > thead > tr > th a.desc::after {
    display: inline-block;
    margin-right: 5px;
    font-family: 'Glyphicons Halflings';
    font-weight: normal;
    line-height: 1;
}
html body .table > thead > tr > th a.asc::after { content: "\e151"; }
html body .table > thead > tr > th a.desc::after { content: "\e152"; }
html body .table > tbody > tr > td { border-top: 1px solid var(--ae-line); color: var(--ae-ink); }
html body .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
html body .table-hover > tbody > tr:hover, html body .table-hover > tbody > tr:hover > td { background: #eef3fd; }
html body .table.table-header > thead > tr > th, html body .servicesListing > thead > tr > th {
    background: var(--ae-ink);
    color: #fff;
}
html body .table.table-header > thead > tr > th a, html body .servicesListing > thead > tr > th a { color: #fff; }
html body .pagination > li > a, html body .pagination > li > span {
    color: var(--ae-ink);
    border-color: var(--ae-line);
    margin: 0 2px;
    border-radius: var(--ae-radius-sm) !important;
}
html body .pagination > .active > a, html body .pagination > .active > span,
html body .pagination > .active > a:hover { background: var(--ae-blue); border-color: var(--ae-blue); color: #fff; }

/* ---------- Badges, labels, alerts ---------- */
html body .badge, html body .label { border-radius: 999px !important; font-weight: 500; padding: 4px 10px; height: auto; }
html body .badge-success, html body .label-success { background: var(--ae-green); }
html body .badge-info, html body .label-info { background: var(--ae-sky); }
html body .badge-primary, html body .label-primary { background: var(--ae-blue); }
html body .badge-warning, html body .label-warning { background: var(--ae-amber); }
html body .badge-danger, html body .label-danger { background: var(--ae-red); }
html body .alert { border: 0; border-radius: var(--ae-radius-sm) !important; }
html body .alert-success { background: #e6f6ed; color: #1d6f41; }
html body .alert-info { background: #e5f3fc; color: #17618c; }
html body .alert-warning { background: #fdf3df; color: #8a5a06; }
html body .alert-danger { background: #fdeaea; color: #a32e2e; }

/* ---------- Buttons ---------- */
html body .btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--ae-radius-sm) !important;
    border-width: 1px;
    font-weight: 500;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
html body .btn.btn-circle { border-radius: 999px !important; }

html body .btn.blue:not(.btn-outline), html body .btn-primary, html body .btn.btn-primary.green {
    background-color: var(--ae-blue); border-color: var(--ae-blue); color: #fff;
}
html body .btn.green:not(.btn-outline), html body .btn.green-haze:not(.btn-outline),
html body .btn.green-meadow:not(.btn-outline), html body .btn-success {
    background-color: var(--ae-teal); border-color: var(--ae-teal); color: #fff;
}
html body .btn.yellow:not(.btn-outline), html body .btn-warning {
    background-color: var(--ae-amber); border-color: var(--ae-amber); color: #2b2003;
}
html body .btn.red:not(.btn-outline), html body .btn-danger {
    background-color: var(--ae-red); border-color: var(--ae-red); color: #fff;
}
html body .btn.default:not(.btn-outline), html body .btn-default {
    background-color: var(--ae-card); border-color: #cfd8e6; color: var(--ae-ink);
}
html body .btn-info { background-color: var(--ae-sky); border-color: var(--ae-sky); color: #fff; }

/* hover: lift, colored glow, and a light sweep across the button */
html body .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
html body .btn:hover::after, html body .btn:focus-visible::after { left: 130%; transition: left .55s ease; }
html body .btn:hover, html body .btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 35, 60, .18);
}
html body .btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(20, 35, 60, .18); }

html body .btn.blue:not(.btn-outline):hover, html body .btn-primary:hover, html body .btn.btn-primary.green:hover {
    background-color: var(--ae-blue-dark); border-color: var(--ae-blue-dark); color: #fff;
    box-shadow: 0 8px 18px rgba(48, 58, 60, .35);
}
html body .btn.green:not(.btn-outline):hover, html body .btn.green-haze:not(.btn-outline):hover,
html body .btn.green-meadow:not(.btn-outline):hover, html body .btn-success:hover {
    background-color: #0b7478; border-color: #0b7478; color: #fff;
    box-shadow: 0 8px 18px rgba(15, 143, 148, .35);
}
html body .btn.yellow:not(.btn-outline):hover, html body .btn-warning:hover {
    background-color: #dc920c; border-color: #dc920c; color: #2b2003;
    box-shadow: 0 8px 18px rgba(240, 163, 26, .4);
}
html body .btn.red:not(.btn-outline):hover, html body .btn-danger:hover {
    background-color: #c93c3c; border-color: #c93c3c; color: #fff;
    box-shadow: 0 8px 18px rgba(224, 79, 79, .35);
}
html body .btn.default:not(.btn-outline):hover, html body .btn-default:hover {
    background-color: var(--ae-surface); border-color: var(--ae-blue); color: var(--ae-blue);
}
html body .btn[disabled], html body .btn.disabled { transform: none; box-shadow: none; }
html body .btn[disabled]::after, html body .btn.disabled::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    html body .btn, html body .btn::after, html body a, html body .form-control { transition: none; }
    html body .btn:hover, html body .btn:focus-visible { transform: none; }
    html body .btn::after { display: none; }
}

/* ---------- Dropdowns ---------- */
html body .dropdown-menu {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-sm) !important;
    box-shadow: 0 12px 30px rgba(20, 35, 60, .14);
}
html body .dropdown-menu > li > a:hover { background: var(--ae-surface); color: var(--ae-blue); }

/* counterpart service card in the services lists status column (neutral light gray card, dark text).
   font sizes need !important + .servicesListing to beat ".servicesListing * { font-size: 18px !important }" */
.counterpart-card { margin-top: 10px; padding: 8px 10px; background: #e8e8ea; border: 1px solid #d2d3d6; border-radius: 8px !important; text-align: right; line-height: 1.6; color: #333; }
.counterpart-card__kind { color: #77797d; }
html body .counterpart-card a { color: #222; font-weight: 500; }
html body .counterpart-card a:hover { color: #9a6d00; }
.counterpart-card__status { margin-top: 4px; font-weight: 500; }
.counterpart-card__note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, .2); color: #555; max-height: 6.4em; overflow: auto; }
.counterpart-card__note.is-important { color: #c0392b; }
.servicesListing .counterpart-card, .servicesListing .counterpart-card * { font-size: 14px !important; }
.servicesListing .counterpart-card .counterpart-card__kind { font-size: 12px !important; }
.servicesListing .counterpart-card .counterpart-card__note { font-size: 12.5px !important; }

/* ---------- Services list: note meta, "More" column, payment pill, add-note button ----------
   sizes need !important + .servicesListing to beat ".servicesListing * { font-size: 18px !important }" */
/* each service row as a rounded card (RTL: first cell is the right edge, it carries the status color) */
html body .servicesListing { border-collapse: separate; border-spacing: 0 16px; margin-top: -16px; }
html body .servicesListing > thead > tr > th:first-child { border-radius: 0 10px 10px 0; }
html body .servicesListing > thead > tr > th:last-child { border-radius: 10px 0 0 10px; }
html body .servicesListing > tbody > tr.ae-card > td {
    background: #fff;
    border-top: 1px solid #d5d9de;
    border-bottom: 10px solid #303a3c;
}
html body .servicesListing > tbody > tr.ae-card > td:first-child { border-right: 8px solid var(--status-color, #d5d9de); border-radius: 0 12px 12px 0 !important; }
html body .servicesListing > tbody > tr.ae-card > td:last-child { border-left: 1px solid #d5d9de; border-radius: 12px 0 0 12px !important; }
html body .servicesListing > tbody > tr.ae-card:hover > td { background: #eef3fd; }
.ae-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: #5b6166; font-weight: 500; }
.ae-meta i { color: #8a9096; margin-left: 2px; }
.servicesListing .ae-meta, .servicesListing .ae-meta * { font-size: 13.5px !important; }

.servicesListing .ae-add-note { font-size: 15px !important; padding: 6px 12px; border-radius: 20px !important; background: #7a7676; color: #fff; cursor: pointer; }
.servicesListing .ae-add-note:hover { background: #625e5e; }

/* latest / important note boxes */
.servicesListing .alert.ae-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px !important; text-align: right; }
.servicesListing .alert-warning.ae-note { background: #fff6dc; border-color: #f3dfa0; color: #4a3800; font-weight: 500; }
.servicesListing .alert-danger.ae-note { background: #fdecec; border-color: #f2b8b8; color: #8a1f1f; }
.servicesListing .ae-note + .ae-meta { margin: 0 4px 8px; }

.servicesListing .ae-done { font-size: 14px !important; padding: 5px 12px; border-radius: 20px !important; background: #7a7676; color: #fff !important; cursor: pointer; font-weight: 600; }
.servicesListing .ae-done:hover { background: #625e5e; }

/* copy / edit path button group under the file number */
.ae-path { display: inline-flex; margin-top: 8px; border-radius: 20px !important; overflow: hidden; direction: rtl; }
.ae-path__btn { padding: 4px 10px; background: #7a7676; color: #fff; cursor: pointer; white-space: nowrap; }
.ae-path__btn + .ae-path__btn { border-right: 1px solid rgba(255, 255, 255, .35); }
.ae-path__btn:hover { background: #625e5e; }
/* related-name / MEW number badges above the path buttons */
.servicesListing .badge-success, .servicesListing .badge-info { background: #a6a6a6; }
.servicesListing .ae-path, .servicesListing .ae-path * { font-size: 13px !important; }
.servicesListing .ae-add-note i { font-size: 15px !important; margin-left: 4px; }

.ae-client { line-height: 1.7; color: #333; }
.ae-client__name { font-weight: 600; margin-bottom: 4px; }
.servicesListing .ae-client, .servicesListing .ae-client * { font-size: 15px !important; }
.servicesListing .ae-client .ae-client__name { font-size: 17px !important; }

.ae-more { display: flex; flex-direction: column; gap: 10px; }
.ae-more__row { display: flex; gap: 10px; align-items: center; color: #333; }
.ae-more__row svg { flex: none; color: var(--ae-blue); }
.ae-more__user { font-weight: 600; }
.ae-more__date { color: #222; font-weight: 500; white-space: nowrap; }
.servicesListing .ae-more, .servicesListing .ae-more * { font-size: 14px !important; }
.servicesListing .ae-more .ae-more__user { font-size: 15px !important; }

.ae-pay { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; min-width: 130px; padding: 6px 12px; border-radius: 20px !important; color: #fff !important; font-weight: 600; text-decoration: none !important; }
a.ae-pay { cursor: pointer; }
a.ae-pay:hover { filter: brightness(1.1); }
.ae-pay--1 { background: #2e9e5b; }
.ae-pay--2 { background: #e5a512; }
.ae-pay--3 { background: #d64545; }
.ae-pay--0 { background: #8a9096; }
.servicesListing .ae-pay, .servicesListing .ae-pay * { font-size: 14px !important; }

/* customer name on the customer view and service details pages */
html body .static-info .value.ae-customer-name { font-size: 16px; font-weight: 700; color: var(--ae-ink); }

/* ---------- Size tweaks: sidebar, breadcrumbs, search labels ---------- */
html body .page-sidebar .page-sidebar-menu > li > a { font-size: 16.5px; padding: 12px 15px; }
html body .page-sidebar .page-sidebar-menu > li > a > i { font-size: 19px; }
html body .page-sidebar .page-sidebar-menu .sub-menu > li > a { font-size: 15px; }
html body .page-content .page-breadcrumb, html body .breadcrumb, html body .breadcrumb > li > a { font-size: 16px; }
/* search forms are the GET forms */
html body form[method="get" i] label, html body form[method="get" i] .control-label { font-weight: 700; color: var(--ae-ink); }

/* ---------- Sidebar width: 300px (theme default is 235px) ---------- */
@media (min-width: 992px) {
    html body:not(.page-sidebar-closed) .page-sidebar { width: 300px; }
    html body:not(.page-sidebar-closed) .page-content-wrapper .page-content { margin-right: 300px; }
    /* logo box = sidebar + the 30px the theme adds around it */
    html body:not(.page-sidebar-closed) .page-header.navbar .page-logo { width: 330px; }
}

/* ---------- Main menu in the header, beside the logo (desktop); the sidebar copy is the mobile menu ---------- */
.ae-topnav { display: none; }
@media (min-width: 992px) {
    html body .page-sidebar .ae-sidebar-mainmenu,
    html body .page-sidebar .ae-sidebar-mainmenu + div { display: none; }
    /* theme floats .page-top left at its content width; let it fill the space beside the logo so the menu starts at the logo */
    html body .page-header.navbar .page-top { float: none; display: flow-root; width: auto; }
    /* user menu + date pinned to the far (left) edge, main menu to the logo (right) edge */
    html body .page-header.navbar .page-top .top-menu { float: left; margin: 0; }
    html body .page-header.navbar .page-top .top-menu .navbar-nav { margin-left: 12px; }
    html body .page-header.navbar .ae-topnav { display: block; float: right; margin: 0; padding: 0; list-style: none; height: 75px; }
    html body .ae-topnav > li { float: right; margin: 17px 2px 0; }
    html body .ae-topnav > li > a {
        display: block; padding: 9px 14px; line-height: 22px; font-size: 16px; font-weight: 500;
        color: var(--ae-ink); border-radius: var(--ae-radius-sm) !important;
        transition: background .15s ease, color .15s ease;
    }
    html body .ae-topnav > li > a > i { color: var(--ae-ink-soft); font-size: 17px; margin-left: 4px; vertical-align: -2px; transition: color .15s ease; }
    html body .ae-topnav > li > a:hover, html body .ae-topnav > li > a:focus { background: var(--ae-surface); color: var(--ae-blue); text-decoration: none; }
    html body .ae-topnav > li.active > a, html body .ae-topnav > li.active > a:hover { background: var(--ae-blue); color: #fff; }
    html body .ae-topnav > li.active > a > i { color: #fff; }
}
/* tighter on small desktops so the row never wraps */
@media (min-width: 992px) and (max-width: 1280px) {
    html body .ae-topnav > li > a { padding: 9px 8px; font-size: 14.5px; }
    html body .ae-topnav > li > a > i { display: none; }
}

/* floating "edit design" panel (services table only) — prefs live in localStorage as body.ae-pref-* */
.ae-design { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1040; display: flex; align-items: center; direction: ltr; }
.ae-design__toggle { width: 44px; height: 44px; border: 0; border-radius: 12px 0 0 12px; background: #7a7676; color: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.ae-design__toggle:hover { background: #625e5e; }
.ae-design__menu { display: none; order: -1; background: #fff; border: 1px solid #d5d9de; border-radius: 12px 0 0 12px; padding: 10px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); direction: rtl; white-space: nowrap; }
.ae-design.open .ae-design__menu { display: block; }
.ae-design__menu label { margin: 0; font-weight: 500; cursor: pointer; }
.ae-design__menu input { margin-left: 6px; }
html body.ae-pref-highlightStatus .servicesListing > tbody > tr.ae-card > td.ae-status-cell,
html body.ae-pref-highlightStatus .servicesListing > tbody > tr.ae-card:hover > td.ae-status-cell { background: color-mix(in srgb, var(--status-color, #d5d9de) 22%, #fff) !important; }