/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand (orange) */
    --c-primary:                 #EA580C;
    --c-primary-hover:           #C2410C;
    --c-primary-light:           #FFF7ED;
    --c-primary-soft:            #FDBA74;
    --c-primary-active:          #9A3412;
    --c-primary-deep:            #7C2D12;
    --c-primary-border-light:    #FED7AA;
    --c-primary-overlay-20:      rgba(234, 88, 12, 0.2);
    --c-primary-overlay-32:      rgba(234, 88, 12, 0.32);
    --c-primary-focus-ring:      rgba(234, 88, 12, 0.12);
    --c-primary-focus-ring-light: rgba(234, 88, 12, 0.1);

    /* Neutral / slate scale (light -> dark) */
    --c-slate-50:  #F8FAFC;
    --c-slate-100: #F1F5F9;
    --c-slate-200: #E2E8F0;
    --c-slate-300: #CBD5E1;
    --c-slate-400: #94A3B8;
    --c-slate-500: #64748B;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1E293B;
    --c-slate-900: #0F172A;

    /* Neutral / gray scale (auth pages + misc one-offs) */
    --c-gray-50:  #F9FAFB;
    --c-gray-200: #E5E7EB;
    --c-gray-400: #9CA3AF;
    --c-gray-500: #6B7280;
    --c-gray-700: #374151;
    --c-gray-900: #111827;
    --c-track-bg:        #f0f2f5;
    --c-table-hover-bg:  #FAFBFF;
    --c-unread-bg:       #FFFBF7;

    /* White / sidebar */
    --c-white:            #FFFFFF;
    --c-white-overlay-07: rgba(255, 255, 255, 0.07);
    --c-sidebar-bg:       #1C1917;

    /* Success */
    --c-success:            #16A34A;
    --c-success-bright:     #22C55E;
    --c-success-text:       #15803D;
    --c-success-text-deep:  #166534;
    --c-success-bg:         #DCFCE7;
    --c-success-bg-soft:    #F0FDF4;
    --c-success-border:     #86EFAC;
    --c-success-border-soft: #BBF7D0;

    /* Danger */
    --c-danger:             #DC2626;
    --c-danger-bright:      #EF4444;
    --c-danger-text:        #B91C1C;
    --c-danger-text-deep:   #991B1B;
    --c-danger-bg:          #FEE2E2;
    --c-danger-bg-soft:     #FEF2F2;
    --c-danger-border:      #FCA5A5;
    --c-danger-border-soft: #FECACA;

    /* Warning */
    --c-warning-bg:            #FEF3C7;
    --c-warning-bg-soft:       #FFFBEB;
    --c-warning-text:          #B45309;
    --c-warning-text-deep:     #92400E;
    --c-warning-border:        #FDE68A;
    --c-warning-border-strong: #FCD34D;

    /* Info */
    --c-info-text:          #1D4ED8;
    --c-info-bg:            #DBEAFE;
    --c-info-bg-soft:       #EFF6FF;
    --c-info-border:        #BFDBFE;
    --c-info-border-strong: #93C5FD;
    --c-info-bright:        #3B82F6;

    /* Purple (badge) */
    --c-purple-bg:   #EDE9FE;
    --c-purple-text: #6D28D9;

    /* Chart */
    --c-orange-bright: #F97316;

    /* One-off overlays that reuse a palette color (not pure shadows) */
    --c-overlay-backdrop: rgba(0, 0, 0, 0.35);
    --c-count-pill-bg:    rgba(0, 0, 0, 0.08);

    /* Layout (non-color) */
    --sidebar-width:           220px;
    --sidebar-collapsed-width: 60px;
    --topbar-height:           56px;
    --card-shadow:             0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* ============================================================
   APP  (was app.css)
   ============================================================ */

/* ========================================================
   TMS Layout — Redesigned to match mockup
   ======================================================== */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--c-slate-100);
    font-family: 'Noto Sans', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--c-slate-800);
    -webkit-font-smoothing: antialiased;
}

body.rtl {
    font-family: 'Noto Sans Arabic', 'Noto Sans', system-ui, -apple-system, sans-serif;
}

/* ── Layout skeleton ── */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    background: var(--c-sidebar-bg);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.25s ease;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar { display: none; }

.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}

/* ── Sidebar logo ── */
.sidebar-logo {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--c-white-overlay-07);
    flex-shrink: 0;
    overflow: hidden;
}

.logo-tms {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.logo-subtitle {
    display: block;
    font-size: 0.6rem;
    color: var(--c-gray-500);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Sidebar nav ── */
.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    flex: 1;
}

.sidebar-nav li { margin: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--c-gray-400);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-align: start;
    border-radius: 0;
    line-height: 1.3;
}

.nav-item i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.nav-item:hover {
    background: var(--c-white-overlay-07);
    color: var(--c-white);
    text-decoration: none;
}

.nav-item.active {
    background: var(--c-primary);
    color: var(--c-white);
    border-radius: 7px;
    margin: 2px 10px;
    width: calc(100% - 20px);
    padding: 9px 10px;
    font-weight: 600;
}

.nav-item.active:hover {
    background: var(--c-primary-hover);
    color: var(--c-white);
}

/* Back-office submenu items */
.nav-subitem {
    padding-left: 44px;
    font-size: 0.78rem;
}

.nav-subitem.active {
    background: var(--c-primary-overlay-20);
    border-radius: 7px;
    margin: 2px 10px;
    width: calc(100% - 20px);
    padding-left: 34px;
    color: var(--c-primary-soft);
    font-weight: 600;
}

.nav-subitem.active:hover {
    background: var(--c-primary-overlay-32);
    color: var(--c-white);
}

.nav-divider {
    border-top: 1px solid var(--c-white-overlay-07);
    margin: 8px 12px;
    list-style: none;
}

/* Submenu arrow */
.submenu-arrow {
    margin-left: auto;
    font-size: 0.65rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nav-submenu-toggle.submenu-expanded .submenu-arrow { transform: rotate(180deg); }

/* Collapsible submenu */
.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.submenu.submenu-open { max-height: 400px; }

/* ── Topbar ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-slate-200);
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hamburger {
    border: none;
    background: none;
    font-size: 1.3rem;
    color: var(--c-slate-500);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
}

.hamburger:hover { background: var(--c-slate-50); }

.page-title-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-slate-900);
}

/* Icon buttons in topbar */
.topbar-icon-btn {
    position: relative;
    border: none;
    background: none;
    font-size: 1.1rem;
    color: var(--c-slate-500);
    cursor: pointer;
    padding: 7px 9px;
    border-radius: 7px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.topbar-icon-btn:hover { background: var(--c-slate-50); color: var(--c-slate-700); }

/* Notification badge */
.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--c-primary);
    border-radius: 50%;
    border: 2px solid var(--c-white);
}

/* Language toggle */
.lang-form { display: inline-flex; }

.lang-btn {
    border: 1px solid var(--c-slate-200);
    background: none;
    color: var(--c-slate-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.lang-btn:hover { background: var(--c-slate-50); border-color: var(--c-slate-300); }

/* User dropdown */
.user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 7px;
    transition: background 0.15s;
    cursor: pointer;
    border: 1px solid transparent;
}

.user-dropdown:hover { background: var(--c-slate-50); border-color: var(--c-slate-200); }

.user-avatar {
    border: none;
    background: var(--c-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.avatar-initials {
    color: var(--c-white);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-slate-900);
}

.user-role {
    font-size: 0.67rem;
    color: var(--c-slate-400);
    text-transform: capitalize;
}

.dropdown-arrow {
    font-size: 0.6rem;
    color: var(--c-slate-400);
    flex-shrink: 0;
}

.dropdown-menu-custom {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 172px;
    z-index: 1060;
    display: none;
    overflow: hidden;
}

.dropdown-menu-custom.show { display: block; }

.dropdown-item-custom {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    font-size: 0.82rem;
    color: var(--c-gray-700);
    text-decoration: none;
    transition: background 0.12s;
}

.dropdown-item-custom:hover { background: var(--c-slate-50); color: var(--c-slate-900); }

.dropdown-divider-custom { border-top: 1px solid var(--c-slate-200); }

/* ── Page content ── */
.page-content {
    flex: 1;
    min-height: calc(100vh - var(--topbar-height));
}

/* ── Flash alerts ── */
.flash-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 0.85rem;
    border-left: 4px solid;
    transition: opacity 0.5s ease;
}

.flash-success {
    background: var(--c-success-bg-soft);
    border-color: var(--c-success);
    color: var(--c-success-text-deep);
}

.flash-error {
    background: var(--c-danger-bg-soft);
    border-color: var(--c-danger);
    color: var(--c-danger-text-deep);
}

.flash-dismiss {
    border: none;
    background: none;
    font-size: 0.85rem;
    cursor: pointer;
    color: currentColor;
    opacity: 0.55;
    margin-left: auto;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.flash-dismiss:hover { opacity: 1; }
.flash-fade-out { opacity: 0; }

/* ── RTL overrides ── */
body.rtl .sidebar {
    left: auto;
    right: 0;
}

body.rtl .main-wrapper {
    margin-left: 0;
    margin-right: var(--sidebar-width);
    transition: margin-right 0.25s ease;
}

body.rtl .dropdown-menu-custom {
    right: auto;
    left: 0;
}

body.rtl .submenu-arrow { margin-left: 0; margin-right: auto; }
body.rtl .nav-item { text-align: end; }
body.rtl .nav-subitem { padding-left: 16px; padding-right: 44px; }
body.rtl .nav-subitem.active { padding-left: 10px; padding-right: 34px; }

/* ── Collapsed sidebar ── */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed-width); }

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .logo-subtitle { display: none; }

body.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
}

body.sidebar-collapsed .nav-item.active {
    margin: 2px 5px;
    width: calc(100% - 10px);
    padding: 11px 0;
}

body.sidebar-collapsed .nav-subitem { padding-left: 0; }
body.sidebar-collapsed .nav-subitem.active { padding-left: 0; }

body.sidebar-collapsed .sidebar-logo {
    padding: 16px 4px 12px;
    text-align: center;
}

body.sidebar-collapsed .logo-tms { font-size: 0.95rem; }
body.sidebar-collapsed .submenu { max-height: 0 !important; }

/* RTL + collapsed */
body.rtl.sidebar-collapsed .main-wrapper {
    margin-right: var(--sidebar-collapsed-width);
    margin-left: 0;
}

/* ── Responsive (≤768px) ── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
        transition: transform 0.25s ease, width 0s;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    body.rtl .sidebar { transform: translateX(100%); }
    body.sidebar-mobile-open .sidebar { transform: translateX(0); }

    .main-wrapper { margin-left: 0 !important; }
    body.rtl .main-wrapper { margin-right: 0 !important; }

    .user-info { display: none; }

    body.sidebar-mobile-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: var(--c-overlay-backdrop);
        z-index: 1039;
    }
}

/* ── Tender status row colours ── */
.row-participated > td { background-color: var(--c-success-bg-soft) !important; }
.row-awarded      > td { background-color: var(--c-info-bg-soft) !important; }
.row-not_awarded  > td { background-color: var(--c-warning-bg-soft) !important; }
.row-declined     > td { background-color: var(--c-danger-bg-soft) !important; }

/* ── Status badge pills ── */
.badge-ongoing      { background: var(--c-slate-100); color: var(--c-slate-500); }
.badge-participated { background: var(--c-success-bg); color: var(--c-success-text); }
.badge-awarded      { background: var(--c-info-bg); color: var(--c-info-text); }
.badge-not_awarded  { background: var(--c-warning-bg); color: var(--c-warning-text); }
.badge-declined     { background: var(--c-danger-bg); color: var(--c-danger-text); }


/* ============================================================
   TMS  (was tms.css)
   ============================================================ */

/* ========================================================
   TMS — Dashboard & component styles
   ======================================================== */

/* ── Status summary pills (legend + filter links) ── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}

.status-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    text-decoration: none;
}

.status-pill .cnt {
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--c-count-pill-bg);
    border-radius: 10px;
    padding: 0 5px;
    min-width: 20px;
    text-align: center;
}

.pill-ongoing      { background: var(--c-slate-50); color: var(--c-slate-500); border-color: var(--c-slate-300); }
.pill-participated { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); }
.pill-awarded      { background: var(--c-info-bg); color: var(--c-info-text); border-color: var(--c-info-border-strong); }
.pill-not_awarded  { background: var(--c-warning-bg); color: var(--c-warning-text); border-color: var(--c-warning-border-strong); }
.pill-declined     { background: var(--c-danger-bg); color: var(--c-danger-text); border-color: var(--c-danger-border); }

/* ── Status inline badges ── */
.badge-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    white-space: nowrap;
}

.badge-ongoing      { background: var(--c-slate-100); color: var(--c-slate-500); }
.badge-participated { background: var(--c-success-bg); color: var(--c-success-text); }
.badge-awarded      { background: var(--c-info-bg); color: var(--c-info-text); }
.badge-not_awarded  { background: var(--c-warning-bg); color: var(--c-warning-text); }
.badge-declined     { background: var(--c-danger-bg); color: var(--c-danger-text); }

/* ── Active filter tags ── */
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--c-info-bg-soft);
    color: var(--c-info-text);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.72rem;
    text-decoration: none;
    border: 1px solid var(--c-info-border);
    transition: background 0.12s;
}

.filter-tag:hover { background: var(--c-info-bg); color: var(--c-info-text); }

/* ── Filter bar card ── */
.filter-bar {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-slate-200);
    padding: 14px 20px;
}

.filter-bar .form-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-slate-500);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-bar .form-control,
.filter-bar .form-select {
    font-size: 0.82rem;
    border-color: var(--c-slate-300);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--c-slate-800);
    background: var(--c-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-focus-ring);
    outline: none;
}

/* ── Action buttons ── */
.btn-filter-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

.btn-filter-action:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.btn-filter-action:active { transform: translateY(0); }

.btn-primary-action {
    background: var(--c-primary);
    color: var(--c-white);
}
.btn-primary-action:hover { background: var(--c-primary-hover); color: var(--c-white); }

.btn-outline-action {
    background: var(--c-white);
    color: var(--c-slate-500);
    border: 1px solid var(--c-slate-300);
}
.btn-outline-action:hover { background: var(--c-slate-50); color: var(--c-slate-700); }

.btn-add-tender {
    background: var(--c-primary);
    color: var(--c-white);
    padding: 7px 16px;
    font-size: 0.82rem;
}
.btn-add-tender:hover { background: var(--c-primary-hover); color: var(--c-white); }

.btn-export {
    background: var(--c-white);
    color: var(--c-success-text);
    border: 1px solid var(--c-success-border-soft);
    font-size: 0.78rem;
    padding: 5px 12px;
}
.btn-export:hover { background: var(--c-success-bg-soft); }

/* ── Dashboard sections / view panels ── */
.view-panel {
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 10px;
    margin: 0 16px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.view-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-slate-100);
    background: var(--c-slate-50);
    flex-wrap: wrap;
    gap: 8px;
}

.view-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-slate-400);
}

.legend-pills {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--c-slate-500);
    font-weight: 500;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-awarded      { background: var(--c-info-bright); }
.dot-participated { background: var(--c-success-bright); }
.dot-ongoing      { background: var(--c-slate-400); }
.dot-not_awarded  { background: var(--c-orange-bright); }
.dot-declined     { background: var(--c-danger-bright); }

.view-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Tender table ── */
.tender-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.tender-table thead th {
    background: var(--c-slate-800);
    color: var(--c-slate-200);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 9px 10px;
    border: none;
    border-right: 1px solid var(--c-slate-700);
    letter-spacing: 0.03em;
}

.tender-table thead th:last-child { border-right: none; }

/* Row status colours — no !important conflict with Bootstrap */
.tender-table tbody tr.row-participated { background-color: var(--c-success-bg-soft); }
.tender-table tbody tr.row-awarded      { background-color: var(--c-info-bg-soft); }
.tender-table tbody tr.row-not_awarded  { background-color: var(--c-warning-bg-soft); }
.tender-table tbody tr.row-declined     { background-color: var(--c-danger-bg-soft); }
.tender-table tbody tr:hover            { background-color: var(--c-slate-50) !important; }

.tender-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
    color: var(--c-slate-700);
    border: none;
}


.tender-table tbody td.td-num {
    color: var(--c-slate-400);
    font-weight: 600;
    font-size: 0.7rem;
    width: 32px;
    text-align: center;
}

.tender-table tbody td.td-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.72rem;
    color: var(--c-slate-600);
}

.tender-table tbody td.td-name {
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    font-weight: 500;
    color: var(--c-slate-800);
}

/* Row status colours */
.row-participated > td { background-color: var(--c-success-bg-soft) !important; }
.row-awarded      > td { background-color: var(--c-info-bg-soft) !important; }
.row-not_awarded  > td { background-color: var(--c-warning-bg-soft) !important; }
.row-declined     > td { background-color: var(--c-danger-bg-soft) !important; }

/* ── Expandable row ── */
.ext-row { display: none; }
.ext-row > td {
    background-color: var(--c-slate-50) !important;
    border-top: 2px solid var(--c-primary) !important;
    padding: 14px 16px !important;
}

/* ── More/Hide button ── */
.btn-more {
    background: none;
    border: 1px solid var(--c-slate-300);
    color: var(--c-slate-600);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
    font-family: inherit;
}

.btn-more:hover { background: var(--c-slate-50); border-color: var(--c-slate-400); color: var(--c-slate-800); }

/* ── Boolean circle indicators ── */
.bool-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
}

.bool-yes { background: var(--c-success-bright); color: var(--c-white); }
.bool-no  { background: var(--c-slate-200); color: var(--c-slate-400); }
.bool-dot { background: var(--c-slate-200); border: 2px solid var(--c-slate-300); }

/* ── Pagination ── */
.tms-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--c-slate-100);
    font-size: 0.75rem;
    color: var(--c-slate-400);
    flex-wrap: wrap;
    gap: 8px;
}

.tms-page-info { font-size: 0.73rem; }

.tms-page-nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--c-slate-200);
    border-radius: 5px;
    background: var(--c-white);
    color: var(--c-slate-600);
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}

.page-btn:hover { background: var(--c-slate-50); border-color: var(--c-slate-300); color: var(--c-slate-800); }
.page-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); font-weight: 700; }
.page-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.page-btn i { font-size: 0.7rem; }

/* ── Search box in filter bar ── */
.search-wrapper {
    position: relative;
}

.search-wrapper input {
    padding-left: 32px !important;
}

.search-wrapper .bi-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-slate-400);
    font-size: 0.8rem;
    pointer-events: none;
}

/* ── Stacked bar chart ── */
.sbar-wrap { display:flex; height:12px; border-radius:3px; overflow:hidden; }
.sbar-seg  { height:100%; }
.sbar-awarded      { background:var(--c-info-bright); }
.sbar-participated { background:var(--c-success-bright); }
.sbar-not_awarded  { background:var(--c-orange-bright); }
.sbar-declined     { background:var(--c-danger-bright); }
.sbar-ongoing      { background:var(--c-slate-300); }

/* ── Horizontal bar chart (reports) ── */
.bar-track { flex:1; background:var(--c-track-bg); border-radius:3px; height:14px; }

/* ── Sparkline ── */
.spark-wrap { overflow-x:auto; }
.spark-svg  { display:block; min-width:600px; height:120px; }

/* ── Backoffice sub-nav strip ── */
.backoffice-subnav { background:var(--c-white); border-bottom:1px solid var(--c-slate-200); }
.backoffice-subnav .nav-link { color:var(--c-slate-500); font-size:0.85rem; padding: 10px 16px; }
.backoffice-subnav .nav-link.active { color:var(--c-primary); border-bottom: 2px solid var(--c-primary); font-weight:600; }

/* ── Card / section ── */
.section-head {
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--c-slate-400);
}

.kpi-value { font-size:1.9rem; font-weight:700; line-height:1.1; }

/* ── Table in view-panel scrollable ── */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Show/hide columns button ── */
.btn-hide-cols {
    background: var(--c-white);
    color: var(--c-slate-600);
    border: 1px solid var(--c-slate-300);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}

.btn-hide-cols:hover { background: var(--c-slate-50); }
.btn-hide-cols.active { background: var(--c-info-bg-soft); color: var(--c-info-text); border-color: var(--c-info-border); }

/* ── Edit pencil button ── */
.btn-edit-row {
    background: none;
    border: none;
    color: var(--c-slate-400);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.12s, background 0.12s;
}
.btn-edit-row:hover { color: var(--c-primary); background: var(--c-primary-light); }

/* ── Filters toggle button ── */
.btn-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-white);
    color: var(--c-slate-600);
    border: 1px solid var(--c-slate-300);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}
.btn-filters-toggle:hover { background: var(--c-slate-50); }

/* ── Date range icon input ── */
.date-input-wrapper {
    position: relative;
}
.date-input-wrapper input[type="date"] {
    padding-left: 30px;
}
.date-input-wrapper .bi-calendar3 {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-slate-400);
    font-size: 0.8rem;
    pointer-events: none;
}

/* ── Backoffice table improvements ── */
.bo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.bo-table thead th {
    background: var(--c-slate-50);
    color: var(--c-slate-500);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 2px solid var(--c-slate-200);
    white-space: nowrap;
}

.bo-table tbody tr { border-bottom: 1px solid var(--c-slate-100); }
.bo-table tbody tr:hover > td { background: var(--c-slate-50); }
.bo-table tbody td { padding: 10px 14px; vertical-align: middle; color: var(--c-slate-700); }

/* ── Backoffice cards ── */
.card-bo {
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-bo-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-bo-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-slate-900);
}

/* ── Toggle switch ── */
.tms-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.tms-toggle input { opacity: 0; width: 0; height: 0; }
.tms-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--c-slate-300);
    border-radius: 20px;
    transition: background 0.2s;
}
.tms-toggle-slider:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: var(--c-white);
    border-radius: 50%;
    transition: transform 0.2s;
}
.tms-toggle input:checked + .tms-toggle-slider { background: var(--c-success-bright); }
.tms-toggle input:checked + .tms-toggle-slider:before { transform: translateX(16px); }

/* ── Notification badge (sidebar) ── */
.notif-badge-sidebar {
    position: absolute;
    top: -5px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    background: var(--c-danger-bright);
    color: var(--c-white);
    font-size: .55rem;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}


/* ============================================================
   UI  (was ui.css)
   ============================================================ */

/*
 * ui.css — TMS shared design system
 * All classes use ui-* prefix to avoid collision with Dashboard / tms.css styles.
 * Depends on CSS variables already defined in app.css:
 *   --primary: var(--c-primary)  --primary-hover: var(--c-primary-hover)  --primary-light: var(--c-primary-light)
 *   --body-bg: var(--c-slate-100)  --sidebar-bg: var(--c-sidebar-bg)
 */

/* ─── Page wrapper ─────────────────────────────────────────────── */
.ui-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}
.ui-page-sm  { max-width: 760px;  margin: 0 auto; padding: 28px 20px 56px; }
.ui-page-md  { max-width: 1000px; margin: 0 auto; padding: 28px 20px 56px; }

.ui-page-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-slate-900);
    margin-bottom: 2px;
}
.ui-page-sub {
    font-size: 0.79rem;
    color: var(--c-slate-500);
    margin-bottom: 24px;
}

/* ─── Card ─────────────────────────────────────────────────────── */
.ui-card {
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 20px;
    overflow: hidden;
}
.ui-card-hd {
    padding: 13px 20px;
    border-bottom: 1px solid var(--c-slate-100);
    background: var(--c-slate-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ui-card-title {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-primary);
}
.ui-card-body  { padding: 22px 20px; }
.ui-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--c-slate-100);
    background: var(--c-slate-50);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Form elements ─────────────────────────────────────────────── */
.ui-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-gray-700);
    margin-bottom: 5px;
}
.ui-label .req { color: var(--c-primary); margin-left: 2px; }

.ui-input,
.ui-select {
    width: 100%;
    border: 1.5px solid var(--c-slate-200);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.85rem;
    color: var(--c-slate-900);
    background: var(--c-white);
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.ui-input:focus,
.ui-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-focus-ring);
}
.ui-input::placeholder { color: var(--c-slate-400); }
.ui-input:read-only,
.ui-input[readonly] {
    background: var(--c-slate-50);
    color: var(--c-slate-500);
    cursor: default;
}
.ui-input.is-invalid,
.ui-select.is-invalid { border-color: var(--c-danger-bright); }

.ui-select { appearance: auto; cursor: pointer; }

.ui-hint {
    font-size: 0.72rem;
    color: var(--c-slate-400);
    margin-top: 4px;
}
.ui-error {
    font-size: 0.72rem;
    color: var(--c-danger-bright);
    margin-top: 4px;
}

.ui-field { margin-bottom: 18px; }

/* Textarea */
.ui-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Sub-section title inside a card */
.ui-sub-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-slate-500);
    margin: 18px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-slate-100);
}

/* Checkbox / radio group */
.ui-check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-check-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--c-slate-200);
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-slate-600);
    transition: border-color .12s, background .12s;
    user-select: none;
}
.ui-check-item:hover { border-color: var(--c-slate-300); background: var(--c-slate-50); }
.ui-check-item input[type="checkbox"]:checked + span,
.ui-check-item input[type="radio"]:checked + span { color: var(--c-primary); }
.ui-check-item:has(input:checked) {
    border-color: var(--c-primary);
    background: var(--c-primary-light);
    color: var(--c-primary);
}
.ui-check-item input { accent-color: var(--c-primary); }

/* ─── Closing-date box ──────────────────────────────────────────── */
.ui-closing-date-box {
    border: 1.5px solid var(--c-slate-200);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--c-slate-50);
    margin-top: 6px;
}
.ui-closing-date-box .ui-label { margin-bottom: 8px; }

/* ─── Buttons ───────────────────────────────────────────────────── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 9px 20px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    border: none;
    line-height: 1.2;
    white-space: nowrap;
}
.ui-btn-sm { font-size: 0.78rem; padding: 6px 14px; }
.ui-btn-lg { font-size: 0.95rem; padding: 12px 28px; }

.ui-btn-primary {
    background: var(--c-primary);
    color: var(--c-white);
    border: 1.5px solid var(--c-primary);
}
.ui-btn-primary:hover,
.ui-btn-primary:focus { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }

.ui-btn-secondary {
    background: var(--c-white);
    color: var(--c-slate-600);
    border: 1.5px solid var(--c-slate-300);
}
.ui-btn-secondary:hover,
.ui-btn-secondary:focus { background: var(--c-slate-50); color: var(--c-slate-800); border-color: var(--c-slate-400); }

.ui-btn-danger {
    background: var(--c-white);
    color: var(--c-danger);
    border: 1.5px solid var(--c-danger-border-soft);
}
.ui-btn-danger:hover,
.ui-btn-danger:focus { background: var(--c-danger-bg-soft); border-color: var(--c-danger); color: var(--c-danger-text); }

.ui-btn-success {
    background: var(--c-white);
    color: var(--c-success);
    border: 1.5px solid var(--c-success-border-soft);
}
.ui-btn-success:hover,
.ui-btn-success:focus { background: var(--c-success-bg-soft); border-color: var(--c-success); }

.ui-btn-ghost {
    background: transparent;
    color: var(--c-slate-500);
    border: 1.5px solid transparent;
}
.ui-btn-ghost:hover { background: var(--c-slate-100); color: var(--c-slate-800); }

.ui-btn:disabled,
.ui-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Form action row */
.ui-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ─── Filter bar ────────────────────────────────────────────────── */
.ui-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.ui-filter-input,
.ui-filter-select {
    border: 1.5px solid var(--c-slate-200);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 0.8rem;
    color: var(--c-slate-900);
    background: var(--c-white);
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 120px;
}
.ui-filter-input:focus,
.ui-filter-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-focus-ring-light);
}
.ui-filter-input::placeholder { color: var(--c-slate-400); }

/* ─── Table ─────────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x: auto; border-radius: 10px; }
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.ui-table thead th {
    background: var(--c-slate-50);
    color: var(--c-slate-500);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-slate-200);
    white-space: nowrap;
}
.ui-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-slate-100);
    color: var(--c-slate-800);
    vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: var(--c-table-hover-bg); }

/* ─── Badges ────────────────────────────────────────────────────── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    white-space: nowrap;
}
.ui-badge-orange  { background: var(--c-primary-light); color: var(--c-primary); }
.ui-badge-green   { background: var(--c-success-bg); color: var(--c-success-text); }
.ui-badge-red     { background: var(--c-danger-bg); color: var(--c-danger-text); }
.ui-badge-yellow  { background: var(--c-warning-bg); color: var(--c-warning-text-deep); }
.ui-badge-blue    { background: var(--c-info-bg); color: var(--c-info-text); }
.ui-badge-slate   { background: var(--c-slate-100); color: var(--c-slate-600); }
.ui-badge-purple  { background: var(--c-purple-bg); color: var(--c-purple-text); }

/* ─── Tabs ──────────────────────────────────────────────────────── */
.ui-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--c-slate-100);
    margin-bottom: 20px;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-slate-500);
    padding: 10px 18px;
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
    white-space: nowrap;
}
.ui-tab:hover { color: var(--c-slate-800); border-bottom-color: var(--c-slate-300); }
.ui-tab.active,
.ui-tab[aria-selected="true"] {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
.ui-tab .ui-tab-count {
    font-size: 0.65rem;
    background: var(--c-slate-100);
    color: var(--c-slate-500);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
}
.ui-tab.active .ui-tab-count,
.ui-tab[aria-selected="true"] .ui-tab-count {
    background: var(--c-primary-light);
    color: var(--c-primary);
}

/* ─── Empty state ───────────────────────────────────────────────── */
.ui-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--c-slate-400);
}
.ui-empty i { font-size: 2.4rem; margin-bottom: 12px; display: block; }
.ui-empty p { font-size: 0.85rem; margin: 0; }

/* ─── KPI cards ─────────────────────────────────────────────────── */
.ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.ui-kpi {
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.ui-kpi-label {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-slate-500);
    margin-bottom: 6px;
}
.ui-kpi-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c-slate-900);
    line-height: 1;
}
.ui-kpi-sub {
    font-size: 0.72rem;
    color: var(--c-slate-400);
    margin-top: 4px;
}

/* ─── Alerts ────────────────────────────────────────────────────── */
.ui-alert {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.83rem;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ui-alert i { flex-shrink: 0; margin-top: 1px; }
.ui-alert-info    { background: var(--c-info-bg-soft); color: var(--c-info-text); border: 1px solid var(--c-info-border); }
.ui-alert-success { background: var(--c-success-bg-soft); color: var(--c-success-text-deep); border: 1px solid var(--c-success-border-soft); }
.ui-alert-warning { background: var(--c-warning-bg-soft); color: var(--c-warning-text-deep); border: 1px solid var(--c-warning-border); }
.ui-alert-danger  { background: var(--c-danger-bg-soft); color: var(--c-danger-text); border: 1px solid var(--c-danger-border-soft); }

/* ─── Section head (used on several pages) ──────────────────────── */
.ui-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.ui-section-head h5,
.ui-section-head h6 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-slate-500);
    margin: 0;
}

/* ─── How it works sidebar ──────────────────────────────────────── */
.ui-hiw-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.ui-hiw-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-hiw-body { font-size: 0.8rem; color: var(--c-slate-600); line-height: 1.5; }
.ui-hiw-body strong { color: var(--c-slate-800); }
.ui-hiw-note {
    font-size: 0.73rem;
    color: var(--c-slate-400);
    border-top: 1px dashed var(--c-slate-200);
    padding-top: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

/* ─── Example cards ─────────────────────────────────────────────── */
.ui-ex-section { margin-top: 8px; }
.ui-ex-section-title {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-slate-400);
    margin-bottom: 8px;
}
.ui-ex-card {
    border: 1px solid var(--c-slate-200);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.79rem;
    background: var(--c-table-hover-bg);
}
.ui-ex-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-slate-400);
    margin-bottom: 3px;
}
.ui-ex-card-val { color: var(--c-slate-800); font-weight: 500; }

/* ─── Calendar ──────────────────────────────────────────────────── */
.ui-cal-wrap { padding: 20px; }
.ui-cal-legend-card {
    background: var(--c-white);
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ui-cal-legend-title {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-slate-500);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ui-cal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ui-cal-dot-closing  { background: var(--c-primary); }
.ui-cal-dot-received { background: var(--c-info-bright); }

.ui-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.79rem;
    color: var(--c-slate-600);
    margin-bottom: 6px;
}

.ui-cal-tips-card {
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary-border-light);
    border-radius: 10px;
    padding: 14px;
}
.ui-cal-tips-title {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 8px;
}
.ui-cal-tip {
    font-size: 0.78rem;
    color: var(--c-primary-deep);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 5px;
}
.ui-cal-tip i { font-size: 0.8rem; margin-top: 1px; flex-shrink: 0; }

/* FullCalendar overrides — match TMS orange */
.fc .fc-button-primary {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-white) !important;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
    background-color: var(--c-primary-hover) !important;
    border-color: var(--c-primary-hover) !important;
}
.fc .fc-button-primary:disabled {
    background-color: var(--c-orange-bright) !important;
    border-color: var(--c-orange-bright) !important;
    opacity: .7 !important;
}
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--c-primary-active) !important;
    border-color: var(--c-primary-active) !important;
}
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion { color: var(--c-gray-700); text-decoration: none; }
.fc .fc-day-today { background: var(--c-primary-light) !important; }
.fc .fc-event {
    border-radius: 5px;
    font-size: 0.72rem;
    padding: 1px 4px;
    border: none;
    cursor: pointer;
}

/* ─── Notifications ─────────────────────────────────────────────── */
.ui-nf-wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; }

.ui-nf-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-slate-100);
    transition: background .1s;
}
.ui-nf-item:last-child { border-bottom: none; }
.ui-nf-item.unread { background: var(--c-unread-bg); }
.ui-nf-item:hover  { background: var(--c-slate-50); }

.ui-nf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    flex-shrink: 0;
    margin-top: 6px;
}
.ui-nf-dot.read { background: transparent; border: 1.5px solid var(--c-slate-200); }

.ui-nf-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-primary-light);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.ui-nf-icon.read { background: var(--c-slate-100); color: var(--c-slate-400); }

.ui-nf-body { flex: 1; min-width: 0; }
.ui-nf-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-slate-800);
    margin-bottom: 2px;
}
.ui-nf-title.read { font-weight: 500; color: var(--c-slate-600); }
.ui-nf-msg  { font-size: 0.78rem; color: var(--c-slate-500); line-height: 1.4; }
.ui-nf-time { font-size: 0.7rem; color: var(--c-slate-400); margin-top: 4px; }

.ui-nf-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ui-nf-read-btn {
    font-size: 0.72rem;
    color: var(--c-slate-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
    transition: color .12s, background .12s;
    white-space: nowrap;
}
.ui-nf-read-btn:hover { color: var(--c-primary); background: var(--c-primary-light); }

/* ─── Audit Logs ────────────────────────────────────────────────── */
.ui-al-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border: 1px solid var(--c-primary-border-light);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
}
.ui-al-filter-tag button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    margin-left: 2px;
}

.ui-al-change {
    font-size: 0.77rem;
    background: var(--c-slate-50);
    border: 1px solid var(--c-slate-200);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
}
.ui-al-change-field {
    font-weight: 700;
    color: var(--c-slate-800);
    margin-right: 4px;
}
.ui-al-change-from { color: var(--c-danger); text-decoration: line-through; }
.ui-al-change-to   { color: var(--c-success); }

/* Pagination */
.ui-pager {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
.ui-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-slate-600);
    border: 1.5px solid var(--c-slate-200);
    background: var(--c-white);
    cursor: pointer;
    text-decoration: none;
    transition: all .12s;
    font-family: inherit;
}
.ui-page-btn:hover { background: var(--c-slate-100); color: var(--c-slate-800); border-color: var(--c-slate-300); }
.ui-page-btn.active { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.ui-page-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ─── Import preview ────────────────────────────────────────────── */
.ui-imp-counts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ui-imp-count {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}
.ui-imp-count-ok   { background: var(--c-success-bg); color: var(--c-success-text); }
.ui-imp-count-skip { background: var(--c-warning-bg); color: var(--c-warning-text-deep); }
.ui-imp-count-fix  { background: var(--c-danger-bg); color: var(--c-danger-text); }

.ui-imp-row-ok   td:first-child { border-left: 3px solid var(--c-success-border); }
.ui-imp-row-skip td:first-child { border-left: 3px solid var(--c-warning-border-strong); }
.ui-imp-row-fix  td:first-child { border-left: 3px solid var(--c-danger-border); }
.ui-imp-warn {
    font-size: 0.72rem;
    color: var(--c-warning-text-deep);
    background: var(--c-warning-bg-soft);
    border: 1px solid var(--c-warning-border);
    border-radius: 5px;
    padding: 2px 8px;
    margin-top: 3px;
    display: inline-block;
}

/* Import steps */
.ui-imp-steps {
    display: flex;
    gap: 0;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ui-imp-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--c-slate-400);
}
.ui-imp-step.active { color: var(--c-primary); font-weight: 600; }
.ui-imp-step.done   { color: var(--c-success); }
.ui-imp-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-slate-200);
    color: var(--c-slate-500);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-imp-step.active .ui-imp-step-num { background: var(--c-primary); color: var(--c-white); }
.ui-imp-step.done   .ui-imp-step-num { background: var(--c-success); color: var(--c-white); }
.ui-imp-step-sep {
    width: 32px;
    height: 1px;
    background: var(--c-slate-200);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ─── Permission grid ───────────────────────────────────────────── */
.ui-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.ui-perm-item {
    border: 1.5px solid var(--c-slate-200);
    border-radius: 9px;
    padding: 10px 14px;
    transition: border-color .15s, background .15s;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ui-perm-item:hover { border-color: var(--c-slate-300); background: var(--c-table-hover-bg); }
.ui-perm-item.checked { border-color: var(--c-primary); background: var(--c-primary-light); }
.ui-perm-item.disabled { opacity: .5; cursor: not-allowed; }
.ui-perm-check {
    width: 16px;
    height: 16px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
}
.ui-perm-name { font-size: .77rem; font-weight: 700; color: var(--c-slate-800); }
.ui-perm-desc { font-size: .68rem; color: var(--c-slate-500); margin-top: 2px; line-height: 1.4; }

/* ─── Terminal / migration output ───────────────────────────────── */
.ui-terminal {
    background: var(--c-slate-900);
    color: var(--c-slate-400);
    font-family: monospace;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 16px 18px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}
.ui-terminal .ok  { color: var(--c-success-border); }
.ui-terminal .err { color: var(--c-danger-border); }

/* ─── Auth pages ────────────────────────────────────────────────── */
.ui-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-gray-50);
    padding: 20px;
    font-family: 'Noto Sans', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}
.ui-auth-card {
    width: 100%;
    max-width: 420px;
}
.ui-auth-logo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.03em;
}
.ui-auth-logo-sub { font-size: 0.75rem; color: var(--c-gray-400); }
.ui-auth-box {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    padding: 28px;
}
.ui-auth-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-gray-900);
    text-align: center;
    margin: 0 0 22px;
}
.ui-auth-field { margin-bottom: 16px; }
.ui-auth-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-gray-700);
    margin-bottom: 4px;
}
.ui-auth-input {
    width: 100%;
    border: 1px solid var(--c-gray-200);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--c-gray-900);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--c-white);
    transition: border-color .15s, box-shadow .15s;
}
.ui-auth-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-focus-ring);
}
.ui-auth-btn {
    width: 100%;
    background: var(--c-primary);
    color: var(--c-white);
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}
.ui-auth-btn:hover,
.ui-auth-btn:focus { background: var(--c-primary-hover); color: var(--c-white); }
.ui-auth-alert {
    background: var(--c-danger-bg-soft);
    border-left: 4px solid var(--c-danger);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--c-danger);
}
.ui-auth-alert ul { margin: 0; padding-left: 16px; }
.ui-auth-alert-success {
    background: var(--c-success-bg-soft);
    border-left: 4px solid var(--c-success);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--c-success-text-deep);
}
.ui-auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--c-gray-700);
    margin-bottom: 16px;
}
.ui-auth-note {
    font-size: 0.8rem;
    color: var(--c-gray-400);
    text-align: center;
    margin-top: 16px;
}
.ui-auth-link { color: var(--c-primary); text-decoration: none; }
.ui-auth-link:hover { text-decoration: underline; color: var(--c-primary-hover); }
.ui-auth-msg {
    font-size: 0.9rem;
    color: var(--c-gray-700);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ─── Migration status badges ───────────────────────────────────── */
.ui-badge-pending { background: var(--c-warning-bg); color: var(--c-warning-text-deep); }
.ui-badge-run     { background: var(--c-success-bg); color: var(--c-success-text); }

/* ─── Responsive helpers ────────────────────────────────────────── */
@media (max-width: 640px) {
    .ui-page, .ui-page-sm, .ui-page-md { padding: 16px 12px 40px; }
    .ui-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ui-perm-grid { grid-template-columns: 1fr; }
    .ui-form-actions { justify-content: stretch; }
    .ui-form-actions .ui-btn { flex: 1; justify-content: center; }
}

/* ─── RTL overrides ─────────────────────────────────────────────── */
[dir="rtl"] .ui-label .req  { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .ui-hiw-num     { }
[dir="rtl"] .ui-alert-danger,
[dir="rtl"] .ui-auth-alert  { border-left: none; border-right: 4px solid var(--c-danger); }
[dir="rtl"] .ui-auth-alert-success { border-left: none; border-right: 4px solid var(--c-success); }
[dir="rtl"] .ui-al-change-field    { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .ui-nf-actions         { }
[dir="rtl"] .ui-auth-alert ul      { padding-left: 0; padding-right: 16px; }