/* ==========================================================================
   BẢNG MÀU — Cổng liên thông Đoàn Luật sư tỉnh Đồng Nai

   Màu chủ đạo lấy theo nhận diện website chính thức của Đoàn (đỏ cờ).
   Các màu trạng thái (success / warning / danger / info) giữ nguyên hệ màu
   quen thuộc để người dùng đọc trạng thái không bị nhầm với màu thương hiệu:
   danger dùng tông hồng-đỏ (rose), khác hẳn đỏ gạch của thương hiệu.
   ========================================================================== */

:root {
    /* Đỏ Đoàn Luật sư — primary-600 (#B01C24) là màu thanh điều hướng của website */
    --primary-50: 254, 242, 242; --primary-100: 253, 226, 227; --primary-200: 250, 202, 204;
    --primary-300: 245, 160, 164; --primary-400: 233, 106, 112; --primary-500: 208, 57, 63;
    --primary-600: 176, 28, 36;  --primary-700: 148, 22, 29;  --primary-800: 124, 20, 26;
    --primary-900: 105, 19, 24;  --primary-950: 58, 7, 10;

    --gray-50: 249, 250, 251; --gray-100: 243, 244, 246; --gray-200: 229, 231, 235; --gray-300: 209, 213, 219; --gray-400: 156, 163, 175; --gray-500: 107, 114, 128; --gray-600: 75, 85, 99; --gray-700: 55, 65, 81; --gray-800: 31, 41, 55; --gray-900: 17, 24, 39; --gray-950: 3, 7, 18;
    --danger-50: 255, 241, 242; --danger-100: 255, 228, 230; --danger-200: 254, 205, 211; --danger-300: 253, 164, 175; --danger-400: 251, 113, 133; --danger-500: 244, 63, 94; --danger-600: 225, 29, 72; --danger-700: 190, 18, 60; --danger-800: 159, 18, 57; --danger-900: 136, 19, 55; --danger-950: 76, 5, 25;
    --info-50: 239, 246, 255; --info-100: 219, 234, 254; --info-200: 191, 219, 254; --info-300: 147, 197, 253; --info-400: 96, 165, 250; --info-500: 59, 130, 246; --info-600: 37, 99, 235; --info-700: 29, 78, 216; --info-800: 30, 64, 175; --info-900: 30, 58, 138; --info-950: 23, 37, 84;
    --success-50: 236, 253, 245; --success-100: 209, 250, 229; --success-200: 167, 243, 208; --success-300: 110, 231, 183; --success-400: 52, 211, 153; --success-500: 16, 185, 129; --success-600: 5, 150, 105; --success-700: 4, 120, 87; --success-800: 6, 95, 70; --success-900: 6, 78, 59; --success-950: 2, 44, 34;
    --warning-50: 255, 247, 237; --warning-100: 255, 237, 213; --warning-200: 254, 215, 170; --warning-300: 253, 186, 116; --warning-400: 251, 146, 60; --warning-500: 249, 115, 22; --warning-600: 234, 88, 12; --warning-700: 194, 65, 12; --warning-800: 154, 52, 18; --warning-900: 124, 45, 18; --warning-950: 67, 20, 7;
    --secondary-50: 238, 242, 255; --secondary-100: 224, 231, 255; --secondary-200: 199, 210, 254; --secondary-300: 165, 180, 252; --secondary-400: 129, 140, 248; --secondary-500: 99, 102, 241; --secondary-600: 79, 70, 229; --secondary-700: 67, 56, 202; --secondary-800: 55, 48, 163; --secondary-900: 49, 46, 129; --secondary-950: 30, 27, 75;

    /* Cổng dành cho cán bộ cơ quan nhà nước — chữ sans, thân chữ to, dễ đọc */
    --font-family: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --sidebar-width: 16rem;

    /* Riêng cho phần đầu trang */
    --dau-trang-dam: #7C141A;
    --dau-trang-nhat: #B01C24;
    --dau-trang-vien: #8E161C;
}

html { font-family: var(--font-family); }
[x-cloak] { display: none !important; }
/* ==========================================================================
   THÀNH PHẦN RIÊNG CỦA CỔNG LIÊN THÔNG

   Những mảnh giao diện mà bộ CSS Filament không có sẵn: dải đầu trang theo
   nhận diện Đoàn, khu vực tải tệp, khung view trước tệp, thanh phân trang,
   đầu cột sắp xếp được. Mỗi khối đều là một thành phần độc lập để đội phát
   triển chuyển thẳng sang Blade/Livewire.
   ========================================================================== */

/* ── Dải nhãn bản mô phỏng ─────────────────────────────────────────────── */
.ap-mock-ribbon {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem 1rem;
    background: #1f2937; color: #f9fafb;
    font-size: .75rem; line-height: 1.1rem;
}
.ap-mock-ribbon b { font-weight: 700; letter-spacing: .01em; }
.ap-mock-ribbon span { opacity: .75; }

/* ── Đầu trang ─────────────────────────────────────────────────────────── */
.ap-header {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, var(--dau-trang-nhat) 0%, var(--dau-trang-dam) 100%);
    border-bottom: 3px solid var(--dau-trang-vien);
}
.ap-mock-ribbon ~ .ap-header { top: 2.05rem; }

.ap-header-inner {
    max-width: 84rem; margin: 0 auto;
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1.25rem;
}
.ap-header-emblem {
    display: flex; align-items: center; justify-content: center;
    height: 3rem; width: 3rem; flex: none;
    border-radius: .625rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}
.ap-header-title { min-width: 0; }
.ap-header-title .d1 {
    font-size: 1.0625rem; font-weight: 700; color: #fff;
    line-height: 1.35rem; letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.ap-header-title .d2 {
    margin-top: .1rem;
    font-size: .8125rem; color: rgba(255, 255, 255, .92); line-height: 1.1rem;
}
.ap-header-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.ap-header-user { text-align: right; }
.ap-header-user .n1 { font-size: .875rem; font-weight: 600; color: #fff; line-height: 1.15rem; }
.ap-header-user .n2 { font-size: .75rem; color: rgba(255, 255, 255, .85); line-height: 1rem; }
.ap-header-avatar {
    display: flex; align-items: center; justify-content: center;
    height: 2.25rem; width: 2.25rem; flex: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: .75rem; font-weight: 700;
}
.ap-header-logout {
    display: inline-flex; align-items: center; gap: .375rem;
    border-radius: .5rem; padding: .4rem .7rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.ap-header-logout:hover { background: rgba(255, 255, 255, .2); }

/* Thanh điều hướng phụ */
.ap-nav {
    background: #fff;
    border-bottom: 1px solid rgb(var(--gray-200));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ap-nav-inner {
    max-width: 84rem; margin: 0 auto;
    display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
    padding: 0 1.25rem;
}
.ap-nav a {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem .75rem; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: .875rem; font-weight: 600; color: rgb(var(--gray-600));
    text-decoration: none;
}
.ap-nav a:hover { color: rgb(var(--primary-700)); }
.ap-nav a.is-on { color: rgb(var(--primary-700)); border-bottom-color: rgb(var(--primary-600)); }

/* ── Thân trang ────────────────────────────────────────────────────────── */
.ap-main { max-width: 84rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

.ap-breadcrumbs {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .8125rem; color: rgb(var(--gray-500)); margin-bottom: .75rem;
}
.ap-breadcrumbs a { color: rgb(var(--gray-500)); text-decoration: none; }
.ap-breadcrumbs a:hover { color: rgb(var(--primary-700)); text-decoration: underline; }
.ap-breadcrumbs .current { color: rgb(var(--gray-800)); font-weight: 600; }

.ap-back-link {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .875rem; font-weight: 600; color: rgb(var(--primary-700));
    text-decoration: none; margin-bottom: .5rem;
}
.ap-back-link:hover { text-decoration: underline; }

/* ── Bộ lọc ────────────────────────────────────────────────────────────── */
.ap-filters { display: grid; gap: .875rem; padding: 1.125rem 1.25rem; }
@media (min-width: 640px)  { .ap-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ap-filters { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; } }

.ap-input-label {
    display: block; margin-bottom: .3rem;
    font-size: .75rem; font-weight: 600; color: rgb(var(--gray-700));
}
.ap-input {
    width: 100%; border: 0; border-radius: .5rem;
    padding: .55rem .7rem; font-size: .875rem; color: rgb(var(--gray-950));
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px;
}
.ap-input:focus { outline: 2px solid rgb(var(--primary-600)); outline-offset: -2px; }
.ap-input[readonly] { background: rgb(var(--gray-50)); color: rgb(var(--gray-600)); }
textarea.ap-input { resize: vertical; min-height: 4.5rem; }

.ap-input-search { position: relative; }
.ap-input-search svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: rgb(var(--gray-400)); }
.ap-input-search .ap-input { padding-left: 2rem; }

.ap-filter-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .6rem 1.25rem;
    background: rgb(var(--gray-50));
    border-top: 1px solid rgb(var(--gray-200));
    font-size: .8125rem; color: rgb(var(--gray-600));
}
.ap-filter-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 9999px; padding: .15rem .6rem;
    background: rgb(var(--primary-50)); color: rgb(var(--primary-800));
    border: 1px solid rgba(var(--primary-600), .18);
    font-size: .75rem; font-weight: 600;
}
.ap-filter-chip button { color: rgb(var(--primary-700)); font-weight: 700; line-height: 1; cursor: pointer; }

/* ── Bảng ──────────────────────────────────────────────────────────────── */
.ap-table-scroll { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ap-table thead th {
    background: rgb(var(--gray-50));
    border-bottom: 1px solid rgb(var(--gray-200));
    padding: .7rem 1rem; text-align: left; white-space: nowrap;
    font-size: .75rem; font-weight: 700; color: rgb(var(--gray-700));
    text-transform: uppercase; letter-spacing: .03em;
}
.ap-table tbody td {
    padding: .8rem 1rem; vertical-align: top;
    border-bottom: 1px solid rgb(var(--gray-200));
    color: rgb(var(--gray-800));
}
.ap-table tbody tr:hover { background: rgb(var(--gray-50)); }
.ap-table tbody tr.is-new { background: rgba(var(--primary-50), 1); }
.ap-table tbody tr.is-new:hover { background: rgb(var(--primary-100)); }

/* Đầu cột sắp xếp được */
.ap-sort {
    display: inline-flex; align-items: center; gap: .3rem;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    cursor: pointer; user-select: none;
}
.ap-sort:hover { color: rgb(var(--primary-700)); }
.ap-sort .mui { display: inline-flex; flex-direction: column; line-height: 0; opacity: .35; }
.ap-sort .mui i { font-style: normal; font-size: .5rem; }
.ap-sort.is-on { color: rgb(var(--primary-700)); }
.ap-sort.is-on .mui { opacity: 1; }

.ap-empty { padding: 3rem 1rem; text-align: center; color: rgb(var(--gray-500)); }
.ap-empty .heading { font-size: .9375rem; font-weight: 600; color: rgb(var(--gray-900)); }

/* ── Phân trang ────────────────────────────────────────────────────────── */
.ap-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 1.25rem;
    border-top: 1px solid rgb(var(--gray-200));
    background: #fff;
    font-size: .8125rem; color: rgb(var(--gray-600));
}
.ap-pagination-size { display: flex; align-items: center; gap: .4rem; }
.ap-pagination-size select {
    border: 0; border-radius: .4rem; padding: .3rem 1.6rem .3rem .5rem;
    font-size: .8125rem; color: rgb(var(--gray-900)); background-color: #fff;
    outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px;
}
.ap-pagination-buttons { display: flex; align-items: center; gap: .25rem; }
.ap-pagination-buttons button {
    min-width: 2rem; height: 2rem; padding: 0 .5rem;
    border-radius: .4rem; background: #fff;
    outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px;
    font-size: .8125rem; font-weight: 600; color: rgb(var(--gray-700)); cursor: pointer;
}
.ap-pagination-buttons button:hover:not(:disabled) { background: rgb(var(--gray-50)); }
.ap-pagination-buttons button.is-on {
    background: rgb(var(--primary-600)); color: #fff;
    outline-color: rgb(var(--primary-600));
}
.ap-pagination-buttons button:disabled { opacity: .4; cursor: not-allowed; }
.ap-pagination-buttons .cach { padding: 0 .15rem; color: rgb(var(--gray-400)); }

/* ── Khu vực tải tệp ───────────────────────────────────────────────────── */
.ap-upload {
    position: relative;
    border: 2px dashed rgb(var(--gray-300)); border-radius: .75rem;
    background: rgb(var(--gray-50));
    padding: 1.5rem 1.25rem; text-align: center;
    transition: border-color .15s, background-color .15s;
}
.ap-upload.is-keo { border-color: rgb(var(--primary-600)); background: rgb(var(--primary-50)); }
.ap-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-upload-icon {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.75rem; width: 2.75rem; margin-bottom: .6rem;
    border-radius: 9999px;
    background: rgb(var(--primary-50)); color: rgb(var(--primary-700));
    border: 1px solid rgba(var(--primary-600), .16);
}
.ap-upload-primary { font-size: .875rem; font-weight: 600; color: rgb(var(--gray-900)); }
.ap-upload-primary u { color: rgb(var(--primary-700)); text-decoration: none; border-bottom: 1px solid currentColor; }
.ap-upload-hint { margin-top: .25rem; font-size: .75rem; color: rgb(var(--gray-500)); }

.ap-file-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.ap-file {
    display: flex; align-items: center; gap: .75rem;
    border-radius: .625rem; padding: .6rem .75rem;
    background: #fff; outline: 1px solid rgb(var(--gray-200)); outline-offset: -1px;
}
.ap-file-icon {
    display: flex; align-items: center; justify-content: center;
    height: 2.25rem; width: 2.25rem; flex: none; border-radius: .5rem;
    font-size: .625rem; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.ap-file-icon.pdf { background: #C0392B; }
.ap-file-icon.doc { background: #2B579A; }
.ap-file-icon.xls { background: #1D6F42; }
.ap-file-icon.img { background: #7C3AED; }
.ap-file-icon.khac { background: rgb(var(--gray-500)); }
.ap-file-name { min-width: 0; flex: 1; }
.ap-file-name .t1 {
    font-size: .8125rem; font-weight: 600; color: rgb(var(--gray-900));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-file-name .t2 { font-size: .75rem; color: rgb(var(--gray-500)); }
.ap-file-actions { display: flex; align-items: center; gap: .25rem; flex: none; }
.ap-file-actions button {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: .4rem; padding: .3rem .55rem;
    font-size: .75rem; font-weight: 600; color: rgb(var(--gray-700));
    background: #fff; outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px;
    cursor: pointer;
}
.ap-file-actions button:hover { background: rgb(var(--gray-50)); }
.ap-file-actions button.delete { color: rgb(var(--danger-700)); outline-color: rgb(var(--danger-200)); }
.ap-file-actions button.delete:hover { background: rgb(var(--danger-50)); }

/* Nút view trước gọn dùng trong bảng danh sách */
.ap-file-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: .375rem; padding: .2rem .45rem;
    background: rgb(var(--gray-100)); color: rgb(var(--gray-700));
    font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ap-file-chip:hover { background: rgb(var(--primary-50)); color: rgb(var(--primary-700)); }

/* ── Hộp thoại ─────────────────────────────────────────────────────────── */
.ap-backdrop {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(2px);
}
.ap-modal {
    width: 100%; max-width: 40rem; max-height: 92vh;
    display: flex; flex-direction: column;
    border-radius: .875rem; background: #fff; overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}
.ap-modal-header {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1.25rem; border-bottom: 1px solid rgb(var(--gray-200));
}
.ap-modal-header .ten { min-width: 0; flex: 1; }
.ap-modal-header .ten .h1 {
    font-size: .9375rem; font-weight: 700; color: rgb(var(--gray-950));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-modal-header .ten .h2 { font-size: .75rem; color: rgb(var(--gray-500)); }
.ap-modal-close {
    flex: none; height: 2rem; width: 2rem; border-radius: .4rem;
    color: rgb(var(--gray-500)); font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.ap-modal-close:hover { background: rgb(var(--gray-100)); color: rgb(var(--gray-800)); }
.ap-modal-body { padding: 1.25rem; overflow: auto; background: rgb(var(--gray-100)); }
.ap-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
    padding: .8rem 1.25rem; border-top: 1px solid rgb(var(--gray-200)); background: #fff;
}

/* Trang giấy giả lập trong khung view trước */
.ap-paper {
    margin: 0 auto; max-width: 34rem; background: #fff;
    padding: 2.25rem 2.5rem; border-radius: .25rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    font-size: .8125rem; color: rgb(var(--gray-800)); line-height: 1.55;
}
.ap-paper .quochieu { text-align: center; font-weight: 700; font-size: .8125rem; }
.ap-paper .gach { width: 8rem; height: 1px; background: rgb(var(--gray-800)); margin: .3rem auto .9rem; }
.ap-paper .tieude { text-align: center; font-weight: 700; font-size: .9375rem; margin: 1rem 0 .25rem; text-transform: uppercase; }
.ap-paper .mo { color: rgb(var(--gray-400)); }
.ap-preview-image { display: block; margin: 0 auto; max-width: 100%; border-radius: .375rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.ap-preview-other { padding: 2.5rem 1rem; text-align: center; color: rgb(var(--gray-500)); }

/* ── Mảnh nhỏ ──────────────────────────────────────────────────────────── */
.ap-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: .375rem; padding: .2rem .5rem;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.ap-dot { height: .4rem; width: .4rem; border-radius: 9999px; background: currentColor; flex: none; }

.ap-card { background: #fff; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); outline: 1px solid rgb(var(--gray-200)); outline-offset: -1px; }
.ap-card-header { padding: .9rem 1.25rem; border-bottom: 1px solid rgb(var(--gray-200)); }
.ap-card-header h3 { font-size: .875rem; font-weight: 700; color: rgb(var(--gray-950)); }
.ap-card-header p { margin-top: .15rem; font-size: .75rem; color: rgb(var(--gray-500)); }

.ap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    border-radius: .5rem; padding: .55rem .9rem;
    font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    border: 0; outline: 1px solid transparent; outline-offset: -1px;
}
.ap-btn--primary { background: rgb(var(--primary-600)); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ap-btn--primary:hover { background: rgb(var(--primary-700)); }
.ap-btn--lg { padding: .75rem 1.25rem; font-size: .9375rem; border-radius: .625rem; }
.ap-btn--secondary { background: #fff; color: rgb(var(--gray-700)); outline-color: rgb(var(--gray-300)); }
.ap-btn--secondary:hover { background: rgb(var(--gray-50)); }
.ap-btn:disabled { opacity: .5; cursor: not-allowed; }

.ap-stat-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ap-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-stat { background: #fff; border-radius: .75rem; padding: 1.1rem 1.25rem; outline: 1px solid rgb(var(--gray-200)); outline-offset: -1px; }
.ap-stat .n { font-size: .75rem; font-weight: 600; color: rgb(var(--gray-500)); }
.ap-stat .v { margin-top: .35rem; font-size: 1.75rem; font-weight: 700; color: rgb(var(--gray-950)); line-height: 1.1; }
.ap-stat .p { margin-top: .2rem; font-size: .75rem; color: rgb(var(--gray-500)); }

/* Dòng thời gian */
.ap-timeline-item { display: flex; gap: .9rem; }
.ap-timeline-rail { display: flex; flex-direction: column; align-items: center; }
.ap-timeline-dot {
    display: flex; align-items: center; justify-content: center;
    height: 1.75rem; width: 1.75rem; flex: none; border-radius: 9999px;
}
.ap-timeline-dot.xong { background: rgb(var(--success-50)); color: rgb(var(--success-700)); outline: 1px solid rgba(var(--success-600), .25); outline-offset: -1px; }
.ap-timeline-dot.cho  { background: rgb(var(--gray-50)); color: rgb(var(--gray-300)); outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px; }
.ap-timeline-line { width: 1px; flex: 1; margin: .25rem 0; background: rgb(var(--gray-200)); }
.ap-timeline-line.xong { background: rgb(var(--success-200)); }

/* Bảng thông tin hai cột */
.ap-info-grid { display: grid; gap: .9rem 2rem; }
@media (min-width: 640px) { .ap-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-info-grid .k { font-size: .75rem; color: rgb(var(--gray-500)); }
.ap-info-grid .v { margin-top: .1rem; font-size: .875rem; color: rgb(var(--gray-900)); }

.ap-footer {
    border-top: 1px solid rgb(var(--gray-200)); background: #fff;
    padding: 1.25rem; text-align: center;
    font-size: .75rem; color: rgb(var(--gray-500));
}

/* ==========================================================================
   NỀN CƠ BẢN

   Module không dùng CSS của Filament nên phải tự chuẩn hóa. Phần này thay cho
   lớp preflight của Tailwind — giữ tối thiểu, đủ để giao diện hiển thị giống
   nhau trên các trình duyệt.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: rgb(var(--gray-100));
    color: rgb(var(--gray-800));
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: rgb(var(--primary-700)); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
svg { flex: none; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; }

/* Tiện ích nhỏ dùng lại nhiều nơi — cố ý ít, không dựng cả bộ utility */
.ap-row { display: flex; align-items: center; gap: .5rem; }
.ap-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ap-col { display: flex; flex-direction: column; }
.ap-text-sm { font-size: .8125rem; color: rgb(var(--gray-600)); }
.ap-text-muted { color: rgb(var(--gray-500)); }
.ap-text-strong { font-weight: 600; color: rgb(var(--gray-950)); }
.ap-page-title { font-size: 1.5rem; font-weight: 700; color: rgb(var(--gray-950)); letter-spacing: -.01em; }
.ap-page-subtitle { margin-top: .2rem; font-size: .875rem; color: rgb(var(--gray-600)); }

.ap-two-col { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ap-two-col { grid-template-columns: minmax(0, 1fr) 20rem; } }

.ap-form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ap-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-span-full { grid-column: 1 / -1; }

/* Thông báo trên trang */
.ap-alert {
    border-radius: .5rem; padding: .7rem .9rem; font-size: .8125rem; line-height: 1.55;
}
.ap-alert--success { background: rgb(var(--success-50)); color: rgb(var(--success-700)); box-shadow: inset 0 0 0 1px rgba(var(--success-600), .18); }
.ap-alert--error { background: rgb(var(--danger-50)); color: rgb(var(--danger-700)); box-shadow: inset 0 0 0 1px rgba(var(--danger-600), .18); }
.ap-alert--warning { background: rgb(var(--warning-50)); color: rgb(var(--gray-800)); box-shadow: inset 0 0 0 1px rgba(var(--warning-600), .2); }
.ap-alert--info { background: rgb(var(--info-50)); color: rgb(var(--gray-700)); box-shadow: inset 0 0 0 1px rgba(var(--info-600), .15); }

.ap-field-error { margin-top: .25rem; font-size: .75rem; color: rgb(var(--danger-700)); }
.ap-input--error { outline-color: rgb(var(--danger-500)) !important; }

/* Trạng thái đang xử lý của Livewire */
/* display:inline-block là BẮT BUỘC, không phải trang trí.
   Livewire 3 khi hiện một khối wire:loading sẽ ghi đè display của nó thành
   inline-block (xem livewire.js — toggleBooleanStateDirective), nên khối bọc
   không còn là flex. Span bên trong quay lại display:inline mặc định, mà phần
   tử inline thì BỎ QUA width/height — vòng quay co về 0 và biến mất. */
.ap-spinner {
    display: inline-block; vertical-align: middle;
    height: 1.1rem; width: 1.1rem; border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: ap-spin .7s linear infinite;
}
.ap-spinner--dark { border-color: rgb(var(--gray-200)); border-top-color: rgb(var(--primary-600)); }
@keyframes ap-spin { to { transform: rotate(360deg); } }

[wire\:loading] { display: none; }

/* Vùng chỉ hiện khi in */
@media print {
    .ap-mock-ribbon, .ap-header, .ap-nav, .ap-footer, .ap-back-link, .ap-breadcrumbs, .ap-no-print { display: none !important; }
    body { background: #fff; }
    .ap-card { box-shadow: none; outline: 1px solid #ddd; }
}

/* Thẻ <a> tạo dáng như nút trong danh sách tệp — tránh lồng <button> trong <a> */
.ap-file-action-link {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: .4rem; padding: .3rem .55rem;
    font-size: .75rem; font-weight: 600; color: rgb(var(--gray-700));
    background: #fff; text-decoration: none;
    outline: 1px solid rgb(var(--gray-300)); outline-offset: -1px;
}
.ap-file-action-link:hover { background: rgb(var(--gray-50)); text-decoration: none; }

/* ── Danh sách bị can trên biểu mẫu gửi yêu cầu ─────────────────────────
   Mỗi bị can là một khối có viền riêng để cán bộ nhìn ra ngay đang nhập
   cho người thứ mấy — quan trọng với vụ án đông người. */
.ap-accused { border: 1px solid rgb(var(--gray-200)); border-radius: .75rem; padding: 1rem 1.1rem; margin-bottom: .9rem; background: rgb(var(--gray-50)); }
.ap-accused-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ap-accused-no { font-size: .95rem; font-weight: 700; color: rgb(var(--primary-700)); }
.ap-accused-drop { border: 0; background: none; padding: .25rem .35rem; font-size: .9rem; font-weight: 600; color: rgb(var(--danger-600)); cursor: pointer; text-decoration: underline; }
.ap-accused-drop:hover { color: rgb(var(--danger-700)); }