/* =========================================================================
   AKC UI seragam (Perkara 4, Improvement AKC 2027)
   Dimuatkan selepas light.css oleh layouts/jdn/app-clean & app.
   ========================================================================= */
:root {
    --akc-navy: #15284B;
    --akc-navy-2: #1F3A6B;
    --akc-navy-3: #2A4C86;
    --akc-primary: #1B3A73;
    --akc-primary-hover: #15305F;
    --akc-bg: #F4F6FA;
    --akc-surface: #FFFFFF;
    --akc-border: #E3E8F0;
    --akc-border-strong: #D3DAE5;
    --akc-text: #1F2937;
    --akc-text-2: #5B6B84;
    --akc-text-3: #8A94A8;
    --akc-radius: 10px;
}

body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: var(--akc-bg); color: var(--akc-text); }
.main, .content { background: var(--akc-bg); }

/* ---------- Sidebar ---------- */
.sidebar, .sidebar-content { background: var(--akc-navy) !important; }
.sidebar-brand { color: #fff !important; font-size: 1.05rem; font-weight: 600; line-height: 1.35; padding: 1.4rem 1.5rem 1.2rem; text-align: left; }
.sidebar-header { color: rgba(255,255,255,.55) !important; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1.4rem 1.5rem .45rem; }
.sidebar-nav { padding: 0 .65rem 1.5rem; }
.sidebar-link, a.sidebar-link {
    color: rgba(255,255,255,.82) !important; background: transparent !important;
    border-radius: 8px; padding: .62rem .9rem !important; margin: 1px 0; font-size: .92rem;
    display: flex; align-items: center; gap: .75rem; border-left: 0 !important;
}
.sidebar-link i, .sidebar-link svg { color: rgba(255,255,255,.75) !important; width: 18px; height: 18px; margin: 0 !important; }
.sidebar-link:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.sidebar-item.active > .sidebar-link, .sidebar-item.active .sidebar-link:hover {
    background: var(--akc-navy-3) !important; color: #fff !important; font-weight: 500;
}
.sidebar-item.active > .sidebar-link i, .sidebar-item.active > .sidebar-link svg { color: #fff !important; }

/* ---------- Bar atas ---------- */
.navbar-bg { background: var(--akc-surface) !important; border-bottom: 1px solid var(--akc-border); box-shadow: none !important; min-height: 64px; }
.akc-tajuk-modul { font-size: 1.15rem; font-weight: 600; color: var(--akc-navy); margin: 0 0 0 .5rem; }
.akc-avatar { width: 36px; height: 36px; border-radius: 50%; background: #E7EDF7; color: var(--akc-navy-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }
.akc-pengguna { display: flex; align-items: center; gap: .6rem; color: var(--akc-text) !important; text-decoration: none; }
.akc-pengguna small { display: block; color: var(--akc-text-3); font-size: .74rem; line-height: 1.1; }
.akc-pengguna .akc-nama { font-weight: 500; font-size: .9rem; line-height: 1.2; }

/* ---------- Pengepala halaman ---------- */
.akc-page { padding: 1.75rem 2rem 2rem; }
.akc-breadcrumb { font-size: .85rem; color: var(--akc-text-3); margin-bottom: .35rem; }
.akc-breadcrumb a { color: var(--akc-text-2); text-decoration: none; }
.akc-breadcrumb a:hover { color: var(--akc-primary); }
.akc-breadcrumb .sep { margin: 0 .4rem; }
.akc-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.akc-page-title { font-size: 1.85rem; font-weight: 700; color: var(--akc-navy); margin: 0; letter-spacing: -.01em; }
.akc-page-sub { color: var(--akc-text-2); margin: .25rem 0 0; font-size: .98rem; }
.akc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; margin-left: auto; }
.akc-actions-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.footer { background: transparent; border-top: 1px solid var(--akc-border); font-size: .82rem; padding: 1rem 2rem; }
.akc-actions .akc-hint { font-size: .78rem; color: var(--akc-text-3); }

/* ---------- Butang ---------- */
.btn-akc { background: var(--akc-primary); border: 1px solid var(--akc-primary); color: #fff; border-radius: 8px; padding: .6rem 1.1rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.btn-akc:hover, .btn-akc:focus { background: var(--akc-primary-hover); border-color: var(--akc-primary-hover); color: #fff; }
.btn-akc-outline { background: #fff; border: 1px solid var(--akc-border-strong); color: var(--akc-text); border-radius: 8px; padding: .6rem 1.1rem; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.btn-akc-outline:hover { background: #F7F9FC; color: var(--akc-text); }
.btn-akc-outline.disabled, .btn-akc-outline[aria-disabled=true] { opacity: .55; pointer-events: none; }

/* ---------- Kad ---------- */
.akc-card { background: var(--akc-surface); border: 1px solid var(--akc-border); border-radius: 14px; }

/* ---------- Jalur statistik ---------- */
.akc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.akc-stat { display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; border-left: 1px solid var(--akc-border); }
.akc-stat:first-child { border-left: 0; padding-left: 0; }
.akc-stat-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.akc-stat-label { color: var(--akc-text-2); font-size: .88rem; }
.akc-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--akc-navy); line-height: 1.15; }
.akc-stats-note { grid-column: 1 / -1; margin-top: .9rem; font-size: .88rem; color: var(--akc-text-2); display: flex; align-items: center; gap: .45rem; }
.akc-tone-neutral { background: #EEF1F6; color: #3B4A63; }
.akc-tone-warning { background: #FFF1D6; color: #B7791F; }
.akc-tone-info    { background: #E6EFFC; color: #1D5BBF; }
.akc-tone-success { background: #E2F5EC; color: #13804B; }
.akc-tone-danger  { background: #FDEBEB; color: #C53030; }

/* ---------- Bar penapis ---------- */
.akc-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding: 1rem 1rem .25rem; }
.akc-search { position: relative; flex: 1 1 280px; max-width: 480px; }
.akc-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--akc-text-3); }
.akc-search input { padding-left: 2.4rem; }
.akc-filters .form-control, .akc-filters .form-select { border: 1px solid var(--akc-border-strong); border-radius: 8px; height: 42px; font-size: .92rem; color: var(--akc-text); box-shadow: none; }
.akc-filters .form-select { width: auto; min-width: 170px; max-width: 260px; text-overflow: ellipsis; }
.akc-filters .akc-push { margin-left: auto; }

/* ---------- Jadual ---------- */
.akc-table-wrap { padding: .5rem 1rem 1rem; }
table.akc-table { width: 100% !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; }
table.akc-table thead th {
    background: #F5F7FB !important; color: var(--akc-text-2) !important; font-weight: 600 !important; font-size: .85rem;
    border-bottom: 1px solid var(--akc-border) !important; border-top: 0 !important; padding: .8rem .9rem !important; white-space: nowrap;
}
table.akc-table thead th:first-child { border-top-left-radius: 8px; }
table.akc-table thead th:last-child { border-top-right-radius: 8px; }
table.akc-table tbody td { padding: .85rem .9rem !important; border-bottom: 1px solid #EDF0F5 !important; border-top: 0 !important; vertical-align: middle; font-size: .92rem; background: #fff !important; box-shadow: none !important; }
table.akc-table tbody tr:hover td { background: #FAFBFD !important; }
table.dataTable.akc-table > thead > tr > th.sorting:before, table.dataTable.akc-table > thead > tr > th.sorting:after { opacity: .35; }
.akc-cell-main { font-weight: 600; color: var(--akc-navy); line-height: 1.3; }
.akc-cell-main a { color: inherit; text-decoration: none; }
.akc-cell-main a:hover { color: var(--akc-primary); text-decoration: underline; }
.akc-cell-sub { color: var(--akc-text-2); font-size: .84rem; margin-top: .15rem; }
.akc-file { display: flex; gap: .8rem; align-items: center; }
.akc-file-icon { width: 34px; height: 40px; flex-shrink: 0; border: 1.5px solid #E05A47; border-radius: 4px; color: #E05A47; font-size: .58rem; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; position: relative; background: #FFF6F4; }
.akc-file-icon:before { content: ''; position: absolute; top: -1.5px; right: -1.5px; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #fff #E05A47 transparent; }
.akc-empty { text-align: center; padding: 2.5rem 1rem; color: var(--akc-text-2); }

/* Butang tindakan baris */
.akc-row-actions { display: flex; gap: .25rem; justify-content: flex-end; align-items: center; }
.akc-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--akc-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; }
.akc-icon-btn:hover, .akc-icon-btn[aria-expanded=true] { background: #EEF2F8; color: var(--akc-navy); }
.akc-row-actions .akc-icon-btn { color: #3B4F7A; }
.akc-row-actions .akc-icon-btn-danger { color: #E53E3E; }
.akc-row-actions .akc-icon-btn-danger:hover { background: #FDEBEB; color: #C53030; }
.akc-row-actions .dropdown-menu { border: 1px solid var(--akc-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(21,40,75,.12); padding: .35rem; font-size: .9rem; }
.akc-row-actions .dropdown-item { border-radius: 6px; padding: .5rem .75rem; display: flex; gap: .55rem; align-items: center; }
.akc-row-actions .dropdown-item.text-danger:hover { background: #FDEBEB; }

/* Kaki jadual: info + halaman */
.akc-table-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem .1rem 0; }
.akc-table-foot .dataTables_info { color: var(--akc-text-2); font-size: .9rem; padding: 0 !important; }
.akc-table-foot .pagination { margin: 0; gap: .35rem; }
.akc-table-foot .page-link { border: 1px solid var(--akc-border-strong) !important; border-radius: 8px !important; color: var(--akc-text); min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: .9rem; box-shadow: none !important; }
.akc-table-foot .page-item.active .page-link { background: var(--akc-primary) !important; border-color: var(--akc-primary) !important; color: #fff; }
.akc-table-foot .page-item.disabled .page-link { color: var(--akc-text-3); background: #fff; }

/* Nota penerangan status */
.akc-legend { margin: 1rem 0 0; background: #EEF4FD; border: 1px solid #D4E3FA; color: #1D4F9C; border-radius: 10px; padding: .75rem 1rem; font-size: .88rem; display: flex; gap: .55rem; align-items: flex-start; flex-wrap: wrap; }
.akc-legend b { font-weight: 600; }

/* ---------- Lencana status (seragam di semua halaman) ---------- */
.akc-status { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 500; white-space: nowrap; line-height: 1.2; border: 1px solid transparent; }
.akc-status i { font-size: .95rem; }
.akc-status-warning { background: #FFF4DB; color: #8A5A00; border-color: #F5DDA0; }
.akc-status-info    { background: #E7F0FD; color: #14509E; border-color: #C3D8F5; }
.akc-status-success { background: #E3F5EC; color: #11663F; border-color: #B5E0CA; }
.akc-status-danger  { background: #FDEBEB; color: #A32D2D; border-color: #F3C4C4; }
.akc-status-neutral { background: #F1F3F6; color: #55607A; border-color: #D9DEE6; }

@media (max-width: 1199px) {
    .akc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
    .akc-stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
    .akc-page { padding: 1.25rem 1rem; }
    .akc-stats { grid-template-columns: 1fr; }
    .akc-stat { border-left: 0; padding-left: 0; }
    .akc-filters .akc-push { margin-left: 0; }
}

/* ---------- Kad statistik berasingan (ikon di kanan) ---------- */
.akc-stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.akc-stat-card { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.1rem 1.25rem; }
.akc-stat-card .akc-stat-icon { width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }
.akc-tone-violet { background: #F1EBFD; color: #7C4DDB; }

/* ---------- Organisasi: chip singkatan + nama ---------- */
.akc-org { display: flex; align-items: center; gap: .85rem; }
.akc-chip { min-width: 48px; padding: .35rem .55rem; border-radius: 8px; background: #E7EFFC; color: #1D4F9C; font-weight: 700; font-size: .8rem; text-align: center; letter-spacing: .02em; flex-shrink: 0; }
.akc-tag { display: inline-block; padding: .22rem .75rem; border: 1px solid var(--akc-border-strong); border-radius: 999px; font-size: .82rem; color: var(--akc-text-2); background: #fff; }
.akc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- Penapis segmen & papar ---------- */
.akc-segmented { display: inline-flex; border: 1px solid var(--akc-border-strong); border-radius: 8px; overflow: hidden; height: 42px; }
.akc-segmented button { border: 0; background: #fff; color: var(--akc-text-2); padding: 0 1rem; font-size: .92rem; border-left: 1px solid var(--akc-border-strong); }
.akc-segmented button:first-child { border-left: 0; }
.akc-segmented button.active { background: var(--akc-primary); color: #fff; font-weight: 600; }
.akc-papar { display: inline-flex; align-items: center; gap: .5rem; color: var(--akc-text-2); font-size: .92rem; margin: 0; }
.akc-papar .form-select { min-width: 80px; }

/* Pengepala jadual huruf besar (seragam semua jadual) */
table.akc-table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem !important; }

@media (max-width: 1199px) { .akc-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .akc-stat-cards { grid-template-columns: 1fr; } }
table.dataTable.akc-table thead th.sorting, table.dataTable.akc-table thead th.sorting_asc, table.dataTable.akc-table thead th.sorting_desc { padding-right: 1.7rem !important; }

/* =================== Dashboard (Tugasan Terkini) =================== */
.akc-hero { background: var(--akc-navy); border-radius: 18px; color: #fff; padding: 1.9rem 2.1rem 1.5rem; margin-bottom: 1.4rem; }
.akc-hero-top { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.akc-hero h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.akc-hero p { margin: .5rem 0 0; color: #C9D5EA; font-size: .95rem; }
.akc-hero-meta { display: flex; gap: 2rem; flex-wrap: wrap; }
.akc-hero-meta > div { display: flex; gap: .75rem; align-items: center; }
.akc-hero-meta i { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #C9D5EA; }
.akc-hero-meta b, .akc-hero-chip b { display: block; font-size: .9rem; font-weight: 600; color: #fff; }
.akc-hero-meta small, .akc-hero-chip small { color: #A9B9D6; font-size: .8rem; }
.akc-hero-who { display: flex; gap: .9rem; align-items: center; margin-top: 1.4rem; }
.akc-hero-who b { font-size: 1rem; font-weight: 600; color: #fff; }
.akc-hero-who small { display: block; color: #A9B9D6; font-size: .85rem; }
.akc-hero-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--akc-navy-3); border: 3px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.akc-hero-badge { background: #fff; color: #1D5BBF; font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; margin-left: .5rem; letter-spacing: .04em; vertical-align: 2px; }
.akc-hero-line { height: 1px; background: rgba(201,151,62,.6); margin: 1.4rem 0 1.1rem; }
.akc-hero-chips { display: flex; gap: .75rem; flex-wrap: wrap; }
.akc-hero-chip { display: flex; gap: .65rem; align-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); border-radius: 999px; padding: .55rem 1.1rem .55rem .9rem; }
.akc-hero-chip i { color: #E3B04B; }
.akc-hero-chip-amaran { border-color: rgba(227,176,75,.6); background: rgba(227,176,75,.12); }
.akc-hero-dot { width: 9px; height: 9px; border-radius: 50%; background: #2FB774; flex-shrink: 0; }

.akc-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
a.akc-kpi { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.15rem; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.akc-kpi:hover { border-color: #C3D2E8; box-shadow: 0 8px 22px rgba(21,40,75,.08); transform: translateY(-1px); color: inherit; }
.akc-kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.akc-kpi-n { font-size: 1.85rem; font-weight: 800; color: var(--akc-navy); line-height: 1; letter-spacing: -.02em; }
.akc-kpi-l { font-weight: 600; font-size: .84rem; color: #374151; margin-top: .3rem; }
.akc-kpi-tx { flex: 1; min-width: 0; }
.akc-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.akc-kpi-pill { font-size: .7rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
.akc-kpi-bar { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 0 3px 3px 0; }

.akc-dash-row { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 1rem; margin-bottom: 1.4rem; }
.akc-pad { padding: 1.4rem 1.5rem; }
.akc-card-title { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 700; color: var(--akc-navy); }
.akc-card-sub { color: var(--akc-text-2); font-size: .85rem; margin: 0 0 .9rem; }
.akc-ring { width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.akc-ring span { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: var(--akc-navy); line-height: 1; }
.akc-ring small { font-size: .62rem; font-weight: 600; color: var(--akc-text-2); letter-spacing: .06em; margin-top: .2rem; }
.akc-ring-wrap { display: flex; align-items: center; gap: 1rem; margin: .3rem 0 1rem; }
.akc-dok-ringkas { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 1.6rem; }
.akc-dok-ringkas-garis { background: #EEF1F6; }
.akc-stat-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex: 1; min-width: 0; }
.akc-stat-mini div { background: #F7F9FC; border-radius: 10px; padding: .55rem .7rem; }
.akc-stat-mini small { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--akc-text-2); white-space: nowrap; }
.akc-stat-mini small i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.akc-stat-mini b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--akc-navy); margin-top: .1rem; line-height: 1.2; }
.akc-insight { display: flex; gap: .6rem; align-items: center; background: #EEF4FD; border-radius: 10px; padding: .65rem .8rem; font-size: .8rem; color: #1D4F9C; }
.akc-insight i { font-size: 1rem; }
.akc-hbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .5rem; font-size: .84rem; color: #374151; margin: .75rem 0; }
.akc-hbar b { color: var(--akc-navy); }
.akc-hbar em { font-style: normal; color: var(--akc-text-2); font-size: .76rem; margin-left: .35rem; }
.akc-hbar .akc-hbar-t { flex: 0 0 100%; }
.akc-hbar-t { height: 8px; background: #EEF1F6; border-radius: 99px; overflow: hidden; }
.akc-hbar-t div { height: 100%; border-radius: 99px; min-width: 4px; }
.akc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.akc-tile { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: .9rem; border: 1px solid var(--akc-border); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.akc-tile:hover { border-color: #C3D2E8; box-shadow: 0 8px 20px rgba(21,40,75,.08); transform: translateY(-1px); color: inherit; }
.akc-tile-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.akc-tile-go { position: absolute; top: .9rem; right: .9rem; color: #B4BDCC; transition: color .15s; }
.akc-tile:hover .akc-tile-go { color: #1D5BBF; }
.akc-tile b { display: block; font-size: .88rem; color: var(--akc-navy); }
.akc-tile small { font-size: .75rem; color: var(--akc-text-2); }
.akc-tile-utama { background: linear-gradient(140deg, #1D5BBF, #15408F); border-color: transparent; }
.akc-tile-utama:hover { border-color: transparent; box-shadow: 0 10px 24px rgba(29,91,191,.28); }
.akc-tile-utama b { color: #fff; }
.akc-tile-utama small, .akc-tile-utama .akc-tile-go, .akc-tile-utama:hover .akc-tile-go { color: #CFE0FA; }
.akc-tile-utama .akc-tile-ic { background: rgba(255,255,255,.18); color: #fff; }

table.akc-table-dark thead th { background: var(--akc-navy) !important; color: #fff !important; border-bottom: 0 !important; }
.akc-icon-btn-outline { border: 1px solid var(--akc-border-strong); color: #1D5BBF; }

@media (max-width: 1199px) { .akc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .akc-dash-row { grid-template-columns: 1fr; } .akc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .akc-kpi-grid, .akc-dash-row, .akc-dok-ringkas { grid-template-columns: 1fr; } .akc-dok-ringkas-garis { display: none; } .akc-tiles { grid-template-columns: 1fr 1fr; } .akc-hero h1 { font-size: 1.5rem; } }

/* =================== Log interaksi =================== */
.akc-months { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.akc-months-year { display: flex; align-items: center; gap: .55rem; padding-right: 1rem; border-right: 1px solid var(--akc-border); font-size: 1.05rem; color: var(--akc-navy); }
.akc-months-year a { color: var(--akc-text-2); text-decoration: none; }
.akc-months-year a:hover { color: var(--akc-primary); }
.akc-muted { color: #C4CBD7; }
.akc-months-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .5rem; flex: 1; }
.akc-month { display: block; text-align: center; border: 1px solid var(--akc-border); border-radius: 10px; padding: .4rem 0; font-size: .82rem; color: var(--akc-text-2); background: #fff; text-decoration: none; }
.akc-month b { display: block; font-size: .92rem; color: var(--akc-navy); }
a.akc-month:hover { border-color: #C3D2E8; color: var(--akc-text-2); }
.akc-month.is-on { background: var(--akc-primary); border-color: var(--akc-primary); color: #C9D5EA; }
.akc-month.is-on b { color: #fff; }
.akc-month.is-off { opacity: .45; }
.akc-stat-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
a.akc-stat-link { text-decoration: none; color: inherit; }
a.akc-stat-link:hover { border-color: #C3D2E8; color: inherit; }
.akc-tone-danger.akc-stat-icon { background: #FDEBEB; color: #C53030; }
.akc-reaksi { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.akc-log-soalan { line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.akc-log-jawapan { color: #374151; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.akc-table-log tbody td { vertical-align: top; }
@media (max-width: 1199px) { .akc-months { flex-direction: column; align-items: stretch; } .akc-months-year { border-right: 0; justify-content: center; } .akc-months-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } .akc-stat-cards-3 { grid-template-columns: 1fr; } }

/* =================== Tab penapis + lampu status =================== */
.akc-tabs { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--akc-border); overflow-x: auto; }
.akc-tab { border: 0; background: none; padding: .9rem .85rem .75rem; font-size: .9rem; color: var(--akc-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: .45rem; align-items: center; white-space: nowrap; }
.akc-tab:hover { color: var(--akc-navy); }
.akc-tab em { font-style: normal; font-size: .75rem; font-weight: 600; background: #EEF1F6; color: #3B4A63; border-radius: 999px; padding: .05rem .5rem; }
.akc-tab.active { color: var(--akc-navy); font-weight: 600; border-bottom-color: var(--akc-primary); }
.akc-tab.active em { background: var(--akc-primary); color: #fff; }
.akc-tab em.akc-em-warning { background: #FFE7B3; color: #8A5A00; }
.akc-tab-sep { width: 1px; background: var(--akc-border); margin: .65rem .4rem; flex-shrink: 0; }

.akc-lampu { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* Lampu hijau, kuning & biru berkelip (warna cahaya ikut --lampu); merah kekal tetap */
.akc-lampu-hijau { --lampu: 34,197,94; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: akc-kelip-lampu 1.6s ease-in-out infinite; }
.akc-lampu-kuning { --lampu: 245,158,11; background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.22); animation: akc-kelip-lampu 1.6s ease-in-out infinite .4s; }
.akc-lampu-biru { --lampu: 29,91,191; background: #1D5BBF; box-shadow: 0 0 0 3px rgba(29,91,191,.18); animation: akc-kelip-lampu 1.6s ease-in-out infinite .8s; }
.akc-lampu-merah { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.akc-kelip { animation: akc-kelip 1s ease-in-out infinite; }
.akc-status .akc-lampu { width: 7px; height: 7px; }
@keyframes akc-nafas { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes akc-kelip-lampu { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(var(--lampu),.22), 0 0 9px 1px rgba(var(--lampu),.6); } 50% { opacity: .35; box-shadow: 0 0 0 3px rgba(var(--lampu),.05); } }
@keyframes akc-kelip { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(245,158,11,.25), 0 0 10px 2px rgba(245,158,11,.55); } 50% { opacity: .25; box-shadow: 0 0 0 3px rgba(245,158,11,.08); } }
@media (prefers-reduced-motion: reduce) { .akc-lampu, .akc-kelip { animation: none !important; } }

/* Notis */
.akc-notice { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #FFF8E8; border: 1px solid #F5DDA0; border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1.1rem; color: #8A5A00; font-size: .9rem; }
.akc-notice b { color: #6B4500; }
.akc-btn-sm { padding: .4rem .85rem; font-size: .82rem; }

/* Pengguna */
.akc-user { display: flex; gap: .75rem; align-items: center; }
.akc-user-av { width: 38px; height: 38px; border-radius: 50%; background: #E7EDF7; color: #1F3A6B; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; flex-shrink: 0; }
.akc-role { display: inline-block; padding: .18rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid; }
.akc-role-admin { background: #EEF1FB; color: #3446A8; border-color: #CDD5F3; }
.akc-role-ckc { background: #E7F6F8; color: #0E7C86; border-color: #BFE6EA; }
.akc-role-kc { background: #F3F4F6; color: #4B5563; border-color: #DADDE3; }
.akc-svc { display: inline-block; margin-top: .25rem; font-size: .76rem; padding: .1rem .55rem; border-radius: 999px; background: #F1F3F6; color: #55607A; }
table.akc-table tbody tr.akc-row-pending td { background: #FFFCF3 !important; }
.akc-row-actions .akc-icon-btn-success { color: #13804B; border: 1px solid #B5E0CA; background: #E9F7F0; }
.akc-row-actions .akc-icon-btn-success:hover { background: #D7F0E3; color: #0F6B3E; }
.akc-svc-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; max-width: 280px; }
.akc-svc-list .akc-svc { margin-top: 0; white-space: nowrap; }
.akc-svc-more { background: #E7EFFC; color: #1D4F9C; font-weight: 600; cursor: help; }

/* =================== Perkhidmatan =================== */
.akc-chip-sm { min-width: 0; font-size: .7rem; padding: .12rem .45rem; border-radius: 6px; margin-left: .4rem; vertical-align: 1px; }
.akc-avatars { display: flex; align-items: center; }
.akc-avatars > span { width: 30px; height: 30px; border-radius: 50%; background: #E7EDF7; color: #1F3A6B; font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -8px; }
.akc-avatars > span:first-child { margin-left: 0; }
.akc-avatars > .akc-avatars-more { background: #F1F3F6; color: #55607A; }
.akc-avatars small { margin-left: .5rem; color: var(--akc-text-2); font-size: .8rem; white-space: nowrap; }
.akc-text-danger { color: #C53030; font-size: .85rem; white-space: nowrap; }
.akc-doc-count { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--akc-navy); }
.akc-doc-count i { color: var(--akc-text-3); }
.akc-zero { color: #B7791F; font-weight: 600; }
#perkhidmatanTable td:nth-child(2) { min-width: 170px; }
#perkhidmatanTable td:nth-child(3) { min-width: 210px; }

/* =================== Token & persona chatbot =================== */
.akc-token { padding: 1.4rem 1.6rem; margin-bottom: 1rem; }
.akc-token-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #EDF0F5; }
.akc-token-head h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--akc-navy); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.akc-token-head h3 > i { color: #1D5BBF; }
.akc-token-head p { margin: .25rem 0 0; color: var(--akc-text-2); font-size: .88rem; }
.akc-token-tiles { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: .85rem; margin: 1.1rem 0; }
.akc-token-tile { border: 1px solid var(--akc-border); border-radius: 12px; padding: .85rem 1rem; background: #FAFBFD; }
.akc-token-label { color: var(--akc-text-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.akc-token-label a { text-transform: none; letter-spacing: 0; font-weight: 600; color: #1D5BBF; text-decoration: none; }
.akc-token-val { font-size: 1.1rem; font-weight: 700; color: var(--akc-navy); margin-top: .35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.akc-token-val small { font-size: .8rem; font-weight: 600; }
.akc-mono { font-family: Consolas, 'Courier New', monospace; letter-spacing: .08em; }
.akc-llm { display: inline-block; background: #F1EBFD; color: #6B3FD1; border: 1px solid #DCCDF8; border-radius: 8px; padding: .1rem .6rem; font-size: .95rem; }
.akc-bar { height: 6px; border-radius: 99px; background: #E3E8F0; margin-top: .55rem; overflow: hidden; }
.akc-bar span { display: block; height: 100%; background: #22C55E; border-radius: 99px; }
.akc-bar span.akc-bar-amaran { background: #F59E0B; }
.akc-persona { border: 1px solid var(--akc-border); border-radius: 12px; padding: 1rem 1.1rem; }
.akc-persona-teks { margin: .6rem 0 0; color: #374151; line-height: 1.6; font-size: .92rem; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.akc-persona-teks.is-penuh { display: block; -webkit-line-clamp: unset; }
.akc-token-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.akc-token-foot small { color: var(--akc-text-3); font-size: .8rem; }
.akc-token-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.akc-token-ringkas { margin-bottom: 0; padding: 1.1rem 1.2rem; }
.akc-token-ringkas .akc-token-head h3 { font-size: 1rem; }
.akc-token-ringkas .akc-token-tiles { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 0; gap: .6rem; }
.akc-token-ringkas .akc-token-tile { padding: .65rem .75rem; }
.akc-token-ringkas .akc-token-val { font-size: .92rem; }
.akc-token-amaran { background: #FFFCF3; }
@media (max-width: 1199px) { .akc-token-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .akc-token-tiles, .akc-token-ringkas .akc-token-tiles { grid-template-columns: 1fr; } }
.btn-akc, .btn-akc-outline { white-space: nowrap; }
.akc-token-head > a { flex-shrink: 0; }
.akc-token-ringkas .akc-token-tile:first-child .akc-token-val { flex-wrap: nowrap; }
.akc-token-ringkas .akc-token-val small { display: block; width: 100%; }
.akc-token-ringkas .akc-mono { font-size: .8rem; letter-spacing: .04em; }

/* =================== Agensi (Superadmin) =================== */
.akc-ringkasan { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .75rem; color: var(--akc-text-2); font-size: .9rem; }
.akc-ringkasan > span { display: inline-flex; align-items: center; gap: .4rem; }
.akc-ringkasan b { color: var(--akc-navy); }
.akc-agency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.akc-agency { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color .15s, box-shadow .15s; }
.akc-agency:hover { border-color: #C3D2E8; box-shadow: 0 8px 22px rgba(21,40,75,.07); }
.akc-agency.is-off { opacity: .75; background: #FAFBFD; }
.akc-agency-head { display: flex; gap: .9rem; align-items: center; }
.akc-agency-kod { width: 64px; height: 64px; border-radius: 14px; background: var(--akc-navy); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .06em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.akc-agency-nama h3 { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 700; color: var(--akc-navy); line-height: 1.3; }
.akc-agency-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--akc-border); border-radius: 12px; background: #FAFBFD; }
.akc-agency-stats > div { padding: .75rem .5rem; text-align: center; border-left: 1px solid var(--akc-border); }
.akc-agency-stats > div:first-child { border-left: 0; }
.akc-agency-stats b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--akc-navy); line-height: 1.2; }
.akc-agency-stats span { font-size: .76rem; color: var(--akc-text-2); }
.akc-agency-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; color: var(--akc-text-2); }
.akc-agency-actions { display: flex; gap: .5rem; align-items: center; border-top: 1px solid #EDF0F5; padding-top: .9rem; margin-top: auto; }
.akc-agency-actions .akc-icon-btn-danger { color: #E53E3E; }
.akc-agency-actions .akc-icon-btn-danger:hover { background: #FDEBEB; }
.akc-tidak-aktif { margin-top: 1.25rem; }
.akc-tidak-aktif summary { cursor: pointer; color: var(--akc-text-2); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 1199px) { .akc-agency-grid { grid-template-columns: 1fr; } }
.akc-page-header > div:first-child { flex: 1 1 0; min-width: 0; }

/* =================== Kad selamat datang padat (pilihan A, 11/10) =================== */
.akc-salam { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.35rem; margin-bottom: 1.25rem; border-radius: 16px; color: #fff;
    background: linear-gradient(110deg, #15284B 0%, #1F3A6B 60%, #1D5BBF 140%); }
.akc-salam-av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.akc-salam-teks { min-width: 0; }
.akc-salam-teks h1 { margin: 0; font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.3; }
.akc-salam-teks p { margin: .15rem 0 0; font-size: .82rem; color: #BFD0EC; }
.akc-salam-badge { display: inline-block; background: #fff; color: #1D5BBF; font-size: .66rem; font-weight: 700; letter-spacing: .05em; padding: .12rem .5rem; border-radius: 999px; margin-left: .4rem; vertical-align: 3px; }
.akc-salam-chips { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.akc-salam-chip { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .42rem .85rem; font-size: .8rem; color: #DCE6F6; white-space: nowrap; }
.akc-salam-chip i { color: #E3B04B; }
.akc-salam-chip b { color: #fff; font-weight: 600; }
.akc-salam-chip.is-amaran { border-color: rgba(227,176,75,.65); background: rgba(227,176,75,.16); }
@media (max-width: 1199px) { .akc-salam { flex-wrap: wrap; } .akc-salam-chips { margin-left: 0; width: 100%; justify-content: flex-start; } }
@media (min-width: 1200px) { .akc-salam-chips { flex-wrap: nowrap; flex-shrink: 0; } .akc-salam-teks { flex: 1 1 auto; } }
.akc-salam-badge { white-space: nowrap; }
@media (min-width: 1200px) {
    .akc-salam { gap: .9rem; }
    .akc-salam-teks h1 { font-size: 1.12rem; }
    .akc-salam-chip { padding: .38rem .72rem; font-size: .78rem; }
    .akc-salam-chips { gap: .4rem; }
}

/* =================== Log interaksi: KPI + trend + dua panel (11/10) =================== */
.akc-log-kpi { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.akc-log-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akc-text-2); display: flex; align-items: center; gap: .45rem; }
.akc-log-n { font-size: 1.9rem; font-weight: 800; color: var(--akc-navy); line-height: 1; letter-spacing: -.02em; margin-top: .65rem; }
.akc-log-n small { font-size: .85rem; color: var(--akc-text-2); font-weight: 600; margin-left: .2rem; letter-spacing: 0; }
.akc-log-d { font-size: .76rem; color: var(--akc-text-2); margin-top: .4rem; }
.akc-log-kad { padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.akc-log-kad:hover { border-color: #C3D2E8; box-shadow: 0 8px 22px rgba(21,40,75,.08); transform: translateY(-1px); color: inherit; }
.akc-log-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; margin-top: .55rem; }
.akc-log-hero { position: relative; overflow: hidden; padding: 1.1rem 1.25rem; border: 0; color: #fff; background: linear-gradient(135deg, #15284B, #1F3A6B 70%, #1D5BBF 150%); }
.akc-log-hero .akc-log-lbl { color: #BFD0EC; }
.akc-log-hero .akc-log-n { color: #fff; font-size: 2.3rem; }
.akc-log-hero .akc-log-d { color: #BFD0EC; }
.akc-log-hero .is-naik { color: #7EE0A8; font-weight: 700; }
.akc-log-hero .is-turun { color: #FFB4B4; font-weight: 700; }
.akc-log-hero::after { content: '\F268'; font-family: bootstrap-icons; position: absolute; right: -6px; bottom: -26px; font-size: 7rem; color: rgba(255,255,255,.07); pointer-events: none; }
.akc-tolok { position: relative; width: 116px; height: 60px; overflow: hidden; margin: .45rem auto 0; }
.akc-tolok::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 116px; border-radius: 50%; background: conic-gradient(from -90deg, #13804B 0 var(--sudut), #EEF1F6 var(--sudut) 180deg, transparent 180deg); }
.akc-tolok::after { content: ''; position: absolute; left: 13px; right: 13px; top: 13px; height: 90px; border-radius: 50%; background: #fff; }
.akc-tolok b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 1.35rem; font-weight: 800; color: var(--akc-navy); z-index: 1; line-height: 1; }
.akc-log-kad .akc-log-d { margin-top: .3rem; }

.akc-log-trend { display: grid; grid-template-columns: 210px minmax(0, 1fr); padding: 1.1rem 1.4rem; margin-bottom: 1rem; }
.akc-log-trend-kiri { border-right: 1px solid #EEF1F6; padding-right: 1.2rem; display: flex; flex-direction: column; justify-content: center; }
.akc-log-trend-kiri .akc-months-year { border-right: 0; padding-right: 0; }
.akc-log-trend-n { font-size: 2rem; font-weight: 800; color: var(--akc-navy); line-height: 1; margin-top: .6rem; }
.akc-log-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .55rem; align-items: end; height: 130px; padding-left: 1.2rem; }
.akc-log-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; text-decoration: none; }
.akc-log-bar .v { font-size: .7rem; font-weight: 700; color: var(--akc-text-2); }
.akc-log-bar .b { width: 100%; max-width: 44px; border-radius: 8px 8px 4px 4px; background: #DCE6F6; transition: background .15s; }
.akc-log-bar .m { font-size: .72rem; color: var(--akc-text-3, #8A94A8); font-weight: 600; }
a.akc-log-bar:hover .b { background: #B9CDEE; }
.akc-log-bar.is-on .b { background: linear-gradient(180deg, #3B7BE0, #1B3A73); }
.akc-log-bar.is-on .v, .akc-log-bar.is-on .m { color: var(--akc-navy); font-weight: 800; }
.akc-log-bar.is-off .b { height: 12%; background: repeating-linear-gradient(45deg, #F0F2F6, #F0F2F6 4px, #fff 4px, #fff 8px); border: 1px dashed #E0E5EE; }

.akc-log-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; align-items: start; }
.akc-log-tool { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-bottom: 1px solid #EEF1F6; }
.akc-log-tool .akc-search { max-width: none; flex: none; }
.akc-log-tool-baris { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: space-between; }
.akc-log-tool-baris .form-select { width: auto; flex: 0 1 220px; }
.akc-log-items { display: flex; flex-direction: column; }
.akc-log-item { display: flex; gap: .75rem; align-items: flex-start; text-align: left; width: 100%; padding: .85rem 1rem; border: 0; border-bottom: 1px solid #F0F2F6; background: #fff; transition: background .12s; }
.akc-log-item:hover { background: #FAFBFD; }
.akc-log-item.is-sel { background: #F2F6FD; box-shadow: inset 3px 0 0 #1D5BBF; }
.akc-log-av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .92rem; flex-shrink: 0; }
.akc-log-item-tx { flex: 1; min-width: 0; }
.akc-log-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; font-weight: 600; color: var(--akc-navy); }
.akc-log-x { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .74rem; color: var(--akc-text-2); margin-top: .3rem; }
.akc-log-x .akc-status { font-size: .7rem; padding: .12rem .55rem; gap: .3rem; }
.akc-log-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .8rem 1rem; font-size: .8rem; color: var(--akc-text-2); }
.akc-log-foot .pagination { margin: 0; }

.akc-log-perbualan { padding: 1.25rem 1.4rem; position: sticky; top: 1rem; }
.akc-log-butiran-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.akc-log-siapa { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--akc-text-2); margin: .9rem 0 .35rem; }
.akc-log-siapa.is-kanan { justify-content: flex-end; }
.akc-buih { border-radius: 14px; padding: .75rem .9rem; font-size: .86rem; line-height: 1.6; max-width: 90%; word-break: break-word; }
.akc-buih-teks { white-space: pre-line; }
.akc-buih-u { background: var(--akc-navy); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; width: fit-content; }
.akc-buih-b { background: #F4F6FA; color: #1F2937; border-bottom-left-radius: 4px; max-height: 340px; overflow: auto; }
.akc-log-fb { margin-top: 1rem; border-radius: 12px; padding: .7rem .9rem; font-size: .82rem; background: #F7F9FC; border: 1px solid var(--akc-border); color: #374151; }
.akc-log-fb.is-merah { background: #FFF7F7; border-color: #F5D0D0; color: #7F1D1D; }
.akc-log-fb.is-hijau { background: #F2FBF6; border-color: #CDEBDB; color: #13603A; }
.akc-log-butiran-kaki { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #F0F2F6; }
.akc-log-butiran-kaki .btn-akc, .akc-log-butiran-kaki .btn-akc-outline { padding: .5rem .9rem; font-size: .84rem; }

@media (max-width: 1199px) { .akc-log-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .akc-log-split { grid-template-columns: 1fr; }
    .akc-log-perbualan { position: static; }
    .akc-log-trend { grid-template-columns: 1fr; }
    .akc-log-trend-kiri { border-right: 0; padding-right: 0; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
    .akc-log-trend-n { margin-top: 0; font-size: 1.5rem; }
    .akc-log-bars { padding-left: 0; gap: .3rem; }
}
@media (max-width: 575px) { .akc-log-kpi { grid-template-columns: 1fr; } .akc-log-bar .v { display: none; } }

/* =================== Bahagian: kad liputan + jadual berwarna (11/10) =================== */
.akc-liputan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; margin-bottom: 1rem; }
.akc-liputan-kiri { padding: 1.3rem 1.5rem; }
.akc-liputan-big { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-top: .9rem; }
.akc-liputan-big b { font-size: 2.1rem; font-weight: 800; color: var(--akc-navy); letter-spacing: -.02em; line-height: 1; }
.akc-liputan-big span { font-size: .84rem; color: var(--akc-text-2); }
.akc-liputan-bar { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; background: #EEF1F6; margin-top: .85rem; }
.akc-liputan-leg { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .65rem; font-size: .76rem; color: var(--akc-text-2); }
.akc-liputan-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; }
.akc-liputan-grid { background: #F7F9FC; border-left: 1px solid #EEF1F6; display: grid; grid-template-columns: 1fr 1fr; }
.akc-liputan-grid > div { padding: 1rem 1.25rem; border-bottom: 1px solid #EEF1F6; border-right: 1px solid #EEF1F6; }
.akc-liputan-grid > div:nth-child(2n) { border-right: 0; }
.akc-liputan-grid > div:nth-child(n+3) { border-bottom: 0; }
.akc-liputan-grid b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--akc-navy); line-height: 1; }
.akc-liputan-grid > div > span:last-child { display: block; font-size: .76rem; color: var(--akc-text-2); margin-top: .35rem; }
.akc-liputan-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; margin-bottom: .5rem; }
.akc-tone-teal { background: #E0F5F2; color: #0E7F72; }
.akc-seg-n { font-style: normal; font-size: .7rem; font-weight: 600; background: rgba(0,0,0,.07); border-radius: 99px; padding: 0 .4rem; margin-left: .25rem; }
.akc-segmented button.active .akc-seg-n { background: rgba(255,255,255,.22); }
.akc-table-bahagian .akc-chip { min-width: 50px; padding: .5rem .55rem; border-radius: 10px; }
.akc-mtr { display: flex; align-items: center; gap: .6rem; }
.akc-mtr-t { flex: 1; max-width: 70px; height: 6px; background: #EEF1F6; border-radius: 99px; overflow: hidden; }
.akc-mtr-t span { display: block; height: 100%; border-radius: 99px; }
.akc-mtr b { min-width: 1.4rem; text-align: right; color: var(--akc-navy); font-weight: 700; }
.akc-st-lampu { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.akc-st-lampu .akc-lampu { width: 8px; height: 8px; }
.akc-st-lampu.is-hijau { color: #13804B; }
.akc-st-lampu.is-kuning { color: #B7791F; }
.akc-st-lampu.is-kelabu { color: var(--akc-text-3); }
.akc-lampu-kelabu { background: #C4CAD6; box-shadow: 0 0 0 3px rgba(196,202,214,.3); }
.akc-row-actions-bingkai .akc-icon-btn { border: 1px solid var(--akc-border); border-radius: 9px; }
@media (max-width: 991px) { .akc-liputan { grid-template-columns: 1fr; } .akc-liputan-grid { border-left: 0; border-top: 1px solid #EEF1F6; } }
.akc-chip.akc-chip-w0 { background: #E7EFFC; color: #1D5BBF; }
.akc-chip.akc-chip-w1 { background: #E3F5EC; color: #13804B; }
.akc-chip.akc-chip-w2 { background: #F0EAFD; color: #6D3FD1; }
.akc-chip.akc-chip-w3 { background: #FFF4DC; color: #B7791F; }
.akc-chip.akc-chip-w4 { background: #E0F5F2; color: #0E7F72; }
.akc-chip.akc-chip-w5 { background: #FDECEF; color: #B4234A; }

/* =================== Dokumen: cip kategori + ringkasan lampu (11/10) =================== */
.akc-doc-kat { display: flex; align-items: center; gap: .6rem .5rem; flex-wrap: wrap; padding: .9rem 1rem; border-bottom: 1px solid #EEF1F6; }
.akc-doc-cip { display: flex; flex-wrap: wrap; gap: .5rem; }
.akc-cip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--akc-border); background: #fff; border-radius: 12px; padding: .4rem .65rem; font-size: .78rem; color: #374151; transition: border-color .15s, background .15s; }
.akc-cip:hover { border-color: #C3D2E8; }
.akc-cip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.akc-cip b { color: var(--akc-navy); font-weight: 700; }
.akc-cip.is-on { border-color: var(--akc-navy); background: #F2F6FD; box-shadow: inset 0 0 0 1px var(--akc-navy); }
.akc-doc-ringkas { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.akc-doc-ringkas button { border: 1px solid transparent; background: none; border-radius: 999px; padding: .3rem .5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--akc-text-2); }
.akc-doc-ringkas button:hover { background: #F6F8FC; }
.akc-doc-ringkas button.is-on { background: #F2F6FD; border-color: #C3D2E8; color: var(--akc-navy); }
.akc-doc-ringkas b { color: var(--akc-navy); }
.akc-doc-ringkas .akc-lampu { width: 8px; height: 8px; }

/* =================== Perkhidmatan: paparan jubin (11/10) =================== */
.akc-khidmat-tool { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 1rem; }
.akc-khidmat-tool .akc-search { flex: 0 1 320px; }
.akc-khidmat-tool .form-select { width: auto; max-width: 260px; }
.akc-pil { display: inline-flex; background: #F2F4F8; border-radius: 10px; padding: 3px; gap: 2px; }
.akc-pil .akc-tab { border: 0; border-radius: 8px; margin: 0; padding: .4rem .75rem; font-size: .82rem; font-weight: 600; color: var(--akc-text-2); }
.akc-pil .akc-tab.active { background: #fff; color: var(--akc-navy); box-shadow: 0 1px 3px rgba(16,24,40,.12); border-bottom-color: transparent; }
.akc-pil .akc-tab.active em { background: #E6EAF1; color: #3B4A63; }
.akc-pil .akc-tab .akc-lampu { width: 8px; height: 8px; }
.akc-paparan .akc-tab { padding: .4rem .6rem; }
.akc-khidmat-kemajuan { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 0 1rem .9rem; font-size: .8rem; color: var(--akc-text-2); }
.akc-khidmat-kemajuan b { color: var(--akc-navy); }
.akc-khidmat-meter { flex: 0 0 220px; height: 8px; border-radius: 99px; background: #FDEBEB; overflow: hidden; }
.akc-khidmat-meter span { display: block; height: 100%; background: #13804B; border-radius: 99px; }
.akc-khidmat-jubin { padding: 0 1rem .4rem; }
.akc-jubin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.akc-jubin { display: flex; flex-direction: column; gap: .55rem; min-height: 172px; padding: .9rem; border: 1px solid var(--akc-border); border-radius: 14px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.akc-jubin:hover { box-shadow: 0 8px 22px rgba(21,40,75,.08); border-color: #C3D2E8; }
.akc-jubin[hidden] { display: none; }
.akc-jubin.is-tiada_pegawai { border-color: #F5D0D0; background: linear-gradient(180deg, #FFF8F8, #fff 60%); }
.akc-jubin.is-tiada_dokumen { border-color: #F6E3B4; background: linear-gradient(180deg, #FFFBF0, #fff 60%); }
.akc-jubin-atas { display: flex; justify-content: space-between; align-items: center; }
.akc-jubin-atas .akc-chip { min-width: 0; font-size: .72rem; padding: .25rem .5rem; }
.akc-jubin-atas .akc-lampu { width: 8px; height: 8px; }
.akc-jubin-nama { font-size: .9rem; color: var(--akc-navy); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.akc-jubin-bhg { font-size: .74rem; color: var(--akc-text-2); margin-top: -.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akc-jubin-kaki { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .65rem; border-top: 1px dashed #E8ECF3; }
.akc-jubin-kaki .akc-avatars { min-width: 0; }
.akc-jubin-kaki .akc-avatars > span { width: 26px; height: 26px; font-size: .62rem; }
.akc-jubin-kaki .akc-avatars small { font-size: .74rem; color: var(--akc-text-2); margin-left: .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akc-jubin-kaki .akc-row-actions { gap: .3rem; flex-shrink: 0; }
.akc-jubin-kaki .akc-icon-btn { width: 30px; height: 30px; }
.akc-jubin-tetap { color: #C53030; font-weight: 600; font-size: .78rem; display: inline-flex; gap: .3rem; align-items: center; text-decoration: none; }
.akc-jubin-tetap:hover { color: #9B1C1C; text-decoration: underline; }
#jubin-kaki { padding: .9rem 0 .5rem; }
@media (max-width: 1399px) { .akc-jubin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .akc-jubin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .akc-jubin-grid { grid-template-columns: 1fr; } .akc-khidmat-meter { flex-basis: 100%; } }

/* Popup tetapkan pegawai */
.akc-jubin-tetap { border: 0; background: none; padding: 0; }
.akc-avatars-btn { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.akc-avatars-btn:hover small { color: var(--akc-primary); text-decoration: underline; }
.akc-pgw { text-align: left; font-size: .86rem; }
.akc-pgw-kepala { margin-bottom: .75rem; }
.akc-pgw-kepala b { display: block; color: var(--akc-navy); font-size: .95rem; }
.akc-pgw-kepala small { color: var(--akc-text-2); }
.akc-pgw-cari { max-width: none; margin-bottom: .6rem; }
.akc-pgw-senarai { max-height: 340px; overflow-y: auto; border: 1px solid var(--akc-border); border-radius: 12px; }
.akc-pgw-kump { position: sticky; top: 0; background: #F7F9FC; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akc-text-2); padding: .45rem .8rem; border-bottom: 1px solid #EEF1F6; z-index: 1; }
.akc-pgw-baris { display: flex; align-items: center; gap: .65rem; padding: .55rem .8rem; border-bottom: 1px solid #F3F5F8; cursor: pointer; margin: 0; }
.akc-pgw-baris:hover { background: #F6F8FC; }
.akc-pgw-baris[hidden] { display: none; }
.akc-pgw-baris input { width: 17px; height: 17px; accent-color: #1B3A73; flex-shrink: 0; }
.akc-pgw-baris:has(input:checked) { background: #F2F6FD; }
.akc-pgw-av { width: 30px; height: 30px; border-radius: 50%; background: #E7EDF7; color: #1F3A6B; font-size: .66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.akc-pgw-tx { min-width: 0; }
.akc-pgw-tx b { display: block; color: var(--akc-navy); font-weight: 600; }
.akc-pgw-tx small { display: block; color: var(--akc-text-2); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akc-pgw-kaki { margin-top: .6rem; font-size: .78rem; color: var(--akc-text-2); }

/* =================== Pengguna: jadual padat (11/10) =================== */
.akc-table-pengguna td { padding-top: .65rem; padding-bottom: .65rem; }
.akc-table-pengguna .akc-user-av.akc-chip { min-width: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; }
.akc-user-tx { min-width: 0; }
.akc-user-tx .akc-cell-main { font-weight: 600; }
.akc-bendera { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; margin-left: .4rem; vertical-align: 1px; white-space: nowrap; }
.akc-bendera .akc-lampu { width: 6px; height: 6px; }
.akc-bendera-kuning { background: #FFF4DC; color: #B7791F; }
.akc-bendera-merah { background: #FDEBEB; color: #C53030; }
.akc-chip-bhg { min-width: 0; font-size: .72rem; padding: .28rem .55rem; border-radius: 7px; cursor: help; }
.akc-svc-ringkas { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: #374151; }
.akc-svc-ringkas i { color: var(--akc-text-3); }
.akc-svc-ringkas.is-tiada { color: #C4CAD6; }
.akc-svc-ringkas.is-tiada i { color: #D5DAE3; }
.akc-pautan-status { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--akc-border); background: #F7F9FC; color: var(--akc-text-2); border-radius: 10px; padding: .4rem .75rem; font-size: .8rem; }
.akc-pautan-status b { color: var(--akc-navy); }
.akc-pautan-status.is-kuning { background: #FFF8E8; border-color: #F6E3B4; color: #8A5A00; }
.akc-pautan-status.is-kuning b { color: #6B4500; }
.akc-pautan-status.active { box-shadow: inset 0 0 0 1px var(--akc-navy); border-color: var(--akc-navy); }
.akc-khidmat-tool #tapis-bahagian { max-width: 210px; }
.akc-svc-ringkas { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.akc-svc-ringkas i { margin-right: .35rem; }

/* =================== Pembantu AI: pratonton komputer / telefon (11/10) =================== */
.akc-pa-pentas { position: relative; }
.akc-pa-iframe { position: absolute; border: 0; background: #fff; z-index: 2; }
.akc-pa-iframe.is-telefon { border-radius: 0 0 28px 28px; }
.akc-pa-av { width: 40px; height: 40px; border-radius: 12px; background: #E7EDF7; color: #1F3A6B; font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.akc-pa-av img { width: 100%; height: 100%; object-fit: cover; }
.akc-pa-kepala { display: flex; align-items: center; gap: .7rem; padding: .75rem 1.1rem; border-bottom: 1px solid #EEF1F6; background: #fff; }
.akc-pa-kepala b { display: block; color: var(--akc-navy); font-size: .92rem; }
.akc-pa-kepala small { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #13804B; }
.akc-pa-kepala .akc-lampu { width: 7px; height: 7px; }
.akc-pa-kepala.is-biru { background: linear-gradient(135deg, #1B3A73, #1565E6); border-bottom: 0; padding: 2.6rem 1rem .85rem; }
.akc-pa-kepala.is-biru b { color: #fff; }
.akc-pa-kepala.is-biru small { color: #CFE0FA; }
.akc-pa-kepala.is-biru .akc-pa-av { background: #fff; width: 36px; height: 36px; }

/* Komputer */
.akc-pa-pelayar { background: #fff; border: 1px solid #DCE2EC; border-radius: 16px; overflow: hidden; box-shadow: 0 22px 50px rgba(15,23,42,.12); }
.akc-pa-krom { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; background: #EEF1F6; border-bottom: 1px solid #DCE2EC; }
.akc-pa-titik { display: flex; gap: .4rem; }
.akc-pa-titik i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: #FF5F57; }
.akc-pa-titik i:nth-child(2) { background: #FEBC2E; }
.akc-pa-titik i:nth-child(3) { background: #28C840; }
.akc-pa-url { flex: 1; max-width: 520px; margin: 0 auto; background: #fff; border-radius: 8px; padding: .3rem .8rem; font-size: .76rem; color: var(--akc-text-2); display: flex; gap: .5rem; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akc-pa-isi { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.akc-pa-chat { display: flex; flex-direction: column; border-right: 1px solid #EEF1F6; }
.akc-pa-bingkai { height: calc(100vh - 330px); min-height: 500px; background: #F7F9FC; }

/* Panel soalan contoh */
.akc-pa-rel { padding: 1rem; }
.akc-pa-rel h5 { margin: 0 0 .65rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--akc-text-3); font-weight: 700; }
.akc-pa-soalan { width: 100%; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--akc-border); background: #fff; border-radius: 10px; padding: .5rem .65rem; font-size: .8rem; color: #374151; margin-bottom: .45rem; text-align: left; transition: border-color .15s, background .15s; }
.akc-pa-soalan:hover { border-color: #C3D2E8; background: #F6F8FC; }
.akc-pa-soalan > i:first-child { color: #1D5BBF; }
.akc-pa-soalan span { flex: 1; min-width: 0; }
.akc-pa-pergi { color: #B4BDCC; }
.akc-pa-soalan:hover .akc-pa-pergi { color: #1D5BBF; }
.akc-pa-nota { font-size: .72rem; color: var(--akc-text-3); margin: .3rem 0 .8rem; }
.akc-pa-tip { display: flex; gap: .55rem; align-items: flex-start; background: #F7F9FC; border-radius: 10px; padding: .6rem .7rem; font-size: .76rem; color: #374151; margin-top: .5rem; }
.akc-pa-tip > i { color: #1D5BBF; }

/* Telefon */
.akc-pa-telefon, .akc-pa-rel-telefon { display: none; }
.akc-pa[data-mod="telefon"] .akc-pa-pelayar { display: none; }
.akc-pa[data-mod="telefon"] .akc-pa-pentas { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.akc-pa[data-mod="telefon"] .akc-pa-telefon { display: block; grid-column: 2; width: 360px; height: 720px; border-radius: 46px; background: #0F172A; padding: 12px; box-shadow: 0 28px 60px rgba(15,23,42,.28); position: relative; }
.akc-pa[data-mod="telefon"] .akc-pa-rel-telefon { display: block; grid-column: 3; background: #fff; border: 1px solid var(--akc-border); border-radius: 16px; align-self: center; }
.akc-pa-takuk { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; border-radius: 99px; background: #0F172A; z-index: 3; }
.akc-pa-skrin { background: #fff; border-radius: 36px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.akc-pa-telefon .akc-pa-bingkai { flex: 1; height: auto; min-height: 0; }

/* Statistik */
.akc-pa-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.akc-pa-stat > div { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; }
.akc-pa-stat b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--akc-navy); line-height: 1.1; }
.akc-pa-stat small { font-size: .74rem; color: var(--akc-text-2); }
.akc-pa-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

@media (max-width: 1199px) { .akc-pa-isi { grid-template-columns: 1fr; } .akc-pa-isi > .akc-pa-rel { display: none; } .akc-pa-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .akc-pa[data-mod="telefon"] .akc-pa-pentas { grid-template-columns: 1fr; }
    .akc-pa[data-mod="telefon"] .akc-pa-telefon { grid-column: 1; margin: 0 auto; }
    .akc-pa[data-mod="telefon"] .akc-pa-rel-telefon { grid-column: 1; }
}
.akc-pa-soalan.is-disalin { border-color: #B5E0CA; background: #E9F7F0; }
.akc-pa-soalan.is-disalin .akc-pa-pergi { color: #13804B; }