:root {
    --ink-950: #111827;
    --ink-800: #1f2937;
    --ink-700: #374151;
    --ink-500: #6b7280;
    --line: #e5e7eb;
    --canvas: #f4f6f8;
    --surface: #ffffff;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--ink-800);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .925rem;
}
body.navigation-open { overflow: hidden; }
svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.min-w-0 { min-width: 0; }

.app-shell { min-height: 100vh; display: flex; max-width: 100vw; overflow-x: hidden !important; }
.app-sidebar { width: 15rem; flex: 0 0 15rem; background: var(--ink-950); color: #d1d5db; border: 0; }
.sidebar-content { min-height: 100vh; display: flex; flex-direction: column; }
.app-brand { height: 5.1rem; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; color: #fff; text-decoration: none; border-bottom: 1px solid #273244; }
.brand-mark { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; color: #bfdbfe; background: #1e3a5f; border: 1px solid #315480; border-radius: 7px; }
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.app-brand strong { display: block; font-size: .95rem; letter-spacing: 0; }
.app-brand small { display: block; margin-top: .1rem; color: #9ca3af; font-size: .7rem; }
.sidebar-nav { padding: 1.25rem .75rem; flex: 1; }
.nav-caption { display: block; padding: .4rem .75rem .55rem; color: #6b7280; font-size: .68rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.nav-caption:not(:first-child) { margin-top: 1.2rem; }
.sidebar-link { display: flex; align-items: center; gap: .8rem; min-height: 2.8rem; margin: .2rem 0; padding: 0 .75rem; color: #aeb8c8; border-radius: 6px; text-decoration: none; font-size: .875rem; font-weight: 600; }
.sidebar-link:hover { background: #1f2937; color: #fff; }
.sidebar-link.active { background: var(--brand); color: #fff; }
.sidebar-link svg { width: 1.1rem; height: 1.1rem; }
.sidebar-user { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.15rem; background: #0c1220; border-top: 1px solid #273244; }
.user-avatar { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; display: grid; place-items: center; border-radius: 50%; background: #315480; color: #eff6ff; font-weight: 700; }
.user-name { color: #f9fafb; font-size: .825rem; font-weight: 700; }
.user-role { margin-top: .08rem; color: #9ca3af; font-size: .7rem; }

.app-main { width: calc(100vw - 15rem); min-width: 0; flex: 1 1 auto; max-width: calc(100vw - 15rem); overflow-x: hidden !important; }
.app-header { height: 4.6rem; display: flex; align-items: center; padding: 0 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.header-context { display: flex; align-items: center; gap: .7rem; }
.header-eyebrow { color: var(--ink-700); font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.header-date { color: var(--ink-500); font-size: .79rem; }
.app-content { width: 100%; max-width: 100%; margin: 0; padding: 1.15rem 1.25rem; box-sizing: border-box; }
.icon-button { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-700); }
.icon-button:hover { border-color: #bfdbfe; background: #eff6ff; color: var(--brand-dark); }
.icon-button-dark { width: 2rem; height: 2rem; border-color: #334155; background: transparent; color: #9ca3af; }
.icon-button-dark:hover { color: #fff; background: #1f2937; border-color: #475569; }
.icon-button-sm { width: 1.65rem; height: 1.65rem; border: 0; }
.icon-button-sm svg { width: .9rem; height: .9rem; }
.notification-button { position: relative; display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-700); }
.notification-button:hover, .notification-button.show { background: #f1f5f9; color: var(--brand-dark); }
.notification-count { position: absolute; top: .05rem; right: -.1rem; min-width: 1.2rem; height: 1.2rem; display: grid; place-items: center; padding: 0 .2rem; border: 2px solid #fff; border-radius: 50%; background: var(--danger); color: #fff; font-size: .6rem; font-weight: 800; }
.notification-menu { width: min(23rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 10px 25px rgba(15, 23, 42, .12); }
.notification-menu-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--line); background: #f8fafc; }
.notification-menu-header strong, .notification-menu-header span { display: block; }
.notification-menu-header strong { font-size: .85rem; }
.notification-menu-header span { color: var(--ink-500); font-size: .7rem; }
.notification-menu-header .btn-link { color: var(--brand); font-size: .72rem; font-weight: 700; text-decoration: none; }
.notification-list { max-height: 23rem; overflow-y: auto; }
.notification-item { display: flex; gap: .55rem; align-items: flex-start; padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; }
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: #f8fbff; }
.notification-dot { width: .45rem; height: .45rem; flex: 0 0 .45rem; margin-top: .35rem; border-radius: 50%; background: transparent; }
.unread .notification-dot { background: var(--brand); }
.notification-item p { margin: 0; color: var(--ink-700); font-size: .75rem; line-height: 1.35; }
.notification-item small { color: var(--ink-500); font-size: .67rem; }
.empty-notifications { padding: 2rem 1rem; color: var(--ink-500); text-align: center; font-size: .78rem; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading h1 { margin: 0; color: var(--ink-950); font-size: 1.5rem; font-weight: 750; letter-spacing: 0; }
.page-heading p { max-width: 46rem; margin: .35rem 0 0; color: var(--ink-500); font-size: .83rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.section-heading h2 { margin: 0; color: var(--ink-800); font-size: .95rem; font-weight: 750; }
.section-heading p { margin: .15rem 0 0; color: var(--ink-500); font-size: .75rem; }

.surface { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.surface-pad { padding: 1.25rem; }
.stat-card { height: 100%; padding: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.stat-label { color: var(--ink-500); font-size: .72rem; font-weight: 700; }
.stat-value { margin-top: .5rem; color: var(--ink-950); font-size: 1.65rem; font-weight: 750; line-height: 1; }
.stat-note { margin-top: .4rem; color: var(--ink-500); font-size: .7rem; }
.stat-card.success .stat-value, .success-text { color: var(--success); }
.stat-card.danger .stat-value, .danger-text { color: var(--danger); }
.metric-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 6px; background: #eff6ff; color: var(--brand); }
.metric-icon.success { color: var(--success); background: #ecfdf5; }
.metric-icon.warning { color: var(--warning); background: #fffbeb; }
.metric-icon.danger { color: var(--danger); background: #fef2f2; }
.metric-icon svg { width: 1rem; height: 1rem; }
.progress { height: .42rem; background: #edf1f5; border-radius: 99px; }
.progress-bar { background: var(--brand); }
.progress-bar.success { background: var(--success); }
.data-row { display: flex; gap: .85rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid #eef2f7; color: inherit; text-decoration: none; }
.data-row:last-child { padding-bottom: 0; border-bottom: 0; }
.data-row:first-child { padding-top: 0; }
.data-row:hover .data-row-title { color: var(--brand-dark); }
.data-row-title { color: var(--ink-800); font-size: .82rem; font-weight: 700; }
.data-row-meta { margin-top: .14rem; color: var(--ink-500); font-size: .72rem; }
.deadline-date { min-width: 3.6rem; padding: .35rem .3rem; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #92400e; text-align: center; font-size: .7rem; font-weight: 700; }

.filter-surface { margin-bottom: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.filter-summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--ink-700); font-size: .8rem; font-weight: 700; list-style: none; }
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary svg { width: 1rem; height: 1rem; }
.filter-surface[open] .filter-summary { margin-bottom: 1rem; }
.filter-actions { display: flex; gap: .5rem; align-items: end; }
.table-surface { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: #eef2f7; }
.table thead th { border-bottom: 1px solid var(--line); background: #f8fafc; color: var(--ink-500); font-size: .7rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr:nth-of-type(even) { background-color: #f8fafc; }
.table tbody tr:nth-of-type(odd) { background-color: #ffffff; }
.table tbody tr:hover { background-color: #eff6ff !important; }
.tender-link { color: var(--ink-800); font-weight: 700; text-decoration: none; }
.tender-link:hover { color: var(--brand-dark); }
.table-subtext { display: block; margin-top: .15rem; color: var(--ink-500); font-size: .7rem; }
.table-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.table-actions form { margin: 0; }
.table-actions .btn { min-width: 2rem; padding-inline: .45rem; }
.table-actions .btn svg { width: .9rem; height: .9rem; }
.badge { padding: .34rem .5rem; border-radius: 5px; font-size: .68rem; font-weight: 700; }
.text-bg-primary { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.text-bg-secondary { background-color: #e5e7eb !important; color: #374151 !important; }
.text-bg-success { background-color: #d1fae5 !important; color: #047857 !important; }
.text-bg-danger { background-color: #fee2e2 !important; color: #b91c1c !important; }
.text-bg-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.text-bg-info { background-color: #cffafe !important; color: #0e7490 !important; }
.form-label { margin-bottom: .38rem; color: var(--ink-700); font-size: .76rem; font-weight: 700; }
.form-control, .form-select { min-height: 2.5rem; border-color: #d1d5db; border-radius: 6px; color: var(--ink-800); font-size: .84rem; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .1); }
textarea.form-control { min-height: auto; }
.btn { min-height: 2.45rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 6px; font-size: .8rem; font-weight: 700; }
.btn-sm { min-height: 2rem; font-size: .72rem; }
.btn-primary { border-color: var(--brand); background: var(--brand); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--brand-dark); background: var(--brand-dark); }
.btn-success { border-color: var(--success); background: var(--success); color: #fff; }
.btn-success:hover, .btn-success:focus { border-color: #047857; background: #047857; color: #fff; }
.btn-info { border-color: #0891b2; background: #0891b2; color: #fff; }
.btn-info:hover, .btn-info:focus { border-color: #0e7490; background: #0e7490; color: #fff; }
.btn-outline-secondary { color: var(--ink-700); border-color: #d1d5db; }
.btn-outline-secondary:hover { background: var(--ink-700); }
.app-alert { display: flex; align-items: center; gap: .5rem; border: 1px solid #a7f3d0; border-radius: 6px; background: #ecfdf5; color: #065f46; font-size: .82rem; }
.app-alert-danger { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.app-alert svg { width: 1.1rem; flex: 0 0 auto; }
.empty-state { padding: 3rem 1.5rem; color: var(--ink-500); text-align: center; }
.empty-state svg { width: 1.6rem; height: 1.6rem; margin-bottom: .6rem; color: #94a3b8; }
.empty-state p { margin: 0; font-size: .83rem; }

.detail-hero { padding: 1.35rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.detail-kicker { margin-bottom: .45rem; color: var(--ink-500); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.detail-hero h1 { margin: 0; color: var(--ink-950); font-size: 1.45rem; font-weight: 750; }
.detail-hero-meta { margin-top: .45rem; color: var(--ink-500); font-size: .82rem; }
.detail-grid-label { margin-bottom: .22rem; color: var(--ink-500); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.detail-grid-value { color: var(--ink-800); font-size: .85rem; font-weight: 650; }
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--ink-500); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: .78rem; font-weight: 700; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active { color: var(--brand-dark); border-bottom-color: var(--brand); background: transparent; }
.tab-surface { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 7px 7px; background: #fff; }
.tender-detail-stack { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.tender-detail-stack > .surface { width: 100%; }
.timeline { position: relative; padding-left: 1.3rem; }
.timeline::before { position: absolute; top: .2rem; bottom: .2rem; left: .28rem; width: 1px; background: #dbe3ec; content: ""; }
.timeline-item { position: relative; padding: 0 0 1rem .6rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { position: absolute; top: .25rem; left: -.05rem; width: .68rem; height: .68rem; border: 2px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px #93c5fd; content: ""; }
.timeline-item p { margin: 0; color: var(--ink-700); font-size: .82rem; }
.timeline-item small { display: block; margin-top: .2rem; color: var(--ink-500); font-size: .7rem; }
.guest-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: #eef2f7; }
.login-card { width: min(100%, 26rem); padding: 2rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(15, 23, 42, .08); }
.login-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.7rem; }
.login-brand h1 { margin: 0; color: var(--ink-950); font-size: 1.2rem; font-weight: 750; }
.login-brand p { margin: .1rem 0 0; color: var(--ink-500); font-size: .75rem; }

/* The project ships a compact Bootstrap subset; these component utilities complete the app shell. */
.d-none { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.d-block { display: block !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.ps-lg-4 { padding-left: 0; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-auto { margin-left: auto !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-primary { color: var(--brand-dark) !important; }
.fw-semibold { font-weight: 650 !important; }
.fs-5 { font-size: 1.25rem !important; }
.small { font-size: .8rem !important; }
.border-top { border-top: 1px solid var(--line) !important; }
.btn-outline-danger { border-color: #fecaca; color: #b91c1c; }
.btn-outline-danger:hover { border-color: #dc2626; background: #dc2626; color: #fff; }
.alert-warning { border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #92400e; font-size: .82rem; }
.btn-close { width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0; border: 0; background: transparent; opacity: .6; }
.btn-close::before { content: "×"; font-size: 1.25rem; line-height: 1; }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; z-index: 1000; }
.dropdown-menu.show { display: block; }
.nav-tabs { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav-item { list-style: none; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.offcanvas { visibility: visible; }
.offcanvas-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(15, 23, 42, .55); }
.offcanvas-backdrop.fade { opacity: 0; }
.offcanvas-backdrop.show { opacity: 1; }
.col-sm-6, .col-lg-5, .col-lg-6, .col-lg-7, .col-xl, .col-xl-4, .col-xl-5, .col-xl-7, .col-xl-8 { width: 100%; }

@media (max-width: 991.98px) {
    .app-sidebar { width: 16rem !important; background: var(--ink-950); }
    /* The sidebar is an overlay at this breakpoint, so it must not reserve
       desktop sidebar space from the page content. */
    .app-main {
        width: 100%;
        max-width: 100vw;
        flex: 1 1 100%;
    }
    .sidebar-content { min-height: 100%; }
    .app-brand { display: none; }
    .app-header { height: 4.25rem; padding: 0 1rem; }
    .app-content { padding: 1.25rem 1rem; }
    .offcanvas-lg { position: fixed; z-index: 1045; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .2s ease-in-out; }
    .offcanvas-lg.show { transform: translateX(0); }
    .offcanvas-lg:not(.show) { visibility: hidden; }
}
@media (min-width: 576px) { .d-sm-block { display: block !important; } .col-sm-6 { width: 50%; } }
@media (min-width: 768px) { .col-md-5 { width: 41.666667%; } .col-md-7 { width: 58.333333%; } }
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .ps-lg-4 { padding-left: 1.5rem !important; }
    .border-start-lg { border-left: 1px solid var(--line); }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333333%; }
}
@media (min-width: 1200px) {
    .col-xl { width: 20%; }
    .col-xl-4 { width: 33.333333%; }
    .col-xl-5 { width: 41.666667%; }
    .col-xl-7 { width: 58.333333%; }
    .col-xl-8 { width: 66.666667%; }
}
@media (max-width: 575.98px) {
    .app-header { padding-inline: .75rem; }
    .app-content { padding: 1rem .75rem; }
    .page-heading { display: block; }
    .page-actions { margin-top: 1rem; }
    .page-actions .btn { flex: 1; }
    .filter-actions { align-items: stretch; }
    .filter-actions .btn { flex: 1; }
    .detail-hero { padding: 1rem; }
    .detail-hero h1 { font-size: 1.2rem; }
    .login-card { padding: 1.5rem; }
    .surface-pad,
    .filter-surface { padding: 1rem; }
    .section-heading { align-items: flex-start; }
}

/* Redesign Card Panel Styles matching reference images */
.card-panel {
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.card-header-slate {
    background-color: #5c6b73;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header-blue {
    background-color: #1a56db;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header-teal {
    background-color: #17a2b8;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-body-pad {
    padding: 1.25rem;
}
.table-lines th {
    background-color: #f8fafc;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.75rem 0.6rem;
}
.table-lines td {
    padding: 0.6rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}
.table-compact th {
    padding: 0.35rem 0.25rem !important;
    font-size: 0.78rem !important;
    vertical-align: middle !important;
}
.table-compact td {
    padding: 0.2rem 0.25rem !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    font-weight: 400 !important;
}
.table-compact td strong, .table-compact a.tender-link {
    font-weight: 400 !important;
}
.table-compact .form-select-sm {
    padding: 0.1rem 0.2rem !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    min-height: 1.45rem !important;
    height: 1.45rem !important;
}
.status-select-compact {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    padding: 0.1rem 0.2rem !important;
    padding-right: 0.95rem !important;
    background-position: right 0.2rem center !important;
    background-size: 8px 6px !important;
    min-height: 1.55rem !important;
    height: 1.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 4px !important;
    cursor: pointer;
}
.table-compact .btn-sm {
    padding: 0.15rem 0.35rem !important;
    min-height: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.72rem !important;
}
.row-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #64748b;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px;
    font-size: 0.85rem;
}

.tender-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .6rem;
}
.tender-filter-actions .btn {
    min-height: 2.55rem;
}
.tender-list-toolbar {
    padding: .75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.tender-list-length,
.tender-list-search {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tender-list-search .form-control {
    width: 13rem;
}
.tender-table-scroll {
    background: #ffffff;
    max-width: 100%;
    overflow-x: hidden;
}
.tenders-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.tenders-table th,
.tenders-table td {
    padding: 0.35rem 0.25rem !important;
    font-size: 0.79rem !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
}
.tenders-table thead th {
    background: #2f3742 !important;
    color: #ffffff !important;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
}
.tenders-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tenders-table .tender-link {
    line-height: 1.25;
    font-weight: 650 !important;
    word-break: break-word;
}
.tenders-table .tender-package-name {
    color: #1d4ed8;
    margin-top: .18rem;
    font-size: .88rem;
    font-weight: 500 !important;
    line-height: 1.3;
    white-space: normal;
}
.tenders-table .tender-number-link,
.tenders-table .tender-investor-name {
    text-decoration: none;
}
.tenders-table .tender-number-link:hover,
.tenders-table .tender-package-name:hover,
.tenders-table .tender-investor-name:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tenders-table .tender-investor-name {
    color: #334155;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}
.tenders-table .tender-location {
    margin-top: .1rem;
    color: #64748b;
    font-size: .68rem;
}
.tender-region-shortcuts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 .85rem;
}
.tender-region-shortcuts__label {
    color: #475569;
    font-size: .82rem;
    font-weight: 600;
}
.tender-region-tag {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .38rem .72rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tender-region-tag svg {
    width: 14px;
    height: 14px;
}
.tender-region-count {
    display: inline-grid;
    min-width: 1.22rem;
    height: 1.22rem;
    padding: 0 .26rem;
    place-items: center;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: super;
}
.tender-region-tag:hover,
.tender-region-tag.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}
.tender-region-tag:hover .tender-region-count,
.tender-region-tag.is-active .tender-region-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.tender-model-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
}
.tender-model-item {
    display: block;
    max-width: 100%;
    padding: .18rem .38rem;
    border: 1px solid #e2e8f0;
    border-radius: .3rem;
    background: #f8fafc;
    color: #334155;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.tenders-table .table-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
    width: auto !important;
}
.tenders-table .table-actions .btn {
    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
}
.tenders-table .table-actions .btn svg {
    width: 12px !important;
    height: 12px !important;
}
.tenders-table th:nth-child(1),
.tenders-table td:nth-child(1) { width: 7% !important; }
.tenders-table th:nth-child(2),
.tenders-table td:nth-child(2) { width: 29% !important; }
.tenders-table th:nth-child(3),
.tenders-table td:nth-child(3) { width: 14% !important; }
.tenders-table th:nth-child(4),
.tenders-table td:nth-child(4) { width: 8% !important; }
.tenders-table th:nth-child(5),
.tenders-table td:nth-child(5) { width: 11% !important; }
.tenders-table th:nth-child(6),
.tenders-table td:nth-child(6) { width: 11.5% !important; }
.tenders-table th:nth-child(7),
.tenders-table td:nth-child(7) { width: 11.5% !important; }
.tenders-table th:nth-child(8),
.tenders-table td:nth-child(8) { width: 8% !important; }

.tender-form .card-panel {
    margin-bottom: 1.4rem;
}
.tender-info-grid .mb-3 {
    margin-bottom: 1rem !important;
}
.tender-lines-header {
    gap: .75rem;
}
.tender-add-line-btn {
    min-width: 10rem;
}
.tender-lines-scroll {
    background: #ffffff;
    max-width: 100%;
    overflow-x: hidden;
}
.tender-lines-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.tender-lines-table thead th {
    padding: 0.5rem 0.35rem !important;
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}
.tender-lines-table th,
.tender-lines-table td {
    line-height: 1.25;
    padding: 0.45rem 0.35rem !important;
    font-size: 0.82rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.tender-lines-table textarea.form-control-sm {
    min-height: 3rem;
    resize: vertical;
}
#tenderLinesTable th:nth-child(1),
#tenderLinesTable td:nth-child(1) { width: 5% !important; }
#tenderLinesTable th:nth-child(2),
#tenderLinesTable td:nth-child(2) { width: 18% !important; }
#tenderLinesTable th:nth-child(3),
#tenderLinesTable td:nth-child(3) { width: 27% !important; }
#tenderLinesTable th:nth-child(4),
#tenderLinesTable td:nth-child(4) { width: 8% !important; }
#tenderLinesTable th:nth-child(5),
#tenderLinesTable td:nth-child(5) { width: 14% !important; }
#tenderLinesTable th:nth-child(6),
#tenderLinesTable td:nth-child(6) { width: 14% !important; }
#tenderLinesTable th:nth-child(7),
#tenderLinesTable td:nth-child(7) { width: 9% !important; }
#tenderLinesTable th:nth-child(8),
#tenderLinesTable td:nth-child(8) { width: 5% !important; }
.tender-form-actions {
    align-items: center;
}

@media (max-width: 850px) {
    .card-body-pad {
        padding: 1rem;
    }
    .tender-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .tender-filter-actions .btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
    }
    .tender-filter-actions .btn-success {
        grid-column: 1 / -1;
    }
    .tender-list-toolbar {
        align-items: stretch;
        padding: .8rem;
    }
    .tender-list-length,
    .tender-list-search {
        width: 100%;
        justify-content: space-between;
    }
    .tender-list-search {
        align-items: stretch;
        flex-direction: column;
    }
    .tender-list-search .form-control {
        width: 100% !important;
    }
    .tender-table-scroll {
        overflow-x: visible;
        padding: .75rem;
        background: #f8fafc;
    }
    .tenders-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 .75rem;
        background: transparent;
    }
    .tenders-table thead {
        display: none;
    }
    .tenders-table tbody,
    .tenders-table tr,
    .tenders-table td {
        display: block;
        width: 100% !important;
    }
    .tenders-table tbody tr.tender-row-item {
        padding: .85rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 7px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
    }
    .tenders-table.table-compact td {
        padding: .55rem 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #edf2f7;
        font-size: .86rem !important;
    }
    .tenders-table.table-compact td:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0;
    }
    .tenders-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .25rem;
        color: #64748b;
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .tenders-table td[data-label="Mã số"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding-top: 0 !important;
    }
    .tenders-table td[data-label="Mã số"]::before {
        margin-bottom: 0;
    }
    .tenders-table td[data-label="Tên gói thầu & Chủ đầu tư"] .tender-package-name {
        font-size: .94rem;
        font-weight: 500 !important;
    }
    .tenders-table td[data-label="Tên gói thầu & Chủ đầu tư"] .tender-investor-name {
        font-size: 1.04rem;
        font-weight: 600;
    }
    .tenders-table td[data-label="Thao tác"] {
        text-align: left !important;
    }
    .tenders-table td[data-label="Thao tác"]::before {
        display: none;
    }
    .tenders-table .table-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
        width: 100% !important;
    }
    .tenders-table .table-actions .btn,
    .tenders-table .table-actions form,
    .tenders-table .table-actions button {
        width: 100% !important;
        min-width: 0 !important;
    }
    .tenders-table .table-actions .btn {
        height: 2.15rem !important;
        min-height: 2.15rem !important;
    }
    .tenders-table .status-select-compact {
        width: 100%;
        min-height: 2.15rem !important;
        height: 2.15rem !important;
        padding: .25rem .5rem !important;
    }
    .tenders-table .text-truncate {
        max-width: none !important;
        white-space: normal;
    }
    .tender-form .page-actions .btn {
        width: 100%;
    }
    .tender-meta-row,
    .tender-status-row {
        row-gap: .75rem;
    }
    .tender-meta-row > .col-6,
    .tender-status-row > .col-6 {
        width: 100%;
    }
    .tender-lines-header {
        align-items: stretch;
        flex-direction: column;
    }
    .tender-lines-header > div {
        min-width: 0;
    }
    .tender-add-line-btn {
        width: 100%;
        min-width: 0;
    }
    .tender-lines-body {
        padding: .75rem !important;
        background: #f8fafc;
    }
    .tender-lines-scroll {
        overflow-x: visible;
        background: transparent;
    }
    .tender-lines-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 .75rem;
        background: transparent;
    }
    .tender-lines-table thead {
        display: none;
    }
    .tender-lines-table tbody,
    .tender-lines-table tr,
    .tender-lines-table td {
        display: block;
        width: 100% !important;
    }
    .tender-lines-table tbody tr.tender-line-row {
        padding: .85rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 7px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
    }
    .tender-lines-table td {
        padding: .55rem 0 !important;
        border-bottom: 1px solid #edf2f7;
    }
    /* Keep this selector at least as specific as the desktop nth-child column
       widths above; otherwise Model/quantity/price cells remain only 8-18%. */
    #tenderLinesTable tbody tr.tender-line-row > td {
        width: 100% !important;
    }
    .tender-lines-table td:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0;
    }
    .tender-lines-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .25rem;
        color: #64748b;
        font-size: .68rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
    .tender-lines-table td[data-label="Dòng"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding-top: 0 !important;
    }
    .tender-lines-table td[data-label="Dòng"]::before {
        margin-bottom: 0;
    }
    .tender-lines-table td[data-label="Thao tác"] {
        text-align: left !important;
    }
    .tender-lines-table td[data-label="Thao tác"]::before {
        display: none;
    }
    .tender-lines-table td[data-label="Thao tác"] .btn {
        width: 100%;
    }
    .tender-lines-table .form-control-sm {
        min-height: 2.4rem;
    }
    .tender-lines-table textarea.form-control-sm {
        min-height: 4.2rem;
    }
    .tender-form-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .tender-form-actions .btn {
        width: 100%;
    }
}

/* Autocomplete Component Styles */
.autocomplete-container {
    position: relative;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: none;
}
.autocomplete-dropdown.show {
    display: block;
}
.autocomplete-item {
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.autocomplete-item:last-child {
    border-bottom: 0;
}
.autocomplete-item:hover, .autocomplete-item.active {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

/* Telegram notification operations */
.notification-ops { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.notification-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: .3rem 0 .15rem; }
.notification-eyebrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; color: var(--brand-dark); font-size: .7rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.notification-eyebrow svg { width: .9rem; height: .9rem; }
.notification-hero h1 { margin: 0; color: var(--ink-950); font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.notification-hero p { max-width: 45rem; margin: .4rem 0 0; color: var(--ink-500); font-size: .82rem; line-height: 1.5; }
.notification-health { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; min-width: 15.5rem; padding: .75rem .9rem; border: 1px solid #d1fae5; border-radius: 8px; background: #f0fdf8; }
.notification-health.needs-attention { border-color: #fde68a; background: #fffbeb; }
.notification-health-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(5, 150, 105, .12); }
.notification-health.needs-attention .notification-health-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 119, 6, .12); }
.notification-health strong, .notification-health small { display: block; }
.notification-health strong { color: #065f46; font-size: .78rem; }
.notification-health.needs-attention strong { color: #92400e; }
.notification-health small { margin-top: .12rem; color: var(--ink-500); font-size: .66rem; }
.notification-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.notification-metric { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .025); }
.notification-metric-icon { display: grid; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; place-items: center; border-radius: 8px; background: #eff6ff; color: #2563eb; }
.notification-metric-icon svg { width: 1.15rem; height: 1.15rem; }
.notification-metric > div { display: grid; min-width: 0; flex: 1; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: center; }
.notification-metric span:not(.notification-metric-icon) { color: var(--ink-500); font-size: .69rem; font-weight: 750; }
.notification-metric strong { color: var(--ink-950); font-size: 1.45rem; line-height: 1; }
.notification-metric small { grid-column: 1 / -1; margin-top: .25rem; overflow: hidden; color: #94a3b8; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-metric.metric-red .notification-metric-icon { background: #fef2f2; color: var(--danger); }
.notification-metric.metric-amber .notification-metric-icon { background: #fffbeb; color: var(--warning); }
.notification-metric.metric-violet .notification-metric-icon { background: #f5f3ff; color: #7c3aed; }
.notification-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .03); }
.notification-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); }
.notification-section-kicker { display: block; margin-bottom: .22rem; color: var(--brand-dark); font-size: .64rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.notification-panel-header h2 { margin: 0; color: var(--ink-950); font-size: 1rem; font-weight: 800; }
.notification-panel-header p { margin: .28rem 0 0; color: var(--ink-500); font-size: .72rem; }
.notification-save-button { flex: 0 0 auto; }
.notification-rule-groups { display: grid; grid-template-columns: 1fr; }
.notification-rule-group { min-width: 0; padding: 1.1rem 1.25rem 1.2rem; }
.notification-rule-group + .notification-rule-group { border-top: 1px solid var(--line); }
.notification-rule-group-title { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.notification-rule-group-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 7px; background: #eef4ff; color: var(--brand-dark); }
.notification-rule-group-icon svg { width: 1rem; height: 1rem; }
.notification-rule-group-title h3 { margin: 0; color: var(--ink-800); font-size: .8rem; font-weight: 800; }
.notification-rule-group-title small { display: block; margin-top: .05rem; color: #94a3b8; font-size: .62rem; }
.notification-rule-list { overflow: hidden; border: 1px solid #e8edf3; border-radius: 8px; }
.notification-rule-row { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(36rem, 2fr); gap: 1rem; align-items: center; min-height: 5.15rem; padding: .75rem .85rem; border-bottom: 1px solid #edf1f5; }
.notification-rule-row.is-priority-rule { background: #fffbeb; box-shadow: inset 3px 0 #f59e0b; }
.notification-rule-row:last-child { border-bottom: 0; }
.notification-rule-row:nth-child(even) { background: #fbfcfe; }
.notification-rule-copy { min-width: 0; }
.notification-rule-copy strong, .notification-rule-copy span, .notification-rule-copy code { display: block; }
.notification-rule-copy strong { color: var(--ink-800); font-size: .76rem; font-weight: 750; }
.notification-rule-copy span { margin-top: .12rem; color: var(--ink-500); font-size: .65rem; line-height: 1.35; }
.notification-rule-copy code { margin-top: .28rem; overflow: hidden; color: #94a3b8; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-mode-select { min-height: 2.25rem; padding-block: .35rem; padding-left: .7rem; border-color: #d9e1ea; background-position: right .6rem center; font-size: .7rem; font-weight: 750; }
.notification-mode-select.mode-push { border-color: #a7f3d0; background-color: #ecfdf5; color: #047857; }
.notification-mode-select.mode-silent { border-color: #bfdbfe; background-color: #eff6ff; color: #1d4ed8; }
.notification-mode-select.mode-off { background-color: #f8fafc; color: #64748b; }
.notification-target-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.notification-target-mode { min-width: 0; }
.notification-target-mode > span { display: flex; align-items: center; gap: .25rem; margin-bottom: .25rem; overflow: hidden; color: #64748b; font-size: .57rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.notification-target-mode > span svg { width: .68rem; height: .68rem; }
.notification-save-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); background: #f8fafc; }
.notification-save-footer > span { display: flex; align-items: center; gap: .4rem; color: var(--ink-500); font-size: .67rem; }
.notification-save-footer svg { width: .9rem; height: .9rem; color: var(--brand); }
.notification-save-footer strong { color: var(--ink-700); }
.notification-delivery-heading { border-bottom: 0; }
.notification-result-count { flex: 0 0 auto; padding: .32rem .55rem; border-radius: 99px; background: #f1f5f9; color: var(--ink-500); font-size: .68rem; font-weight: 750; }
.notification-filters { display: flex; align-items: end; gap: .6rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8fafc; }
.notification-filter-field { width: 12rem; }
.notification-filter-field.notification-filter-event { width: min(24rem, 36%); }
.notification-filter-field label { display: block; margin-bottom: .3rem; color: var(--ink-700); font-size: .67rem; font-weight: 750; }
.notification-filters .form-select, .notification-filters .btn { min-height: 2.3rem; font-size: .75rem; }
.notification-filters .form-select { background-color: #fff; }
.notification-delivery-table-wrap { max-width: 100%; overflow-x: auto; }
.notification-delivery-table { width: 100%; min-width: 64rem; border-collapse: collapse; }
.notification-delivery-table th { padding: .68rem .85rem; border-bottom: 1px solid var(--line); background: #fff; color: #94a3b8; font-size: .62rem; font-weight: 800; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.notification-delivery-table td { padding: .8rem .85rem; border-bottom: 1px solid #edf1f5; color: var(--ink-700); font-size: .72rem; vertical-align: middle; }
.notification-delivery-table tbody tr:last-child td { border-bottom: 0; }
.notification-delivery-table tbody tr:hover { background: #f8fbff; }
.notification-delivery-id { color: var(--ink-950); }
.notification-delivery-event, .notification-delivery-table td > code { display: block; }
.notification-delivery-event { color: var(--ink-800); font-size: .72rem; }
.notification-delivery-table td > code { margin-top: .2rem; color: #94a3b8; font-size: .58rem; }
.notification-aggregate, .notification-no-error { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.notification-aggregate svg, .notification-no-error svg { width: .8rem; height: .8rem; }
.notification-aggregate svg { color: #94a3b8; }
.notification-channel { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .45rem; border-radius: 6px; background: #eff6ff; color: #1d4ed8; font-size: .62rem; font-weight: 750; white-space: nowrap; }
.notification-channel.channel-email { background: #f5f3ff; color: #6d28d9; }
.notification-channel svg { width: .72rem; height: .72rem; }
.notification-status { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .48rem; border-radius: 99px; background: #f1f5f9; color: #475569; font-size: .64rem; font-weight: 750; white-space: nowrap; }
.notification-status svg { width: .75rem; height: .75rem; }
.notification-status.status-sent { background: #ecfdf5; color: #047857; }
.notification-status.status-pending, .notification-status.status-processing, .notification-status.status-retry_wait { background: #eff6ff; color: #1d4ed8; }
.notification-status.status-uncertain { background: #fffbeb; color: #b45309; }
.notification-status.status-permanent_failed { background: #fef2f2; color: #b91c1c; }
.notification-attempt { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-weight: 750; }
.notification-delivery-table time { white-space: nowrap; }
.notification-delivery-table time small { display: block; margin-top: .1rem; color: #94a3b8; font-size: .62rem; }
.notification-delivery-detail { min-width: 12rem; }
.notification-no-error { color: #059669; font-size: .66rem; }
.notification-error { display: flex; gap: .3rem; margin: 0 0 .4rem; color: #b91c1c; font-size: .65rem; line-height: 1.35; }
.notification-error svg { width: .8rem; height: .8rem; flex: 0 0 auto; }
.notification-retry-form { display: flex; gap: .35rem; }
.notification-retry-form .form-control { min-width: 10rem; }
.notification-retry-form .btn { flex: 0 0 auto; }
.notification-empty { display: flex; min-height: 13rem; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-500); text-align: center; }
.notification-empty > span { display: grid; width: 2.7rem; height: 2.7rem; margin-bottom: .65rem; place-items: center; border-radius: 50%; background: #f1f5f9; color: #94a3b8; }
.notification-empty strong { color: var(--ink-700); font-size: .8rem; }
.notification-empty p { margin: .2rem 0 0; font-size: .68rem; }
.notification-pagination { padding: .8rem 1.25rem; border-top: 1px solid var(--line); }

@media (max-width: 1199.98px) {
    .notification-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notification-rule-row { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .notification-hero, .notification-panel-header, .notification-save-footer, .notification-filters { align-items: stretch; flex-direction: column; }
    .notification-health { min-width: 0; }
    .notification-metrics { grid-template-columns: 1fr; }
    .notification-save-button, .notification-save-footer .btn, .notification-filters .btn { width: 100%; }
    .notification-rule-group { padding: .85rem; }
    .notification-rule-row { grid-template-columns: 1fr; gap: .6rem; }
    .notification-target-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notification-filter-field, .notification-filter-field.notification-filter-event { width: 100%; }
}