/* =============================================================================
   KidsfitEdu – Common Stylesheet
   Design system variables và utility classes dùng chung toàn hệ thống.
   Import file này vào wwwroot/app.css của Web và Mobile.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   ----------------------------------------------------------------------------- */

:root {
    /* -- Spacing scale -- */
    --kf-space-xs:   4px;
    --kf-space-sm:   8px;
    --kf-space-md:   16px;
    --kf-space-lg:   24px;
    --kf-space-xl:   32px;
    --kf-space-2xl:  48px;

    /* -- Border radius -- */
    --kf-radius-sm:  4px;
    --kf-radius-md:  8px;
    --kf-radius-lg:  12px;
    --kf-radius-xl:  16px;
    --kf-radius-full: 9999px;

    /* -- Elevation / Shadow -- */
    --kf-shadow-card:   0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    --kf-shadow-md:     0 4px 12px rgba(0,0,0,.10);
    --kf-shadow-lg:     0 8px 24px rgba(0,0,0,.12);
    --kf-shadow-drawer: -4px 0 20px rgba(0,0,0,.12);

    /* -- Layout -- */
    --kf-sidebar-width:     260px;
    --kf-navbar-height:     64px;
    --kf-content-max-width: 100%;     /* Portal = full-width; override per-page if needed */

    /* -- Typography -- */
    --kf-font-weight-normal:  400;
    --kf-font-weight-medium:  600;
    --kf-font-weight-bold:    700;

    /* ── Brand / Green palette ────────────────────────────────── */
    --kf-green-darkest:  #071811;   /* Sidebar hover overlay */
    --kf-green-dark:     #0E2A1A;   /* Sidebar background */
    --kf-green-900:      #1B5E20;   /* Primary buttons, active states */
    --kf-green-700:      #2E7D32;   /* Hover on primary */
    --kf-green-500:      #4CAF50;   /* Icon accents, progress */
    --kf-green-100:      #DCFCE7;   /* Light success bg */
    --kf-green-50:       #F0FDF4;   /* Tint backgrounds */

    /* ── Neutral / Grey palette ───────────────────────────────── */
    --kf-text-primary:    #111827;
    --kf-text-secondary:  #6B7280;
    --kf-text-muted:      #9CA3AF;
    --kf-text-disabled:   #D1D5DB;
    --kf-border:          #E5E7EB;
    --kf-border-focus:    #1B5E20;
    --kf-surface:         #FFFFFF;
    --kf-bg-grey:         #F9FAFB;
    --kf-bg-grey-dark:    #F3F4F6;

    /* ── Semantic status colors ───────────────────────────────── */
    --kf-success:         #16A34A;
    --kf-success-bg:      #DCFCE7;
    --kf-success-text:    #14532D;
    --kf-warning:         #D97706;
    --kf-warning-bg:      #FEF3C7;
    --kf-warning-text:    #92400E;
    --kf-error:           #DC2626;
    --kf-error-bg:        #FEE2E2;
    --kf-error-text:      #7F1D1D;
    --kf-info:            #2563EB;
    --kf-info-bg:         #DBEAFE;
    --kf-info-text:       #1E3A8A;

    /* ── Transition ───────────────────────────────────────────── */
    --kf-transition-fast:   .15s ease;
    --kf-transition-normal: .25s ease;
    --kf-transition-slow:   .35s ease;

    /* ── Component Library tokens (from Figma 11/12/13) ───────── */
    /* Form fields */
    --kf-input-bg:         #f8faf8;
    --kf-input-bg-focus:   #ffffff;
    --kf-input-border:     #dae7da;
    --kf-input-border-fc:  #2e7d32;
    --kf-input-h:          44px;
    --kf-input-radius:     8px;
    --kf-input-text:       #1a2e1c;
    --kf-input-placeholder: #9ca39c;
    --kf-input-label:      #5a6e5c;

    /* Button shadows (per variant) */
    --kf-btn-shadow-primary: 0 4px 12px rgba(46, 125, 50, 0.30);
    --kf-btn-shadow-danger:  0 3px 10px rgba(229,  57, 53, 0.30);

    /* Status badge palette (6 variants — Figma Bdg-Card) */
    --kf-badge-active-bg:    #e8f5e9;  --kf-badge-active-fg:    #43a047;
    --kf-badge-paused-bg:    #ffebee;  --kf-badge-paused-fg:    #e53935;
    --kf-badge-draft-bg:     #fff3e0;  --kf-badge-draft-fg:     #fb8c00;
    --kf-badge-pending-bg:   #e3f2fd;  --kf-badge-pending-fg:   #1e88e5;
    --kf-badge-new-bg:       #f3e5f5;  --kf-badge-new-fg:       #6a1b9a;
    --kf-badge-important-bg: #fce4ec;  --kf-badge-important-fg: #c2185b;

    /* Dot palette (online/offline/busy/pending) */
    --kf-dot-online:   #43a047;
    --kf-dot-offline:  #9ca39c;
    --kf-dot-busy:     #e53935;
    --kf-dot-pending:  #fb8c00;
}

/* -----------------------------------------------------------------------------
   2. Layout Shell
   ----------------------------------------------------------------------------- */

/*
 * Sticky footer — flexbox approach (no position:fixed needed).
 * MudMainContent is the flex column; the MudContainer holding @Body grows to
 * fill remaining height, pushing AppFooter to the very bottom of the viewport.
 */
.mud-main-content {
    display:        flex !important;
    flex-direction: column !important;
    min-height:     100vh !important;
}
.mud-main-content > .mud-container {
    flex: 1 0 auto;
}

.kf-page-container {
    width:      100%;                          /* Always fill the available area   */
    max-width:  var(--kf-content-max-width);   /* = 100% — portal is full-width    */
    padding:    var(--kf-space-lg);            /* 24px — matches Figma page inset  */
    box-sizing: border-box;                    /* Padding stays inside the 100%    */
}

.kf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--kf-space-lg);
    gap: var(--kf-space-md);
    flex-wrap: wrap;
}

.kf-page-title {
    font-weight: var(--kf-font-weight-bold);
}

/* List-page header (title + subtitle + action) — SINGLE SOURCE OF TRUTH.
   Dùng cho mọi trang "Danh sách X" (Vùng, Khu vực, Trường, …).
   KHÔNG tạo lại bộ class scoped kiểu kf-rg-header / kf-al-header per-page. */
.kf-list-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 4px 12px;
    gap:             var(--kf-space-md);
    flex-wrap:       wrap;
}

.kf-list-title {
    font-size:   20px;
    font-weight: 700;
    color:       #1a2e1c;
    line-height: 1.3;
}

.kf-list-subtitle {
    font-size:   13px;
    color:       #8ba08d;
    margin-top:  4px;
    font-weight: 400;
}

/* Mobile: list header gọn lại; search/filter trong toolbar DataTable chiếm full width
   (override width cố định per-page kiểu kf-sl-search 280px — cần !important vì scoped CSS). */
@media (max-width: 599px) {
    .kf-list-header {
        padding: 12px 2px 8px;
    }

    .kf-list-title {
        font-size: 18px;
    }

    /* flex-basis 100% để mỗi field chiếm 1 dòng khi toolbar wrap (width đơn thuần bị flex-shrink co về 0).
       Lưu ý: MudSelect bọc KfFilterSelect trong 1 lớp .mud-select — flex item thật là lớp đó. */
    .kf-dt-toolbar .kf-search-input,
    .kf-dt-toolbar .kf-filter-select,
    .kf-dt-toolbar .mud-select {
        flex:      1 1 100% !important;
        width:     100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* MudStack Row trong toolbar: cho phép xuống dòng.
       Lưu ý: MudStack render class utility `d-flex flex-row`, KHÔNG có `.mud-stack`;
       scoped CSS per-page (::deep .kf-xx-toolbar) không match được subtree do DataTable render
       → bắt buộc fix global tại đây. */
    .kf-dt-toolbar > .d-flex,
    .kf-dt-toolbar .mud-stack {
        flex-wrap: wrap !important;
    }
}

/* -----------------------------------------------------------------------------
   3. Stat Cards (Dashboard)
   ----------------------------------------------------------------------------- */

.kf-stat-card {
    padding: var(--kf-space-md);
    border-radius: var(--kf-radius-md);
    box-shadow: var(--kf-shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-sm);
}

.kf-stat-value {
    font-size: 2rem;
    font-weight: var(--kf-font-weight-bold);
    line-height: 1.2;
}

.kf-stat-label {
    font-size: 0.75rem;
    opacity: 0.72;
}

/* -----------------------------------------------------------------------------
   4. DataGrid overrides
   ----------------------------------------------------------------------------- */

/* Sticky action column căn phải */
.kf-grid-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* Header toolbar spacing nhất quán */
.mud-table-toolbar {
    padding: var(--kf-space-sm) var(--kf-space-md) !important;
}

/* -----------------------------------------------------------------------------
   5. Evidence / Image Preview
   ----------------------------------------------------------------------------- */

.kf-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--kf-space-sm);
}

.kf-evidence-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--kf-radius-sm);
    border: 1px solid rgba(0,0,0,.08);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.kf-evidence-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* -----------------------------------------------------------------------------
   6. Schedule / Calendar
   ----------------------------------------------------------------------------- */

.kf-week-grid {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    gap: 1px;
    background-color: rgba(0,0,0,.06);
    border-radius: var(--kf-radius-md);
    overflow: hidden;
}

.kf-week-cell {
    background: var(--mud-palette-surface);
    padding: var(--kf-space-xs) var(--kf-space-sm);
    min-height: 56px;
}

.kf-week-cell--header {
    font-weight: var(--kf-font-weight-medium);
    font-size: 0.75rem;
    text-align: center;
    padding: var(--kf-space-sm);
    background: var(--mud-palette-background-grey);
}

.kf-schedule-entry {
    border-radius: var(--kf-radius-sm);
    padding: 2px var(--kf-space-xs);
    font-size: 0.7rem;
    font-weight: var(--kf-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity .15s;
}

.kf-schedule-entry:hover { opacity: .85; }

/* -----------------------------------------------------------------------------
   7. Responsive helpers
   ----------------------------------------------------------------------------- */

@media (max-width: 599px) {
    .kf-page-container {
        padding: var(--kf-space-sm);
    }

    .kf-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kf-stat-value {
        font-size: 1.5rem;
    }

    .kf-evidence-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* -----------------------------------------------------------------------------
   8. Sidebar Navigation
   ----------------------------------------------------------------------------- */

/* Section label — "Quản trị", "Dữ liệu", "Vận hành"... */
.kf-nav-section-label {
    font-size: 0.65rem;
    font-weight: var(--kf-font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--kf-space-md) var(--kf-space-md) var(--kf-space-xs);
    opacity: 0.55;
    display: block;
}

/* Scrollable sidebar content — fills remaining height below the logo header */
.kf-sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex:        1 1 0;
    min-height:  0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

.kf-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.kf-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   9. Pagination
   ----------------------------------------------------------------------------- */

.kf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--kf-space-sm) var(--kf-space-md);
    border-top: 1px solid rgba(0,0,0,.06);
    gap: var(--kf-space-md);
    flex-wrap: wrap;
}

/* Ẩn record count trên mobile — chỉ hiện pagination controls */
@media (max-width: 599px) {
    .kf-pagination-info { display: none; }
}

/* -----------------------------------------------------------------------------
   10. Loading Overlay
   ----------------------------------------------------------------------------- */

.kf-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kf-space-md);
    padding: var(--kf-space-2xl);
}

.kf-loading-overlay--fill {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.75);
    z-index: 10;
    border-radius: inherit;
}

/* -----------------------------------------------------------------------------
   11. Grid Toolbar
   ----------------------------------------------------------------------------- */

.kf-toolbar-search {
    max-width: 280px;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .kf-toolbar-search {
        max-width: 100%;
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   12. Print (bảng công xuất PDF)
   ----------------------------------------------------------------------------- */

@media print {
    .mud-appbar,
    .mud-drawer,
    .kf-page-header .mud-button-group {
        display: none !important;
    }

    .kf-page-container {
        padding: 0;
    }
}

/* ─────────────────────────── DataGrid: viền chỉ ở header ─────────────────────────── */
.kf-grid-header-borders th {
    border-left: 1px solid var(--mud-palette-divider, #e0e0e0);
}

.kf-grid-header-borders th:first-child {
    border-left: none;
}

/* Giữ box-shadow nhưng cắt phần đổ bóng phía dưới (đường viền dưới ảo).
   clip-path inset 0 đáy → ẩn shadow bottom; -20px còn lại → giữ shadow top/left/right. */
.kf-grid-header-borders {
    clip-path: inset(-20px -20px 0 -20px);
}

/* ─────────────────────────── Footer ─────────────────────────────────────── */
/* Sticky bottom via flexbox (mud-main-content is the flex column).           */
/* Portal layout → AppFooter is last child of mud-main-content, pushed down  */
/*                 by the flex:1 MudContainer that holds @Body.               */
/* Public layout → static, luôn ở cuối flex column của kf-public-shell.      */

.kf-footer {
    flex-shrink: 0;            /* Never compress — always shows in full        */
    min-height:  80px;
    border-top:  1px solid var(--mud-palette-divider, #e0e0e0);
    background:  var(--mud-palette-background-grey, #fafafa);
    display:     flex;
    align-items: center;
}

.kf-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.kf-footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kf-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.kf-footer-icon-inline {
    vertical-align: middle;
    margin-right: 4px;
    color: var(--mud-palette-text-secondary, #757575);
    font-size: 14px !important;
}

.kf-footer-muted {
    color: var(--mud-palette-text-secondary, #757575);
}

@media (max-width: 600px) {
    .kf-footer { min-height: auto; padding: 12px 16px; }
    .kf-footer-right { align-items: flex-start; text-align: left; }
}

@media print {
    .kf-footer {
        display: none !important;
    }
    .mud-main-content {
        padding-bottom: 0 !important;
    }
}

/* =============================================================================
   13. Status Badges
   ============================================================================= */

/* Base badge */
.kf-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--kf-radius-full);
    font-size: 0.72rem;
    font-weight: var(--kf-font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
}

/* Dot indicator inside badge */
.kf-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Semantic variants */
.kf-badge--success { background: var(--kf-success-bg); color: var(--kf-success-text); }
.kf-badge--success .kf-badge-dot { background: var(--kf-success); }

.kf-badge--warning { background: var(--kf-warning-bg); color: var(--kf-warning-text); }
.kf-badge--warning .kf-badge-dot { background: var(--kf-warning); }

.kf-badge--error   { background: var(--kf-error-bg);   color: var(--kf-error-text); }
.kf-badge--error .kf-badge-dot   { background: var(--kf-error); }

.kf-badge--info    { background: var(--kf-info-bg);    color: var(--kf-info-text); }
.kf-badge--info .kf-badge-dot    { background: var(--kf-info); }

.kf-badge--neutral { background: var(--kf-bg-grey-dark); color: var(--kf-text-secondary); }
.kf-badge--neutral .kf-badge-dot { background: var(--kf-text-muted); }

/* =============================================================================
   14. Page Header
   ============================================================================= */

.kf-page-header-block {
    margin-bottom: var(--kf-space-lg);
}

.kf-page-header-block .kf-page-subtitle {
    font-size: 0.8125rem;
    color: var(--kf-text-secondary);
    margin-top: 2px;
}

.kf-page-header-block .kf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--kf-text-muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.kf-page-header-block .kf-breadcrumb a {
    color: var(--kf-green-900);
    text-decoration: none;
}

.kf-page-header-block .kf-breadcrumb a:hover {
    text-decoration: underline;
}

.kf-page-header-block .kf-breadcrumb-sep {
    font-size: 0.65rem;
    opacity: 0.5;
}

/* =============================================================================
   15. Detail Row (label / value pairs)
   ============================================================================= */

.kf-detail-row {
    display: flex;
    gap: var(--kf-space-md);
    padding: var(--kf-space-sm) 0;
    border-bottom: 1px solid var(--kf-border);
    align-items: baseline;
}

.kf-detail-row:last-child {
    border-bottom: none;
}

.kf-detail-label {
    flex: 0 0 160px;
    font-size: 0.8125rem;
    color: var(--kf-text-secondary);
    font-weight: var(--kf-font-weight-medium);
}

.kf-detail-value {
    flex: 1;
    font-size: 0.875rem;
    color: var(--kf-text-primary);
}

@media (max-width: 599px) {
    .kf-detail-row       { flex-direction: column; gap: 2px; }
    .kf-detail-label     { flex: none; font-size: 0.75rem; }
}

/* =============================================================================
   16. Section Card
   ============================================================================= */

.kf-section-card {
    border-radius: var(--kf-radius-lg);
    box-shadow: var(--kf-shadow-card);
    background: var(--kf-surface);
    overflow: hidden;
}

.kf-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border-bottom: 1px solid var(--kf-border);
    gap: var(--kf-space-md);
    flex-wrap: wrap;
}

.kf-section-card-title {
    font-size: 0.9375rem;
    font-weight: var(--kf-font-weight-medium);
    color: var(--kf-text-primary);
    display: flex;
    align-items: center;
    gap: var(--kf-space-sm);
}

.kf-section-card-body {
    padding: var(--kf-space-lg);
}

/* No-padding variant — useful for tables */
.kf-section-card-body--flush {
    padding: 0;
}

/* =============================================================================
   17. Avatar
   ============================================================================= */

.kf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: var(--kf-font-weight-medium);
    flex-shrink: 0;
    overflow: hidden;
    user-select: none;
}

.kf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sizes */
.kf-avatar--xs  { width: 24px;  height: 24px;  font-size: 0.6rem;   }
.kf-avatar--sm  { width: 32px;  height: 32px;  font-size: 0.75rem;  }
.kf-avatar--md  { width: 40px;  height: 40px;  font-size: 0.875rem; }
.kf-avatar--lg  { width: 56px;  height: 56px;  font-size: 1.25rem;  }
.kf-avatar--xl  { width: 80px;  height: 80px;  font-size: 1.75rem;  }

/* Color presets */
.kf-avatar--green  { background: var(--kf-green-900); color: #fff; }
.kf-avatar--teal   { background: #0D9488; color: #fff; }
.kf-avatar--blue   { background: #2563EB; color: #fff; }
.kf-avatar--purple { background: #7C3AED; color: #fff; }
.kf-avatar--orange { background: #D97706; color: #fff; }
.kf-avatar--red    { background: #DC2626; color: #fff; }
.kf-avatar--grey   { background: var(--kf-bg-grey-dark); color: var(--kf-text-secondary); }

/* =============================================================================
   18. Dashboard Stat Card
   ============================================================================= */

/* kf-stat-card already defined in §3; these supplement it */
.kf-stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--kf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kf-stat-trend {
    font-size: 0.72rem;
    font-weight: var(--kf-font-weight-medium);
    display: flex;
    align-items: center;
    gap: 3px;
}

.kf-stat-trend--up   { color: var(--kf-success); }
.kf-stat-trend--down { color: var(--kf-error);   }

/* =============================================================================
   19. Error Pages (401 / 403 / 404 / 500)
   ============================================================================= */

.kf-error-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      70vh;
    padding:         var(--kf-space-xl) var(--kf-space-md);
    text-align:      center;
    gap:             var(--kf-space-md);
}

/* Large faint number sitting behind the icon */
.kf-error-code {
    font-size:     6rem;
    font-weight:   var(--kf-font-weight-bold);
    line-height:   1;
    opacity:       0.12;
    letter-spacing: -4px;
    margin-bottom: -2rem; /* pull icon up over the number */
}

.kf-error-icon {
    font-size: 4rem !important;
    width:     4rem !important;
    height:    4rem !important;
}

.kf-error-title {
    font-weight:  var(--kf-font-weight-bold);
    margin-top:   var(--kf-space-sm);
}

.kf-error-desc {
    max-width:   440px;
    line-height: 1.6;
}

@media (max-width: 599px) {
    .kf-error-code { font-size: 4rem; }
    .kf-error-icon { font-size: 3rem !important; width: 3rem !important; height: 3rem !important; }
}

/* =============================================================================
   20. File Upload
   ============================================================================= */

.kf-dropzone {
    border: 2px dashed var(--kf-border);
    border-radius: var(--kf-radius-lg);
    padding: var(--kf-space-2xl) var(--kf-space-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--kf-transition-fast),
                background  var(--kf-transition-fast);
}

.kf-dropzone:hover,
.kf-dropzone--active {
    border-color: var(--kf-green-900);
    background: var(--kf-green-50);
}

.kf-dropzone-icon {
    font-size: 40px !important;
    color: var(--kf-text-muted);
    margin-bottom: var(--kf-space-sm);
}

.kf-dropzone--active .kf-dropzone-icon {
    color: var(--kf-green-900);
}

/* File list */
.kf-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-xs);
}

.kf-file-item {
    display: flex;
    align-items: center;
    gap: var(--kf-space-sm);
    padding: var(--kf-space-sm) var(--kf-space-md);
    border-radius: var(--kf-radius-md);
    background: var(--kf-bg-grey);
}

.kf-file-item-icon  { font-size: 20px !important; flex-shrink: 0; }
.kf-file-item-name  { flex: 1; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-file-item-size  { font-size: 0.72rem; color: var(--kf-text-muted); flex-shrink: 0; }
.kf-file-item--done   { border-left: 3px solid var(--kf-success); }
.kf-file-item--error  { border-left: 3px solid var(--kf-error);   }

/* =============================================================================
   21. Sidebar (override MudBlazor for dark theme)
   ============================================================================= */

/* Sidebar header — logo + app name at the top of the dark drawer */
.kf-sidebar-header {
    display:     flex;
    align-items: center;
    gap:         var(--kf-space-sm);
    padding:     var(--kf-space-md) var(--kf-space-md) var(--kf-space-md);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
    flex-shrink: 0;
}

.kf-sidebar-header-logo {
    height:      36px;
    width:       auto;
    flex-shrink: 0;
    object-fit:  contain;
}

.kf-sidebar-header-name {
    font-size:   1rem;
    font-weight: var(--kf-font-weight-bold);
    color:       #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* White AppBar (sidebar-clipped layout) */
.kf-appbar.mud-appbar {
    background-color: #FFFFFF !important;
    color:            var(--kf-text-primary) !important;
    border-bottom:    1px solid var(--kf-border) !important;
    box-shadow:       none !important;
}

/* Dark green drawer — flex column so header is fixed, nav scrolls */
.mud-drawer--open .mud-drawer-content {
    background-color: var(--kf-green-dark) !important;
    display:          flex !important;
    flex-direction:   column !important;
}

/* Nav items text */
.mud-drawer--open .mud-nav-link {
    color: rgba(255,255,255,.78) !important;
    border-radius: var(--kf-radius-md);
    margin: 1px var(--kf-space-xs);
    transition: background var(--kf-transition-fast);
}

.mud-drawer--open .mud-nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.mud-drawer--open .mud-nav-link.active {
    background: var(--kf-green-900) !important;
    color: #fff !important;
}

/* Section labels inside dark sidebar */
.mud-drawer--open .kf-nav-section-label {
    color: rgba(255,255,255,.45);
}

/* Nav icons */
.mud-drawer--open .mud-nav-link .mud-icon-root {
    color: rgba(255,255,255,.65);
}

.mud-drawer--open .mud-nav-link.active .mud-icon-root,
.mud-drawer--open .mud-nav-link:hover .mud-icon-root {
    color: #fff;
}

/* Scrollbar on dark sidebar */
.kf-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
}

/* =============================================================================
   22. Utility Helpers
   ============================================================================= */

/* Truncate single line */
.kf-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flex helpers */
.kf-flex-center { display: flex; align-items: center; justify-content: center; }
.kf-flex-between { display: flex; align-items: center; justify-content: space-between; }
.kf-flex-gap-sm { display: flex; align-items: center; gap: var(--kf-space-sm); }
.kf-flex-gap-md { display: flex; align-items: center; gap: var(--kf-space-md); }

/* Relative wrapper (for LoadingOverlay Fill mode) */
.kf-relative { position: relative; }

/* Divider */
.kf-divider {
    border: none;
    border-top: 1px solid var(--kf-border);
    margin: var(--kf-space-md) 0;
}

/* Text helpers */
.kf-text-muted    { color: var(--kf-text-muted) !important; }
.kf-text-secondary{ color: var(--kf-text-secondary) !important; }
.kf-text-success  { color: var(--kf-success) !important; }
.kf-text-warning  { color: var(--kf-warning) !important; }
.kf-text-error    { color: var(--kf-error) !important; }
.kf-text-primary-brand { color: var(--kf-green-900) !important; }

/* Background helpers */
.kf-bg-surface     { background: var(--kf-surface) !important; }
.kf-bg-grey        { background: var(--kf-bg-grey) !important; }
.kf-bg-success     { background: var(--kf-success-bg) !important; }
.kf-bg-warning     { background: var(--kf-warning-bg) !important; }
.kf-bg-error       { background: var(--kf-error-bg) !important; }

/* =============================================================================
   23. Animations
   ============================================================================= */

@keyframes kf-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes kf-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kf-fade-in {
    animation: kf-fade-in var(--kf-transition-normal) both;
}

/* =============================================================================
   25. Blazor App Specifics
   Styles này dùng trong cả Web (Blazor Server) và Mobile (MAUI Blazor Hybrid).
   ============================================================================= */

/* Validation feedback — override Blazor default màu */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--kf-success, #16A34A);
}

.invalid {
    outline: 1px solid var(--kf-error, #DC2626);
}

.validation-message {
    color:     var(--kf-error, #DC2626);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding:    1rem 1rem 1rem 3.7rem;
    color:      white;
    border-radius: var(--kf-radius-md);
}

.blazor-error-boundary::after {
    content: "Đã xảy ra lỗi. Vui lòng tải lại trang.";
}

/* Blazor reconnect modal overlay */
#components-reconnect-modal {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    9999;
    background: rgba(0, 0, 0, .5);
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal.components-reconnect-show {
    display: flex;
}

/* Focus outline — tắt outline mặc định cho h1 (Blazor navigation) */
h1:focus { outline: none; }

/* =============================================================================
   24. Public Layout Shell (Login / Error pages)
   ============================================================================= */

/* Outer wrapper — dùng thay MudMainContent để tránh padding/overflow cắt xén */
.kf-public-shell {
    display:         flex;
    flex-direction:  column;
    min-height:      100vh;
}

/* Main area grows to fill → footer luôn ở cuối */
.kf-public-main {
    flex:            1 1 auto;
    display:         flex;
    flex-direction:  column;
}

/* ── Login page overrides ─────────────────────────────────────────────────── */
/* When login page is active:
   - Shell and main must not add extra height (login-page owns 100vh itself)
   - AppFooter is hidden (login page uses the image's built-in footer bar)    */
body:has(.login-page) .kf-public-shell { min-height: 0; overflow: hidden; }
body:has(.login-page) .kf-public-main  { flex: none; overflow: hidden; }
body:has(.login-page) .kf-footer       { display: none !important; }

/* =============================================================================
   25. Permission Matrix table (/portal/permissions)
   ============================================================================= */
.kf-matrix-wrap {
    width:        100%;
    overflow-x:   auto;
    border:       1px solid var(--kf-border);
    border-radius: var(--kf-radius-md);
    background:   var(--kf-surface);
}

.kf-matrix {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    font-size:       0.875rem;
}

.kf-matrix th,
.kf-matrix td {
    padding:        8px 12px;
    border-bottom:  1px solid var(--kf-border);
    vertical-align: middle;
}

/* Header row — sticky on vertical scroll */
.kf-matrix thead th {
    position:    sticky;
    top:         0;
    z-index:     2;
    background:  var(--kf-bg-grey);
    font-weight: 600;
    color:       var(--kf-text-primary);
    text-align:  center;
    white-space: nowrap;
}

/* First column = target name — sticky on horizontal scroll */
.kf-matrix-th-target {
    text-align:     left !important;
    min-width:      280px;
    position:       sticky !important;
    left:           0;
    z-index:        3 !important;
    background:     var(--kf-bg-grey) !important;
}

.kf-matrix-th-role {
    min-width: 110px;
}

.kf-matrix-target {
    text-align:  left;
    position:    sticky;
    left:        0;
    background:  var(--kf-surface);
    z-index:     1;
    white-space: nowrap;
}

.kf-matrix-label {
    font-weight: 500;
    color:       var(--kf-text-primary);
}

.kf-matrix-code {
    display:      inline-block;
    margin-left:  8px;
    padding:      1px 6px;
    border-radius: var(--kf-radius-sm);
    background:   var(--kf-bg-grey);
    color:        var(--kf-text-muted);
    font-size:    0.72rem;
    font-family:  ui-monospace, SFMono-Regular, Consolas, monospace;
}

.kf-matrix-cell {
    text-align: center;
    width:      110px;
}

.kf-matrix tbody tr:hover td {
    background: var(--kf-green-50);
}

.kf-matrix tbody tr:hover .kf-matrix-target {
    background: var(--kf-green-50);
}

/* Section divider row */
.kf-matrix-section-row td {
    background:    var(--kf-bg-grey);
    font-weight:   600;
    color:         var(--kf-text-secondary);
    text-transform: uppercase;
    font-size:     0.72rem;
    letter-spacing: 0.5px;
    padding:       6px 12px;
}

.kf-matrix-section-row:hover td {
    background: var(--kf-bg-grey);
}

/* =============================================================================
   School List — reusable grid helpers
   ============================================================================= */

/* ── School avatar (36×36 green circle, initial letter) ───────────────── */
.kf-school-avatar {
    flex-shrink: 0;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       #2e7d32;
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-weight:      700;
    font-size:        0.875rem;
    line-height:      1;
    user-select:      none;
}

/* ── Status badge pill ────────────────────────────────────────────────── */
.kf-status {
    display:          inline-flex;
    align-items:      center;
    padding:          3px 10px;
    border-radius:    12px;
    font-size:        0.75rem;
    font-weight:      600;
    line-height:      1.5;
    white-space:      nowrap;
}

.kf-status--active { background: #e8f5e9; color: #43a047; }
.kf-status--paused { background: #ffebee; color: #e53935; }
.kf-status--draft  { background: #fff3e0; color: #fb8c00; }

/* ── Action icon buttons (28×28 colored boxes) ────────────────────────── */
.kf-action-btn {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            28px !important;
    height:           28px !important;
    min-width:        28px !important;
    border-radius:    6px !important;
    padding:          0 !important;
}

.kf-action-btn--edit   { background: #e3f2fd !important; }
.kf-action-btn--delete { background: #ffebee !important; }

.kf-action-btn--edit   .mud-icon-root { color: #1e88e5 !important; font-size: 16px !important; }
.kf-action-btn--delete .mud-icon-root { color: #e53935 !important; font-size: 16px !important; }

/* ── Numeric column utility ───────────────────────────────────────────────
   Quy ước: các cột chứa GIÁ TRỊ SỐ (count, index, total, amount, …) phải
   align-right để chữ số xếp thẳng cột — đặt class này lên CẢ <MudTh> và <MudTd>.
   Inner <MudText>/<span> kế thừa text-align từ cell nên không cần thêm class. */
.kf-col-num,
th.kf-col-num,
td.kf-col-num {
    text-align: right !important;
}

/* Inner number text — dùng tabular-nums để các chữ số rộng đều nhau */
.kf-col-num .kf-num,
.kf-num {
    font-variant-numeric: tabular-nums;
}

/* ── Action column utility ────────────────────────────────────────────────
   Quy ước: cột "Thao tác" (icon buttons Edit/Delete/View) căn giữa trên
   cả header (<th>) và cell (<td>). Có 2 cách dùng:
     • Class generic: kf-col-actions   ← khuyến nghị cho page mới
     • Class per-page kế thừa: kf-{prefix}-col-actions (đã có sẵn trên các trang cũ)
   Block dưới đây bao phủ cả 2 — không cần override scoped CSS từng trang nữa.
   Header phải dùng selector th.x để thắng specificity của
   `::deep .kf-dt .mud-table-head th` (0,2,2) trong DataTable.razor.css. */
.kf-col-actions,
th.kf-col-actions,
td.kf-col-actions,
.kf-area-col-actions,    th.kf-area-col-actions,    td.kf-area-col-actions,
.kf-region-col-actions,  th.kf-region-col-actions,  td.kf-region-col-actions,
.kf-school-col-actions,  th.kf-school-col-actions,  td.kf-school-col-actions,
.kf-sd-col-actions,      th.kf-sd-col-actions,      td.kf-sd-col-actions,
.kf-tl-col-actions,      th.kf-tl-col-actions,      td.kf-tl-col-actions,
.kf-cl-col-actions,      th.kf-cl-col-actions,      td.kf-cl-col-actions,
.kf-st-col-actions,      th.kf-st-col-actions,      td.kf-st-col-actions,
.kf-rd-col-actions,      th.kf-rd-col-actions,      td.kf-rd-col-actions,
.kf-td-col-actions,      th.kf-td-col-actions,      td.kf-td-col-actions {
    text-align: center !important;
}

/* ── MudTabs + BadgeData fix ───────────────────────────────────────────────
   Mặc định MudBlazor render badge ở top-right của tab với absolute positioning.
   Khi label tab dài hoặc tab cuối cùng, badge bubble bị clip bởi padding/overflow
   của tab container. Fix: nới padding-right trên tab có badge để bubble có chỗ thở,
   và cho phép overflow visible trên content wrapper. */
.mud-tab .mud-badge-wrapper,
.mud-tab-panel .mud-badge-wrapper {
    overflow: visible !important;
}

/* Mỗi tab cần thêm padding bên phải để chứa badge dot (~22px diameter) */
.mud-tabs .mud-tab {
    padding-right: 28px !important;
}

/* Đẩy badge bubble vào trong 1 chút để không tràn ra ngoài tab boundary */
.mud-tab .mud-badge.mud-badge-overlap,
.mud-tab-panel .mud-badge.mud-badge-overlap {
    transform: translate(-4px, 4px);
}

/* MudTabs — underline style (default, đồng bộ Figma frame 12 → tabs-ul):
   active tab text green semibold, underline 2px green, inactive bg #f9fafb. */
.mud-tabs:not(.kf-tabs-pill) .mud-tab.mud-tab-active {
    color:       var(--kf-green-900) !important;
    font-weight: 600 !important;
}
.mud-tabs:not(.kf-tabs-pill) .mud-tab-slider {
    background: var(--kf-green-900) !important;
    height:     2px !important;
}
.mud-tabs:not(.kf-tabs-pill) .mud-tab:not(.mud-tab-active) {
    color: var(--kf-text-secondary) !important;
}

/* KfTabs Pill variant — bao MudTabs với class="kf-tabs-pill" để dùng pill style */
.mud-tabs.kf-tabs-pill {
    background:    var(--kf-bg-grey-dark);
    border-radius: 8px;
    padding:       4px;
}
.mud-tabs.kf-tabs-pill .mud-tabs-toolbar {
    background: transparent !important;
    min-height: 32px !important;
    height:     32px !important;
}
.mud-tabs.kf-tabs-pill .mud-tab {
    height:        32px !important;
    min-height:    32px !important;
    border-radius: 6px !important;
    padding:       0 12px !important;
    margin:        0 2px !important;
    color:         var(--kf-text-secondary) !important;
    font-weight:   400 !important;
}
.mud-tabs.kf-tabs-pill .mud-tab.mud-tab-active {
    background:  #ffffff !important;
    color:       var(--kf-green-900) !important;
    font-weight: 600 !important;
    box-shadow:  0 1px 1.5px rgba(0, 0, 0, 0.1);
}
.mud-tabs.kf-tabs-pill .mud-tab-slider {
    display: none !important;  /* pill không có underline */
}

/* ── MudSnackbar (toast) — match Figma frame 10 → Toast notifications.
   Mặc định MudBlazor render filled toast với 1 màu nền. Library chỉ định:
   bg WHITE + left colored stripe 4px + circle icon avatar (36) + title 14 bold + body 12. */

.mud-snackbar {
    background:    #ffffff !important;
    color:         var(--kf-text-primary) !important;
    border:        1px solid #eee !important;
    border-radius: 10px !important;
    box-shadow:    0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding:       16px 16px 16px 24px !important;
    min-height:    76px !important;
    position:      relative;
    overflow:      hidden;
}

/* Left colored stripe 4px — tô màu theo severity */
.mud-snackbar::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      4px;
    border-radius: 10px 0 0 10px;
}

.mud-snackbar.mud-alert-filled-success::before { background: #43a047; }
.mud-snackbar.mud-alert-filled-error::before   { background: #e53935; }
.mud-snackbar.mud-alert-filled-warning::before { background: #fb8c00; }
.mud-snackbar.mud-alert-filled-info::before    { background: #1e88e5; }

/* Icon area — recolor theo severity (MudBlazor render icon trong .mud-alert-icon) */
.mud-snackbar .mud-alert-icon { padding-right: 12px !important; }
.mud-snackbar.mud-alert-filled-success .mud-icon-root { color: #43a047 !important; }
.mud-snackbar.mud-alert-filled-error   .mud-icon-root { color: #e53935 !important; }
.mud-snackbar.mud-alert-filled-warning .mud-icon-root { color: #fb8c00 !important; }
.mud-snackbar.mud-alert-filled-info    .mud-icon-root { color: #1e88e5 !important; }

/* Message text */
.mud-snackbar .mud-alert-message {
    color:       var(--kf-text-primary) !important;
    font-size:   12px !important;
    line-height: 1.45 !important;
}

/* Close button — neutral grey, không màu severity */
.mud-snackbar .mud-alert-close .mud-icon-root {
    color:     var(--kf-text-muted) !important;
    font-size: 14px !important;
}

/* =============================================================================
   COMPONENT LIBRARY (Figma 10/11/12/13) — Global styles for Kf* wrappers
   ============================================================================= */

/* ── KfButton ─────────────────────────────────────────────────────────────
   Variants: primary | secondary | ghost | danger | disabled
   Sizes:    sm (32) | md (40) | lg (48)
   Special:  icon-only (44×44 square) */

.kf-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    border-radius:   8px !important;
    font-weight:     600 !important;
    text-transform:  none !important;
    letter-spacing:  0 !important;
    box-shadow:      none !important;
    cursor:          pointer;
    transition:      background-color var(--kf-transition-fast), box-shadow var(--kf-transition-fast);
}

.kf-btn--sm { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; }
.kf-btn--md { height: 40px !important; padding: 0 16px !important; font-size: 13px !important; }
.kf-btn--lg {
    height:        48px !important;
    padding:       0 24px !important;
    font-size:     14px !important;
    border-radius: 10px !important;
    box-shadow:    var(--kf-btn-shadow-primary) !important;
}

/* Variants */
.kf-btn--primary   { background-color: var(--kf-green-700) !important; color: #fff !important; }
.kf-btn--primary:hover:not(:disabled) { background-color: var(--kf-green-900) !important; }
.kf-btn--secondary { background-color: #fff !important; color: #5a6e5c !important; border: 1.5px solid #eee !important; }
.kf-btn--secondary:hover:not(:disabled) { background-color: #fafafa !important; border-color: #ddd !important; }
.kf-btn--ghost     { background-color: #e8f5e9 !important; color: var(--kf-green-700) !important; }
.kf-btn--ghost:hover:not(:disabled) { background-color: #c8e6c9 !important; }
.kf-btn--danger    { background-color: #e53935 !important; color: #fff !important; box-shadow: var(--kf-btn-shadow-danger) !important; }
.kf-btn--danger:hover:not(:disabled) { background-color: #c62828 !important; }
.kf-btn--disabled,
.kf-btn:disabled   { background-color: #f5f5f5 !important; color: #bdbdbd !important; box-shadow: none !important; cursor: not-allowed; }

/* Icon+text — height 44 (per Figma "With Icons" row) */
.kf-btn--icon-text { height: 44px !important; padding: 0 16px !important; font-size: 13px !important; }
/* Inline edit: light blue ghost (per Figma btn-icon-edit secondary style) */
.kf-btn--inline-edit   { background-color: #fff !important; color: #5a6e5c !important; border: 1.5px solid #eee !important; }
/* Inline delete: red outline (per Figma btn-icon-delete) */
.kf-btn--inline-delete { background-color: #ffebee !important; color: #e53935 !important; border: 1px solid #e53935 !important; }
/* Inline download/info: blue solid */
.kf-btn--inline-info   { background-color: #1e88e5 !important; color: #fff !important; }

/* Icon-only square 44×44 */
.kf-btn--icon-only {
    width:     44px !important;
    height:    44px !important;
    min-width: 44px !important;
    padding:   0 !important;
}
.kf-btn--icon-only.kf-btn--primary  { background-color: var(--kf-green-700) !important; }
.kf-btn--icon-only.kf-btn--edit     { background-color: #e3f2fd !important; }
.kf-btn--icon-only.kf-btn--edit .mud-icon-root { color: #1e88e5 !important; }
.kf-btn--icon-only.kf-btn--delete   { background-color: #ffebee !important; }
.kf-btn--icon-only.kf-btn--delete .mud-icon-root { color: #e53935 !important; }


/* ── KfInput / KfSelect — common field styling ─────────────────────────
   Force visible height = var(--kf-input-h) (44px theo Figma library).
   MudBlazor mặc định thêm:
     · margin-top/bottom (~16/8px) ở `.mud-input-margin-dense`
     · padding nội tại ở `.mud-input-root-outlined`
     · helper-text reserve ~20px dưới input
   Cần reset tất cả để total visible height = 44px (đúng spec). */

/* 1. Reset margin ở chính root element (cùng class với `.kf-field`) */
.kf-field.mud-input-margin-dense,
.kf-field.mud-input-margin-normal,
.kf-field.mud-input-margin-none,
.kf-field {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}

/* 2. Container wrappers — zero padding */
.kf-field .mud-input-control,
.kf-field .mud-input-control-input-container {
    margin:         0 !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

/* 3. The visible field box (with border) — force exactly var(--kf-input-h) */
.kf-field .mud-input,
.kf-field .mud-input-outlined,
.kf-field .mud-input-root-outlined {
    background-color: var(--kf-input-bg) !important;
    border-radius:    var(--kf-input-radius) !important;
    height:           var(--kf-input-h) !important;
    min-height:       var(--kf-input-h) !important;
    max-height:       var(--kf-input-h) !important;
    padding-top:      0 !important;
    padding-bottom:   0 !important;
    margin-top:       0 !important;
    margin-bottom:    0 !important;
    box-sizing:       border-box;
}

/* 4. Border element */
.kf-field .mud-input-outlined-border {
    border-color:  var(--kf-input-border) !important;
    border-radius: var(--kf-input-radius) !important;
}
.kf-field.mud-focused .mud-input-outlined-border,
.kf-field .mud-input-root-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--kf-input-border-fc) !important;
    border-width: 1.8px !important;
}
.kf-field .mud-input-root-outlined.mud-focused {
    background-color: var(--kf-input-bg-focus) !important;
}

/* 5. Inner input slot — căn giữa theo chiều cao field */
.kf-field input,
.kf-field .mud-input-slot,
.kf-field .mud-select-input,
.kf-field .mud-select-input .mud-input-slot {
    color:          var(--kf-input-text) !important;
    height:         calc(var(--kf-input-h) - 2px) !important;
    min-height:     calc(var(--kf-input-h) - 2px) !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    line-height:    calc(var(--kf-input-h) - 2px) !important;
}
.kf-field input::placeholder {
    color: var(--kf-input-placeholder) !important;
}

/* 6. Adornment icon (search, chevron) */
.kf-field .mud-input-adornment {
    height:         var(--kf-input-h) !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

/* 7. Bỏ helper-text reserve space dưới input */
.kf-field .mud-input-helper-text,
.kf-field .mud-input-helper {
    display: none !important;
}

/* Error state */
.kf-field--error .mud-input-outlined-border {
    border-color: #e53935 !important;
    border-width: 1.8px !important;
}
.kf-field--error .mud-input-root-outlined { background-color: #fffafa !important; }

/* Success state */
.kf-field--success .mud-input-outlined-border {
    border-color: #43a047 !important;
    border-width: 1.5px !important;
}

/* Disabled state */
.kf-field--disabled .mud-input-root-outlined {
    background-color: #f0f0f0 !important;
    color:            #9ca39c !important;
}
.kf-field--disabled .mud-input-outlined-border { border-color: #e0e0e0 !important; }


/* ── KfDotBadge — colored dot + label pill ─────────────────────────────── */

.kf-dot-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        4px 12px 4px 10px;
    background:     #fff;
    border:         1px solid #eee;
    border-radius:  13px;
    font-size:      11px;
    font-weight:    600;
    color:          var(--kf-input-text);
    white-space:    nowrap;
    line-height:    1;
}
.kf-dot-badge::before {
    content:       "";
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--kf-dot-offline);
}
.kf-dot-badge--online::before  { background: var(--kf-dot-online); }
.kf-dot-badge--offline::before { background: var(--kf-dot-offline); }
.kf-dot-badge--busy::before    { background: var(--kf-dot-busy); }
.kf-dot-badge--pending::before { background: var(--kf-dot-pending); }


/* ── KfCountBadge — số đếm / notification ──────────────────────────────── */

.kf-count-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       24px;
    height:          24px;
    padding:         0 6px;
    border-radius:   12px;
    background:      var(--kf-green-700);
    color:           #fff;
    font-size:       12px;
    font-weight:     700;
    line-height:     1;
}
.kf-count-badge--danger { background: #e53935; }
.kf-count-badge--info   { background: #1e88e5; }
.kf-count-badge--neutral { background: #f3f4f6; color: var(--kf-text-muted); }


/* ── KfFilterChip — pill cao 32 (selected = green outline + check) ────── */

.kf-filter-chip {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            6px !important;
    height:         32px !important;
    padding:        0 14px !important;
    border-radius:  16px !important;
    font-size:      12px !important;
    font-weight:    600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow:     none !important;
    cursor:         pointer;
    background:     #fff !important;
    color:          #5a6e5c !important;
    border:         1px solid #eee !important;
    transition:     background-color var(--kf-transition-fast), border-color var(--kf-transition-fast);
}
.kf-filter-chip:hover:not(.kf-filter-chip--on) {
    background:    #fafafa !important;
    border-color:  #ddd !important;
}
.kf-filter-chip--on {
    background:    #e8f5e9 !important;
    color:         var(--kf-green-700) !important;
    border:        1px solid var(--kf-green-700) !important;
}
.kf-filter-chip--on .mud-icon-root { color: var(--kf-green-700) !important; font-size: 14px !important; }


/* ── Extended status badges (6 variants — đầy đủ theo library) ─────────── */

.kf-status--pending   { background: var(--kf-badge-pending-bg);   color: var(--kf-badge-pending-fg); }
.kf-status--new       { background: var(--kf-badge-new-bg);       color: var(--kf-badge-new-fg); }
.kf-status--important { background: var(--kf-badge-important-bg); color: var(--kf-badge-important-fg); }