/* =========================================================================
   PEAK Design System — Dashboard
   =========================================================================
   One design language for the whole dashboard: tokens first, then the
   components every module already uses (cards, tables, forms, modals,
   dropdowns, tabs, badges, alerts, pagination, datepicker, charts, empty
   and loading states).

   Loaded last, so it establishes the PEAK look on top of the existing
   theme without touching the legacy stylesheets. New modules inherit it
   automatically by using the same markup as the existing ones.

   Direction: written with logical properties (margin-inline,
   padding-inline, inset-inline, border-start/end) so Arabic (RTL) and
   English (LTR) share one implementation.
   ========================================================================= */

:root {
    /* Brand palette, taken from the PEAK logo */
    --peak-navy: #12284c;
    --peak-navy-700: #1b3763;
    --peak-navy-600: #24457a;
    --peak-blue: #1b75bc;
    --peak-blue-600: #1668a8;
    --peak-blue-050: #eaf3fb;
    --peak-green: #56a544;
    --peak-green-600: #4a9139;
    --peak-green-050: #eef7ec;

    /* Neutrals */
    --peak-white: #ffffff;
    --peak-page: #f4f6fa;
    --peak-line: #e8ecf3;
    --peak-text: #3a4250;
    --peak-text-strong: #1f2733;
    --peak-muted: #7b8698;

    /* Feedback (kept inside the brand range) */
    --peak-success: var(--peak-green);
    --peak-info: var(--peak-blue);
    --peak-warning: #d98a1f;
    --peak-danger: #d0474b;

    /* Shape & depth */
    --peak-radius-sm: 8px;
    --peak-radius: 12px;
    --peak-radius-lg: 16px;
    --peak-shadow: 0 1px 2px rgba(18, 40, 76, .04), 0 8px 24px rgba(18, 40, 76, .06);
    --peak-shadow-sm: 0 1px 2px rgba(18, 40, 76, .06);

    /* Rhythm */
    --peak-gap: 1.5rem;
    --peak-sidebar: 260px;
    --peak-control: 40px;

    /* Type scale */
    --peak-text-page-title: 1.375rem;
    --peak-text-card-title: 1.0625rem;
    --peak-text-body: 13.5px;
    --peak-text-label: 13px;
    --peak-text-small: 11.5px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
    background: var(--peak-page);
    color: var(--peak-text);
    font-family: "Poppins", "Lato", "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.header-title,
.page-title {
    color: var(--peak-text-strong);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Hierarchy: page title > card title > label > secondary text. */
.page-title-area .breadcrumbs-area h4.page-title {
    font-size: var(--peak-text-page-title);
    font-weight: 600;
}

.card .header-title,
.modal-title {
    font-size: var(--peak-text-card-title);
    font-weight: 600;
}

.card h5:not(.header-title) {
    font-size: .95rem;
    font-weight: 600;
}

small,
.small,
.peak-eyebrow,
.form-text {
    line-height: 1.5;
}

/* Numbers stay aligned in tables and KPI cards, in both languages. */
.cell-numeric,
.peak-kpi__value,
.peak-list__end,
td.cell-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Arabic needs a little more air and no negative tracking. */
[dir="rtl"] body {
    font-size: 14.5px;
    line-height: 1.8;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .header-title,
[dir="rtl"] .page-title,
[dir="rtl"] .btn,
[dir="rtl"] label {
    letter-spacing: normal;
}

[dir="rtl"] .peak-eyebrow,
[dir="rtl"] .peak-nav-section,
[dir="rtl"] .table thead th,
[dir="rtl"] .dropdown-header,
[dir="rtl"] .peak-sidebar-footer {
    letter-spacing: .04em;
}

a {
    color: var(--peak-blue);
}

a:hover,
a:focus {
    color: var(--peak-blue-600);
    text-decoration: none;
}

.text-muted {
    color: var(--peak-muted) !important;
}

/* -------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------- */
/* The shell offset lives on .page-container (as in the base theme) and is
   expressed logically, so the sidebar sits on the right in Arabic and on the
   left in English from a single declaration. */
.page-container {
    background: var(--peak-page);
    padding-left: 0;
    padding-right: 0;
    padding-inline-start: var(--peak-sidebar);
}

.sbar_collapsed.page-container {
    padding-inline-start: 0;
}

.main-content {
    background: transparent;
    padding-inline: clamp(1rem, 2vw, 2rem);
    padding-bottom: 2rem;
    min-width: 0;
}

.main-content-inner {
    padding: 0;
}

/* Sidebar ----------------------------------------------------------------- */
.sidebar-menu {
    background: var(--peak-navy);
    width: var(--peak-sidebar);
    left: auto;
    right: auto;
    inset-inline-start: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, .06);
}

.sbar_collapsed .sidebar-menu {
    left: auto;
    right: auto;
    inset-inline-start: calc(var(--peak-sidebar) * -1);
}

.sidebar-menu .main-menu {
    padding: .5rem 0 0;
    height: calc(100% - 92px);
}

.sidebar-menu .sidebar-header {
    background: transparent;
    border-block-end: 1px solid rgba(255, 255, 255, .08);
    padding: 1.1rem 1rem;
    height: auto;
    display: flex;
    justify-content: center;
}

/* The logo is never restyled, only placed on a clean white plate so the
   original colours stay intact on the navy sidebar. */
.peak-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-content: center;
}

.peak-brand__plate {
    background: var(--peak-white);
    border-radius: var(--peak-radius);
    padding: .5rem;
    box-shadow: var(--peak-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.peak-brand__plate img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}

.peak-brand--compact .peak-brand__plate img {
    max-height: 40px;
}

.peak-brand__name {
    color: var(--peak-white);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: .04em;
}

.peak-brand__name small {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sidebar-menu .main-menu {
    background: transparent;
    padding-bottom: 6rem;
}

/* Section grouping: a plain list item, so metisMenu ignores it */
.sidebar-menu .metismenu li.peak-nav-label {
    background: transparent;
    border: 0;
    pointer-events: none;
}

.peak-nav-section {
    color: rgba(255, 255, 255, .42);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.1rem 1.35rem .3rem;
    margin: 0;
}

.sidebar-menu .metismenu a {
    color: rgba(255, 255, 255, .78);
    border: 0;
    border-radius: var(--peak-radius-sm);
    margin-inline: .6rem;
    padding: .6rem .8rem;
    min-height: 42px;
    font-size: var(--peak-text-body);
    font-weight: 500;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: .7rem;
    transition: background-color .15s ease, color .15s ease;
}

/* Icon column is fixed, so labels line up in both directions. */
.sidebar-menu .metismenu a i {
    font-size: 15px;
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

.sidebar-menu .metismenu a span {
    flex: 1 1 auto;
    text-align: start;
    min-width: 0;
}

.sidebar-menu .metismenu a:hover,
.sidebar-menu .metismenu a:focus {
    background: rgba(255, 255, 255, .07);
    color: var(--peak-white);
}

/* Active leaf: green fill. Active parent of an open submenu stays quiet with a
   green icon, so only one element per branch carries the accent. */
.sidebar-menu .metismenu li.active > a {
    background: var(--peak-green);
    color: var(--peak-white);
    box-shadow: 0 4px 12px rgba(86, 165, 68, .22);
}

.sidebar-menu .metismenu li.active > a i {
    color: var(--peak-white);
}

.sidebar-menu .metismenu > li.active > a:has(+ ul) {
    background: rgba(255, 255, 255, .08);
    color: var(--peak-white);
    box-shadow: none;
}

.sidebar-menu .metismenu > li.active > a:has(+ ul) i {
    color: var(--peak-green);
}

/* Submenus: quiet list with a green rail on the active row */
.sidebar-menu .metismenu ul {
    background: rgba(0, 0, 0, .14);
    border-radius: var(--peak-radius-sm);
    margin: .2rem .65rem .4rem;
    padding: .25rem 0;
}

.sidebar-menu .metismenu ul a {
    margin-inline: .3rem;
    padding-inline-start: 2rem;
    min-height: 38px;
    font-size: 13px;
    border-inline-start: 2px solid transparent;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.sidebar-menu .metismenu ul li.active > a {
    background: rgba(86, 165, 68, .18);
    color: var(--peak-white);
    font-weight: 600;
    border-inline-start-color: var(--peak-green);
    box-shadow: none;
}

.sidebar-menu .metismenu .has-arrow::after {
    border-color: rgba(255, 255, 255, .5);
}

/* Bottom branding / motto */
.peak-sidebar-footer {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem 1.5rem 1.25rem;
    background: linear-gradient(to top, var(--peak-navy) 60%, rgba(18, 40, 76, 0));
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}

.peak-sidebar-footer strong {
    display: block;
    color: var(--peak-white);
    font-size: 11px;
    letter-spacing: .18em;
    margin-bottom: .2rem;
}

.peak-sidebar-footer .peak-dot {
    color: var(--peak-green);
}

/* Topbar ------------------------------------------------------------------ */
.header-area {
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius);
    box-shadow: var(--peak-shadow-sm);
    margin-block: 1rem .25rem;
    padding: .65rem 1rem;
}

.peak-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    row-gap: .5rem;
}

.peak-topbar__start,
.peak-topbar__end {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Every topbar control shares one height and one alignment. */
.peak-topbar .peak-icon-btn,
.peak-topbar .peak-user,
.peak-topbar .peak-context,
.peak-topbar .peak-search input,
.peak-topbar .language-switcher__toggle,
.peak-topbar .switch {
    height: var(--peak-control);
}

.peak-topbar .notification-area > li {
    display: inline-flex;
    align-items: center;
}

.peak-topbar__start {
    flex: 1 1 320px;
    min-width: 0;
}

.peak-topbar__end {
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-area .nav-btn {
    float: none !important;
    padding: 0;
    cursor: pointer;
}

.header-area .nav-btn span {
    background: var(--peak-navy);
    height: 2px;
    border-radius: 2px;
}

/* Search */
.peak-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 380px;
    min-width: 160px;
}

.peak-search input {
    width: 100%;
    height: var(--peak-control);
    border: 1px solid var(--peak-line);
    background: var(--peak-page);
    border-radius: 999px;
    padding-inline: 2.4rem .9rem;
    font-size: 13px;
    color: var(--peak-text);
}

.peak-search input:focus {
    outline: none;
    background: var(--peak-white);
    border-color: var(--peak-blue);
    box-shadow: 0 0 0 3px var(--peak-blue-050);
}

.peak-search i {
    position: absolute;
    inset-inline-start: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--peak-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Topbar icon buttons */
.peak-icon-btn {
    width: var(--peak-control);
    height: var(--peak-control);
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--peak-line);
    background: var(--peak-white);
    color: var(--peak-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}

.peak-icon-btn:hover,
.peak-icon-btn:focus {
    background: var(--peak-blue-050);
    border-color: var(--peak-blue);
    color: var(--peak-navy);
}

.peak-icon-btn .peak-dot-badge {
    position: absolute;
    top: 7px;
    inset-inline-end: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--peak-green);
    border: 2px solid var(--peak-white);
}

/* Language switcher: same chip language as the other controls. */
.peak-topbar .language-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--peak-line);
    border-radius: 999px;
    background: var(--peak-white);
    color: var(--peak-navy);
    padding-inline: .8rem;
    font-size: 12.5px;
    font-weight: 600;
}

.peak-topbar .language-switcher__toggle:hover,
.peak-topbar .language-switcher__toggle:focus {
    border-color: var(--peak-blue);
    opacity: 1;
}

.peak-topbar .language-switcher__toggle i {
    color: var(--peak-blue);
    font-size: 13px;
}

/* Dark mode switch, restyled from the base theme pill into an icon button so it
   matches the other topbar controls. */
.peak-topbar .switch {
    width: var(--peak-control);
    margin: 0;
}

.peak-topbar .slider-color-mode {
    border-radius: 50%;
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    transition: background-color .15s ease, border-color .15s ease;
}

.peak-topbar .slider-color-mode:before {
    inset: 0;
    height: auto;
    width: auto;
    left: 0;
    bottom: 0;
    background: transparent;
    color: var(--peak-navy);
    font-size: 13px;
    line-height: 38px;
    transform: none;
}

.peak-topbar input:checked + .slider-color-mode {
    background: var(--peak-navy);
    border-color: var(--peak-navy);
}

.peak-topbar input:checked + .slider-color-mode:before {
    color: var(--peak-white);
    transform: none;
}

/* Academy context chip */
.peak-context {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--peak-blue-050);
    border: 1px solid #d7e7f6;
    color: var(--peak-navy);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: 12.5px;
    font-weight: 600;
    max-width: 260px;
}

.peak-context i {
    color: var(--peak-blue);
}

.peak-context span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User menu */
.peak-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: 999px;
    /* Logical padding: the avatar always sits at the inline start. */
    padding-block: .25rem;
    padding-inline-start: .3rem;
    padding-inline-end: .8rem;
    cursor: pointer;
}

.peak-user:hover {
    border-color: var(--peak-blue);
}

.peak-user img,
.peak-user .peak-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--peak-navy);
    color: var(--peak-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.peak-user__meta {
    line-height: 1.15;
    text-align: start;
}

.peak-user__meta strong {
    display: block;
    font-size: 13px;
    color: var(--peak-text-strong);
    font-weight: 600;
}

.peak-user__meta small {
    color: var(--peak-muted);
    font-size: 11px;
}

/* Legacy topbar list, kept usable inside the new bar */
.notification-area {
    display: flex;
    align-items: center;
    gap: .6rem;
    float: none !important;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-area > li {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Page header ------------------------------------------------------------- */
.page-title-area {
    background: transparent;
    box-shadow: none;
    padding: 1.25rem 0 .25rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Decorative bar of the base theme */
.page-title-area:before,
.page-title-area:after {
    display: none !important;
}

.peak-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
}

.page-title-area .breadcrumbs-area h4.page-title {
    float: none !important;
    font-size: 1.35rem;
    margin: 0 0 .15rem;
}

.page-title-area .breadcrumbs {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--peak-muted);
}

.page-title-area .breadcrumbs li a {
    color: var(--peak-muted);
}

.page-title-area .breadcrumbs li + li::before {
    content: "/";
    color: var(--peak-line);
    margin-inline-end: .35rem;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-lg);
    box-shadow: var(--peak-shadow);
    margin-bottom: var(--peak-gap);
}

/* The legacy list markup opens with .col-12.mt-5 (3rem), which double spaced
   every screen under the new page header. One rhythm instead. */
.main-content .row > [class*="col-"].mt-5 {
    margin-top: 0 !important;
}

.main-content .padding-bottom-30 {
    padding-bottom: 0 !important;
}

.card .card {
    margin-bottom: 0;
}

.card-body {
    padding: 1.5rem;
}

/* The legacy markup nests a card inside a card on most list screens: the
   inner one is flattened so the page keeps one clean surface. */
.card .card {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.card .card > .card-body {
    padding: 0;
}

.card .card-body .col-12.mt-5 {
    margin-top: 0 !important;
}

.card .header-title {
    font-size: 1.05rem;
    margin: 0;
}

.peak-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.peak-card-head .peak-eyebrow {
    display: block;
    color: var(--peak-muted);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* KPI card: equal height in a row, one padding, one hierarchy. */
.peak-kpi {
    height: 100%;
    min-height: 104px;
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-lg);
    box-shadow: var(--peak-shadow);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.peak-kpi:hover {
    border-color: #dbe3ee;
    box-shadow: 0 2px 4px rgba(18, 40, 76, .05), 0 12px 26px rgba(18, 40, 76, .07);
}

.peak-kpi > div {
    min-width: 0;
}

.peak-kpi__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--peak-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--peak-blue-050);
    color: var(--peak-blue);
}

.peak-kpi--green .peak-kpi__icon {
    background: var(--peak-green-050);
    color: var(--peak-green-600);
}

.peak-kpi--navy .peak-kpi__icon {
    background: #e9edf5;
    color: var(--peak-navy);
}

.peak-kpi__value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--peak-text-strong);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.peak-kpi__label {
    color: var(--peak-muted);
    font-size: 12.5px;
    font-weight: 500;
    margin: .2rem 0 0;
    line-height: 1.4;
}

/* Money values are longer than counters: keep them on one comfortable line. */
.peak-kpi__value:has(+ .peak-kpi__label) {
    max-width: 100%;
}

.peak-kpi__hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .4rem;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--peak-green-600);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--peak-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:focus,
.btn:active:focus {
    box-shadow: 0 0 0 3px var(--peak-blue-050);
}

.btn-primary {
    background: var(--peak-navy);
    border-color: var(--peak-navy);
    color: var(--peak-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--peak-navy-700);
    border-color: var(--peak-navy-700);
    color: var(--peak-white);
}

.btn-success {
    background: var(--peak-green);
    border-color: var(--peak-green);
    color: var(--peak-white);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--peak-green-600);
    border-color: var(--peak-green-600);
    color: var(--peak-white);
}

.btn-info {
    background: var(--peak-blue);
    border-color: var(--peak-blue);
    color: var(--peak-white);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    background: var(--peak-blue-600);
    border-color: var(--peak-blue-600);
    color: var(--peak-white);
}

.btn-secondary {
    background: var(--peak-white);
    border-color: var(--peak-line);
    color: var(--peak-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: var(--peak-page);
    border-color: #d8dfea;
    color: var(--peak-text-strong);
}

.btn-warning {
    background: #fdf3e3;
    border-color: #f6e3c4;
    color: #9a6413;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #fbe9cf;
    color: #7f5210;
}

.btn-danger {
    background: var(--peak-danger);
    border-color: var(--peak-danger);
    color: var(--peak-white);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #ba3b3f;
    border-color: #ba3b3f;
    color: var(--peak-white);
}

.btn-dark {
    background: var(--peak-navy);
    border-color: var(--peak-navy);
}

.btn-sm,
.btn-xs {
    padding: .35rem .7rem;
    font-size: 12.5px;
    border-radius: var(--peak-radius-sm);
}

.btn-lg {
    padding: .7rem 1.4rem;
    font-size: 14.5px;
}

/* Row action buttons: quiet, evenly spaced, aligned on one line */
td .btn-sm,
td .btn-xs,
td .btn {
    margin-bottom: 0 !important;
    margin-inline-end: .35rem;
    vertical-align: middle;
}

td .btn:last-child,
td form:last-child .btn {
    margin-inline-end: 0;
}

/* The action column keeps its buttons together. */
.table td:last-child,
table.dataTable tbody td:last-child {
    white-space: nowrap;
}

td .btn-sm i,
td .btn-xs i {
    font-size: 13px;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
label {
    color: var(--peak-text-strong);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.nice-select {
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-sm);
    color: var(--peak-text);
    font-size: 13.5px;
    min-height: 42px;
    padding: .5rem .85rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
    min-height: 90px;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--peak-blue);
    box-shadow: 0 0 0 3px var(--peak-blue-050);
    background: var(--peak-white);
    color: var(--peak-text);
}

.form-control::placeholder {
    color: #a9b2c1;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--peak-page);
    color: var(--peak-muted);
}

select.form-control:not([multiple]) {
    /* Chevron follows the reading direction. */
    background-image: linear-gradient(45deg, transparent 50%, var(--peak-muted) 50%),
                      linear-gradient(135deg, var(--peak-muted) 50%, transparent 50%);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    background-position-y: calc(50% - 1px), calc(50% - 1px);
    padding-inline-end: 2rem;
    appearance: none;
    -webkit-appearance: none;
}

[dir="ltr"] select.form-control:not([multiple]) {
    background-position-x: calc(100% - 18px), calc(100% - 13px);
}

[dir="rtl"] select.form-control:not([multiple]) {
    background-position-x: 13px, 18px;
}

.form-text,
small.form-text {
    font-size: 11.5px;
    color: var(--peak-muted);
}

.text-danger {
    color: var(--peak-danger) !important;
}

/* Inline filter bars */
.form-inline .form-control,
.form-inline .btn {
    margin-bottom: .5rem;
}

/* Checkbox / radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--peak-green);
    border-color: var(--peak-green);
}

.custom-control-label::before {
    border-color: #c9d2e0;
}

/* Form layout ------------------------------------------------------------
   Every dashboard form lives directly inside a card body, so the two column
   desktop grid is applied once here instead of restructuring each module.
   Rows, headings, tables, repeaters and action rows keep the full width. */
.card-body > form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
}

.card-body > form > .form-group {
    margin-bottom: 1.15rem;
}

.card-body > form > *:not(.form-group) {
    grid-column: 1 / -1;
}

/* Long inputs and anything explicitly marked stay on one line. */
.card-body > form > .form-group:has(textarea),
.card-body > form > .form-group.peak-col-full {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .card-body > form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Action row at the end of a form */
.card-body > form > .btn,
.card-body > form > button[type="submit"] {
    justify-self: start;
    margin-top: .5rem;
}

/* Translatable field group */
.translatable-group {
    background: var(--peak-page);
    border: 1px dashed var(--peak-line);
    border-radius: var(--peak-radius);
    padding: 1rem 1rem .25rem;
    margin-bottom: 1.15rem;
}

/* Datepicker (bootstrap-datepicker) */
.datepicker {
    border: 1px solid var(--peak-line) !important;
    border-radius: var(--peak-radius) !important;
    box-shadow: var(--peak-shadow) !important;
    padding: .5rem !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background: var(--peak-green) !important;
    background-image: none !important;
    color: var(--peak-white) !important;
    border-radius: var(--peak-radius-sm);
}

.datepicker table tr td.today {
    background: var(--peak-blue-050) !important;
    background-image: none !important;
    color: var(--peak-navy) !important;
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
/* Rounded, self scrolling table container: no page level horizontal
   overflow on small screens. */
.data-tables,
.table-responsive {
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius);
    overflow: hidden;
}

.data-tables .dataTables_wrapper,
.data-tables > table {
    overflow-x: auto;
}

.data-tables table,
.table-responsive table {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.data-tables .dataTables_wrapper > .row:first-child,
.data-tables .dataTables_wrapper > .row:last-child {
    padding: .75rem 1rem;
    margin: 0;
}

.table {
    color: var(--peak-text);
    margin-bottom: 0;
}

.table thead th,
table.dataTable thead th,
.data-tables table thead th {
    background: var(--peak-page);
    color: var(--peak-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0 !important;
    border-block-end: 1px solid var(--peak-line) !important;
    padding: .85rem 1rem;
    white-space: nowrap;
}

.table td,
table.dataTable tbody td,
.data-tables table tbody td {
    border: 0 !important;
    border-block-end: 1px solid var(--peak-line) !important;
    padding: .85rem 1rem;
    vertical-align: middle;
    font-size: 13.5px;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: #fafbfe;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--peak-line);
}

/* Detail tables (key/value) */
.table-bordered th {
    background: var(--peak-page);
    color: var(--peak-muted);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    width: 40%;
}

.data-tables .dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-sm);
    min-height: 36px;
    padding: .25rem .6rem;
    background: var(--peak-white);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--peak-radius-sm) !important;
    border: 1px solid var(--peak-line) !important;
    color: var(--peak-text) !important;
    margin-inline: 2px;
    background: var(--peak-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--peak-navy) !important;
    border-color: var(--peak-navy) !important;
    color: var(--peak-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--peak-page) !important;
    color: var(--peak-navy) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--peak-muted);
    font-size: 12.5px;
}

/* Laravel pagination */
.pagination {
    gap: .25rem;
}

.page-link {
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-sm);
    color: var(--peak-text);
    font-size: 13px;
}

.page-item.active .page-link {
    background: var(--peak-navy);
    border-color: var(--peak-navy);
    color: var(--peak-white);
}

/* -------------------------------------------------------------------------
   Badges, alerts, tabs, dropdowns, modals
   ------------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    padding: .4em .75em;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

.badge-success {
    background: var(--peak-green-050);
    color: var(--peak-green-600);
}

.badge-danger {
    background: #fdeced;
    color: #b23a3e;
}

.badge-warning {
    background: #fdf3e3;
    color: #9a6413;
}

.badge-info,
.badge-primary {
    background: var(--peak-blue-050);
    color: var(--peak-blue-600);
}

.badge-secondary {
    background: var(--peak-page);
    color: var(--peak-muted);
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--peak-radius);
    font-size: 13.5px;
    padding: .9rem 1.1rem;
}

.alert-success {
    background: var(--peak-green-050);
    border-color: #d6ecd0;
    color: #35692a;
}

.alert-danger {
    background: #fdeced;
    border-color: #f7d5d7;
    color: #93292d;
}

.alert-warning {
    background: #fdf3e3;
    border-color: #f6e3c4;
    color: #7f5210;
}

.alert-info,
.alert-primary {
    background: var(--peak-blue-050);
    border-color: #d7e7f6;
    color: #14527f;
}

.nav-tabs {
    border-bottom: 1px solid var(--peak-line);
    gap: .25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    color: var(--peak-muted);
    font-size: 13.5px;
    font-weight: 600;
    padding: .65rem 1rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: transparent;
    color: var(--peak-navy);
    border-block-end-color: var(--peak-green);
}

.dropdown-menu {
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius);
    box-shadow: var(--peak-shadow);
    padding: .4rem;
    font-size: 13.5px;
    min-width: 12rem;
    margin-top: .35rem;
}

/* Menus open towards the inline end in both directions. */
.dropdown-menu-right {
    right: auto;
    left: auto;
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.dropdown-item {
    border-radius: var(--peak-radius-sm);
    padding: .5rem .75rem;
    color: var(--peak-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--peak-page);
    color: var(--peak-navy);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--peak-green-050);
    color: var(--peak-green-600);
}

.dropdown-header {
    color: var(--peak-muted);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5rem .75rem;
}

.modal-content {
    border: 0;
    border-radius: var(--peak-radius-lg);
    box-shadow: 0 24px 60px rgba(18, 40, 76, .18);
}

.modal-header,
.modal-footer {
    border-color: var(--peak-line);
    padding: 1.1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-title {
    font-size: 1.05rem;
}

.modal-header .close {
    color: var(--peak-muted);
    text-shadow: none;
    opacity: 1;
    margin-inline-start: auto;
    margin-inline-end: -.5rem;
}

/* -------------------------------------------------------------------------
   Charts (dependency free, built from markup)
   ------------------------------------------------------------------------- */
.peak-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(.4rem, 1.2vw, 1rem);
    height: 200px;
    padding-top: .75rem;
    padding-bottom: .5rem;
    border-block-end: 1px solid var(--peak-line);
}

.peak-chart__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    height: 100%;
    min-width: 0;
}

.peak-chart__bar {
    width: 100%;
    max-width: 38px;
    background: var(--peak-blue-050);
    border-radius: var(--peak-radius-sm);
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.peak-chart__fill {
    width: 100%;
    background: var(--peak-blue);
    border-radius: var(--peak-radius-sm);
    min-height: 3px;
    transition: height .3s ease;
}

.peak-chart__col--accent .peak-chart__fill {
    background: var(--peak-green);
}

.peak-chart__label {
    font-size: 11px;
    color: var(--peak-muted);
    white-space: nowrap;
}

.peak-chart__value {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--peak-text-strong);
}

.peak-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--peak-muted);
}

.peak-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end: .4rem;
    background: var(--peak-blue);
}

.peak-legend span.is-accent::before {
    background: var(--peak-green);
}

/* Horizontal meter, used for distributions and rates */
.peak-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--peak-page);
    overflow: hidden;
}

.peak-meter__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--peak-blue);
}

.peak-meter__fill--green {
    background: var(--peak-green);
}

.peak-meter__fill--navy {
    background: var(--peak-navy);
}

.peak-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13px;
    margin-bottom: .35rem;
}

.peak-stat-row + .peak-meter {
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   Lists, empty states, loading states
   ------------------------------------------------------------------------- */
.peak-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.peak-list > li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 0;
    border-block-end: 1px solid var(--peak-line);
}

.peak-list > li:last-child {
    border-block-end: 0;
    padding-bottom: 0;
}

.peak-list__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--peak-radius-sm);
    background: var(--peak-page);
    color: var(--peak-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.peak-list__body {
    min-width: 0;
    flex: 1;
}

.peak-list__body strong {
    display: block;
    font-size: 13.5px;
    color: var(--peak-text-strong);
    font-weight: 600;
}

.peak-list__body small {
    color: var(--peak-muted);
    font-size: 11.5px;
}

.peak-list__end {
    margin-inline-start: auto;
    text-align: end;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--peak-text-strong);
    white-space: nowrap;
}

.peak-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--peak-muted);
}

/* An empty chart keeps the card the same height as a filled one. */
.card-body > .peak-empty {
    min-height: 212px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.peak-empty i {
    display: block;
    font-size: 26px;
    color: #c3cbd9;
    margin-bottom: .6rem;
}

.peak-empty p {
    margin: 0;
    font-size: 13px;
}

.peak-skeleton {
    background: linear-gradient(90deg, var(--peak-page) 25%, #eaeef6 37%, var(--peak-page) 63%);
    background-size: 400% 100%;
    animation: peak-shimmer 1.4s ease infinite;
    border-radius: var(--peak-radius-sm);
    height: 14px;
}

@keyframes peak-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.peak-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--peak-blue-050);
    border-top-color: var(--peak-blue);
    display: inline-block;
    animation: peak-spin .7s linear infinite;
    vertical-align: -3px;
}

@keyframes peak-spin {
    to { transform: rotate(360deg); }
}

#preloader {
    background: var(--peak-page);
}

#preloader .loader {
    border-color: var(--peak-blue-050);
    border-top-color: var(--peak-green);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
footer .footer-area {
    background: transparent;
    border-block-start: 1px solid var(--peak-line);
    box-shadow: none;
    color: var(--peak-muted);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem clamp(1rem, 2vw, 2rem);
    margin-inline: 0;
}

footer .footer-area p {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Login screen
   ------------------------------------------------------------------------- */
.peak-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--peak-page);
}

.login-area {
    background: var(--peak-page) !important;
}

.login-box {
    background: var(--peak-white);
    border: 1px solid var(--peak-line);
    border-radius: var(--peak-radius-lg);
    box-shadow: var(--peak-shadow);
    padding: 2.5rem !important;
    max-width: 460px;
    margin: 3rem auto;
}

.login-form-head {
    text-align: center;
}

.login-form-head h4 {
    color: var(--peak-text-strong);
}

.login-form-head p {
    color: var(--peak-muted);
    font-size: 13px;
}

.login-form-body .form-gp input {
    border: 0;
    border-block-end: 1px solid var(--peak-line);
    background: transparent;
    color: var(--peak-text);
}

.login-form-body .form-gp input:focus {
    border-block-end-color: var(--peak-green);
}

.submit-btn-area button {
    background: var(--peak-navy);
    border-radius: var(--peak-radius-sm);
    color: var(--peak-white);
    border: 0;
    width: 100%;
    padding: .7rem 1rem;
    font-weight: 600;
}

.submit-btn-area button:hover {
    background: var(--peak-navy-700);
}

/* -------------------------------------------------------------------------
   RTL adjustments that logical properties cannot express
   ------------------------------------------------------------------------- */
[dir="rtl"] body {
    font-family: "Cairo", "Poppins", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] .sidebar-menu .metismenu .has-arrow::after {
    transform: rotate(-135deg) translate(0, -50%);
}

[dir="rtl"] .peak-chart,
[dir="rtl"] .peak-list > li,
[dir="rtl"] .peak-topbar {
    direction: rtl;
}

/* Icons that carry a direction must mirror; brand and status icons must not. */
[dir="rtl"] .peak-mirror,
[dir="rtl"] .ti-arrow-right,
[dir="rtl"] .ti-arrow-left,
[dir="rtl"] .ti-back-left,
[dir="rtl"] .ti-back-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-external-link-alt {
    display: inline-block;
    transform: scaleX(-1);
}

/* Chevrons that open a menu point down in both directions. */
[dir="rtl"] .peak-user .fa-angle-down,
[dir="rtl"] .dropdown-toggle .fa-angle-down {
    transform: none;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
/* The base theme widens the sidebar and repositions the toggle at some
   breakpoints with physical properties; the PEAK width and logical offset are
   restored here so both directions behave the same. */
@media (max-width: 1364px) {
    .sidebar-menu {
        width: var(--peak-sidebar);
    }

    .sbar_collapsed .sidebar-menu {
        inset-inline-start: calc(var(--peak-sidebar) * -1);
    }

    .header-area .nav-btn {
        position: static;
        background: none;
        padding: 0;
        margin: 0;
    }

    .header-area .nav-btn span {
        background: var(--peak-navy);
    }
}

@media (max-width: 991px) {
    .page-container,
    .sbar_collapsed.page-container {
        padding-inline-start: 0;
    }

    /* Off canvas sidebar on top of the content, closed by default. */
    .sidebar-menu {
        z-index: 1030;
        box-shadow: 0 0 40px rgba(18, 40, 76, .25);
    }

    .peak-topbar__end {
        gap: .4rem;
    }

    .peak-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .peak-context {
        display: none;
    }

    /* Comfortable touch targets */
    .peak-icon-btn,
    .btn {
        min-height: 40px;
    }

    td .btn-sm,
    td .btn-xs {
        min-height: 34px;
    }
}

@media (max-width: 767px) {
    /* Charts stay readable: fewer decorations, no crowded value labels. */
    .peak-chart {
        height: 170px;
        gap: .35rem;
    }

    .peak-chart__value {
        display: none;
    }

    .peak-kpi {
        min-height: 92px;
        padding: 1rem;
    }

    .peak-kpi__value {
        font-size: 1.35rem;
    }
}

@media (max-width: 575px) {
    .card-body {
        padding: 1.15rem;
    }

    .peak-search input {
        font-size: 12.5px;
    }

    .peak-chart__label {
        font-size: 10px;
    }

    .peak-user__meta {
        display: none;
    }

    .page-title-area .breadcrumbs-area h4.page-title {
        font-size: 1.15rem;
    }
}