/* Superadmin shell: Ant Design look (Laravel's superadmin SPA) over Madmin's markup. Logical properties keep RTL working. */
:root { --sa-primary: #1890ff; --sa-sider: #001529; --sa-bg: #f5f5f5; --sa-border: #f0f0f0; --sa-text: rgba(0, 0, 0, 0.88); --sa-muted: rgba(0, 0, 0, 0.45); --sa-danger: #ff4d4f; --sa-sider-width: 239px; }
body.sa-shell { display: flex; min-height: 100dvh; background: var(--sa-bg); color: var(--sa-text); font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }
.sa-shell a { color: var(--sa-primary); text-decoration: none; }
.sa-shell #sidebar { position: sticky; top: 0; inset-inline-start: 0; flex: none; width: var(--sa-sider-width); height: 100dvh; padding: 0; overflow-y: auto; background: var(--sa-sider); color: #ffffffa6; border: 0; z-index: 30; }
.sa-shell .sa-logo { display: flex; align-items: center; height: 64px; padding: 0 24px; }
.sa-shell .sa-logo-img { max-height: 32px; width: auto; }
.sa-shell #sidebar nav { display: flex; flex-direction: column; gap: 4px; padding: 1px 4px 4px; }
.sa-shell #sidebar nav a, .sa-shell #sidebar .sa-logout, .sa-shell #sidebar summary { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 24px; border-radius: 4px; color: #ffffffa6; background: transparent; border: 0; text-align: start; width: 100%; cursor: pointer; font: inherit; margin: 0; }
.sa-shell #sidebar nav a:hover, .sa-shell #sidebar .sa-logout:hover { color: #fff; background: transparent; }
.sa-shell #sidebar nav a.active { color: #fff; background: var(--sa-primary); font-weight: 400; }
.sa-shell #sidebar nav form { display: contents; }
.sa-shell #sidebar .sa-more { margin-top: 12px; }
.sa-shell #sidebar .sa-more a { height: 32px; font-size: 0.8125rem; }
.sa-shell #sidebar footer { display: none; }
.sa-shell .btn-primary, .sa-shell button[type=submit].btn-primary { background: #1890ff; border-color: #1890ff; }
/* Laravel's superadmin shell is mirrored only by its own Layout (RTL/LTR) company setting, never by the language: the layout picks dir from that setting. */
.sa-shell .sa-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-shell .sa-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; background: #fff; border-block-end: 1px solid var(--sa-border); }
.sa-shell #hamburger-menu { display: block; color: var(--sa-text); }
.sa-shell .sa-header-right { display: flex; align-items: center; gap: 16px; }
.sa-shell .sa-lang { color: var(--sa-primary); font-size: 0.875rem; }
.sa-shell .sa-user { position: relative; }
.sa-shell .sa-user summary { list-style: none; cursor: pointer; }
.sa-shell .sa-avatar { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: #c7d2fe; color: #5f63f2; font-weight: 600; }
.sa-shell .sa-user-menu { position: absolute; inset-inline-end: 0; top: 40px; min-width: 160px; background: #fff; border: 1px solid var(--sa-border); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding: 4px; z-index: 40; }
.sa-shell .sa-user-menu a, .sa-shell .sa-user-menu button { display: block; width: 100%; padding: 6px 12px; text-align: start; background: none; border: 0; color: var(--sa-text); cursor: pointer; font: inherit; }
.sa-shell main { flex: 1; padding: 0; overflow: visible; position: static; }
.sa-shell main > div:not(.sa-page) { padding: 16px; }

/* Page header (title, breadcrumb, right-hand actions) */
.sa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 24px 14px; background: #fff; border-block-end: 1px solid var(--sa-border); }
.sa-page-header h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 32px; }
.sa-breadcrumb { display: flex; gap: 6px; margin: 5px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--sa-muted); }
.sa-breadcrumb li:not(:last-child)::after { content: "-"; margin-inline-start: 6px; }
.sa-breadcrumb li:last-child { color: var(--sa-text); }
.sa-breadcrumb a { color: var(--sa-muted); }
.sa-body { display: flex; align-items: stretch; }
.sa-subnav-col { flex: none; width: 200px; background: #fff; border-inline-end: 1px solid var(--sa-border); min-height: calc(100dvh - 140px); padding-block: 4px; }
/* Laravel's settings / subscription sidebar: flush 44px rows with an icon, light blue active row. */
.sa-subnav-col a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 20px; margin: 0; border-radius: 0; color: var(--sa-text); }
.sa-subnav-col a.active { background: #e6f7ff; color: var(--sa-primary); }
.sa-content { flex: 1; min-width: 0; padding: 12px 16px 24px; }
/* Laravel: one flush white band under the header; Add at the start, a compact select + input + search group at the end. */
.sa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px -16px 16px; padding: 10px 16px; min-height: 52px; background: #fff; border-block-end: 1px solid #f0f0f0; }
.sa-toolbar .spacer { margin-inline-start: auto; }
.sa-toolbar .search { display: flex; align-items: stretch; }
.sa-toolbar .search select { height: 32px; width: 72px; min-width: 0; border: 1px solid #d9d9d9; border-inline-end: 0; border-radius: 6px 0 0 6px; padding: 0 8px; background-color: #fff; color: var(--sa-muted); text-overflow: ellipsis; }
[dir=rtl] .sa-toolbar .search select { border-radius: 0 6px 6px 0; }
.sa-toolbar .search input[type=search] { height: 32px; width: 176px; border: 1px solid #d9d9d9; border-radius: 0; padding: 0 11px; }
.sa-toolbar .search select:not([name=search_column]) + input[type=search], .sa-toolbar .search > input[type=search]:first-of-type { border-radius: 6px 0 0 6px; }
[dir=rtl] .sa-toolbar .search > input[type=search]:first-of-type { border-radius: 0 6px 6px 0; }
.sa-toolbar .search button { height: 32px; width: 32px; border: 1px solid #d9d9d9; border-inline-start: 0; border-radius: 0 6px 6px 0; background: #fff; cursor: pointer; }
[dir=rtl] .sa-toolbar .search button { border-radius: 6px 0 0 6px; }
@media (max-width: 767px) { .sa-toolbar .search input[type=search] { width: 120px; } }
.sa-card { background: #fff; border-radius: 4px; padding: 0; }
.sa-card.padded { padding: 24px; }
.sa-card-title { padding: 16px 24px; font-size: 16px; font-weight: 500; border-block-end: 1px solid var(--sa-border); display: flex; justify-content: space-between; align-items: center; }

/* Buttons (Ant) */
.sa-shell .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 15px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; color: var(--sa-text); font-size: 14px; font-weight: 400; line-height: 30px; box-shadow: none; cursor: pointer; text-decoration: none; }
.sa-shell .btn:hover { color: #40a9ff; border-color: #40a9ff; background: #fff; }
.sa-shell .btn.btn-primary, .sa-shell button[type=submit].btn-primary, .sa-shell input[type=submit].btn-primary { background: var(--sa-primary); border-color: var(--sa-primary); color: #fff; }
.sa-shell .btn.btn-primary:hover { background: #40a9ff; border-color: #40a9ff; color: #fff; }
.sa-shell .btn.btn-danger { color: var(--sa-danger); border-color: var(--sa-danger); box-shadow: none; background: #fff; }
.sa-shell .btn.btn-icon { width: 32px; padding: 0; justify-content: center; }
.sa-shell .btn.btn-secondary { box-shadow: none; }
.sa-shell .btn.active { color: var(--sa-primary); border-color: var(--sa-primary); }
.sa-shell .btn-sm { height: 24px; padding: 0 7px; line-height: 22px; font-size: 14px; }
.sa-shell form.button_to { display: inline; }

/* Tables (Ant) */
.sa-shell .table-scroll { border: 0; border-radius: 4px; background: #fff; }
.sa-shell table { border-collapse: separate; border-spacing: 0; width: 100%; }
.sa-shell table th { background: #fafafa; font-weight: 600; color: var(--sa-text); text-align: start; border-block-end: 1px solid var(--sa-border); border-inline-end: 1px solid var(--sa-border); padding: 12px 8px; white-space: nowrap; }
.sa-shell table td { padding: 12px 8px; border-block-end: 1px solid var(--sa-border); border-inline-end: 1px solid var(--sa-border); white-space: normal; vertical-align: middle; }
.sa-shell table tr { border-bottom: 0; }
.sa-shell table th a { color: var(--sa-text); display: inline-flex; align-items: center; gap: 4px; }
.sa-shell table td.actions { display: table-cell; white-space: nowrap; }
.sa-shell table td.actions > * { margin-inline-end: 6px; vertical-align: middle; }
.sa-shell table td.actions form { display: inline; }
.sa-shell .table-scroll th.label { width: 16rem; }
.sa-shell tbody tr:hover td { background: #fafafa; }
.sa-empty { text-align: center; padding: 40px 0; color: var(--sa-muted); }
.sa-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-empty-state p { margin: 0; }
.sa-shell .nav-pill, .sa-pill { display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid #b7eb8f; background: #f6ffed; color: #52c41a; border-radius: 4px; font-size: 12px; line-height: 20px; }
.sa-pill.inactive, .sa-pill.danger { border-color: #ffa39e; background: #fff1f0; color: var(--sa-danger); }
.sa-pill.warning { border-color: #ffd591; background: #fff7e6; color: #fa8c16; }
.sa-pill.info { border-color: #91d5ff; background: #e6f7ff; color: var(--sa-primary); }
.sa-module-list { margin: 0; padding-inline-start: 20px; }

/* Pagination (Ant) */
.sa-shell .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 0 8px; }
.sa-shell .pagination .pages { gap: 8px; }
.sa-shell .pagination .pages a { height: 32px; min-width: 32px; justify-content: center; padding: 0 6px; border: 1px solid transparent; box-shadow: none; background: transparent; color: var(--sa-text); border-radius: 6px; line-height: 30px; }
.sa-shell .pagination .pages a[aria-current="page"] { color: var(--sa-primary); border-color: var(--sa-primary); background: #fff; }
.sa-shell .pagination .pages a[aria-disabled="true"]:not([aria-current]) { color: var(--sa-muted); }
.sa-shell .pagination-info { order: -1; margin: 0; color: var(--sa-muted); }
.sa-shell .per-page { margin: 0; }

/* Forms (Ant) */
.sa-shell label { font-size: 14px; color: var(--sa-text); }
.sa-shell .form-group { margin-bottom: 16px; }
.sa-shell .form-group > label, .sa-shell .sa-label { display: block; margin-bottom: 8px; }
.sa-shell .sa-required::before { content: "*"; color: var(--sa-danger); margin-inline-end: 4px; }
.sa-shell [type='text'], .sa-shell [type='email'], .sa-shell [type='password'], .sa-shell [type='number'], .sa-shell [type='date'], .sa-shell [type='datetime-local'], .sa-shell [type='url'], .sa-shell [type='search'], .sa-shell input:where(:not([type])), .sa-shell textarea, .sa-shell select { width: 100%; min-height: 32px; border: 1px solid #d9d9d9; border-radius: 6px; padding: 4px 11px; background-color: #fff; line-height: 22px; }
.sa-shell textarea { min-height: 96px; }
.sa-shell [type='text']:focus, .sa-shell textarea:focus, .sa-shell select:focus, .sa-shell [type='email']:focus, .sa-shell [type='password']:focus { border-color: #40a9ff; outline: 0; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); }
.sa-shell ::placeholder { color: #bfbfbf; }
.sa-shell .form-description, .sa-shell .form-hint { color: var(--sa-primary); font-size: 12px; margin-top: 4px; }
.sa-shell input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sa-primary); }
.sa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sa-form-grid .full { grid-column: 1 / -1; }
.sa-errors { padding: 12px 16px; margin-bottom: 16px; border: 1px solid #ffccc7; background: #fff2f0; border-radius: 6px; color: var(--sa-danger); }
.sa-errors ul { margin: 6px 0 0; padding-inline-start: 20px; }
.sa-field-error { color: var(--sa-danger); font-size: 14px; margin-top: 4px; }
.sa-switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.sa-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.sa-switch span { position: absolute; inset: 0; border-radius: 100px; background: rgba(0, 0, 0, 0.25); transition: background 0.2s; cursor: pointer; }
.sa-switch span::before { content: ""; position: absolute; width: 18px; height: 18px; inset-inline-start: 2px; top: 2px; background: #fff; border-radius: 50%; transition: inset-inline-start 0.2s; }
.sa-switch input:checked + span { background: var(--sa-primary); }
.sa-switch input:checked + span::before { inset-inline-start: 24px; }

/* Drawer-style forms (Laravel adds/edits in a right-hand drawer) */
.sa-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 50; }
.sa-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(672px, 100vw); display: flex; flex-direction: column; background: #fff; z-index: 60; box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08); }
.sa-drawer-header { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-block-end: 1px solid var(--sa-border); font-size: 16px; font-weight: 500; }
.sa-drawer-header a { color: var(--sa-muted); font-size: 18px; line-height: 1; }
.sa-drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.sa-drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-block-start: 1px solid var(--sa-border); }
.sa-section-title { font-size: 16px; font-weight: 500; padding-block-end: 8px; margin: 16px 0; border-block-end: 1px solid #8c8c8c; }
.sa-hint-card { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; margin-bottom: 16px; border: 1px solid #ffccc7; background: #fff2f0; border-radius: 6px; }

/* Dashboard */
.sa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 30px 24px; }
.sa-stat { display: flex; align-items: center; gap: 28px; background: #fff; border-radius: 4px; padding: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.sa-stat-icon { display: flex; width: 60px; height: 60px; align-items: center; justify-content: center; border-radius: 10px; color: #fff; }
.sa-stat-label { color: var(--sa-muted); }
.sa-stat-value { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.sa-stat-text { display: flex; flex-direction: column; }
.sa-section { margin: 0 24px 24px; }
@media (max-width: 1024px) { .sa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mobile */
@media (max-width: 768px) {
  .sa-shell #sidebar { position: fixed; transform: translateX(-100%); transition: transform 0.2s; }
  .sa-shell #sidebar.open { transform: translateX(0); }
  [dir=rtl] .sa-shell #sidebar { transform: translateX(100%); }
  [dir=rtl] .sa-shell #sidebar.open { transform: translateX(0); }
  .sa-body { flex-direction: column; }
  .sa-subnav-col { width: 100%; min-height: 0; display: flex; overflow-x: auto; }
  .sa-form-grid { grid-template-columns: 1fr; }
  .sa-stats { grid-template-columns: 1fr; padding: 16px; }
}

/* Inline icons (the app's Tailwind utilities are not loaded in this layout) */
.sa-shell svg.h-4 { width: 1rem; height: 1rem; flex: none; }
.sa-shell .sa-logo-img { height: 32px; }
.sa-shell nav.scopes { display: flex; gap: 8px; margin: 0; }
.sa-shell .actions .btn-icon svg { display: block; }
.sa-shell .sa-user summary::-webkit-details-marker { display: none; }
.sa-shell .sa-gateway:not(:has(#enabled:checked)) .sa-gateway-fields { display: none; }
.sa-shell .sa-page-actions { display: flex; gap: 8px; align-items: center; }
.sa-shell .form-group:has(> .required) > label::before { content: "*"; color: var(--sa-danger); margin-inline-end: 4px; }
.sa-shell .form-group > .required { display: none; }
.sa-shell .sa-more-fields { margin-top: 16px; }
.sa-shell .sa-more-fields summary { cursor: pointer; color: var(--sa-primary); margin-bottom: 12px; }
.sa-shell .sa-section-title { font-size: 16px; font-weight: 500; padding-block-end: 8px; margin: 16px 0; border-block-end: 1px solid #8c8c8c; }
.sa-shell .form-input { width: 100%; }

/* Offline Requests / Transcations screens (Laravel's filter row, status tabs and approve/reject modals). */
/* Laravel: the filters are a flush white band under the breadcrumb header, compact selects at the end. */
.sa-shell .sa-filters { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; margin: -12px -16px 16px; padding: 10px 16px; background: #fff; border-block-end: 1px solid #f0f0f0; }
.sa-shell .sa-filters select { width: 180px; max-width: 100%; min-width: 0; }
.sa-shell nav.sa-tabs { display: flex; gap: 24px; border-block-end: 1px solid #f0f0f0; margin-block-end: 12px; }
.sa-shell nav.sa-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: #000000e0; border-block-end: 2px solid transparent; text-decoration: none; }
.sa-shell nav.sa-tabs a.active { color: #1890ff; border-block-end-color: #1890ff; }
.sa-shell td.empty { text-align: center; color: #00000073; }
.sa-shell .sa-status-pending { color: #d48806; } .sa-shell .sa-status-approved { color: #389e0d; } .sa-shell .sa-status-rejected { color: #cf1322; }
.sa-shell details.sa-modal { position: relative; }
.sa-shell details.sa-modal > summary { list-style: none; cursor: pointer; display: inline-block; }
.sa-shell details.sa-modal > summary::-webkit-details-marker { display: none; }
.sa-shell details.sa-approve > summary { background: #87d068; border-color: #87d068; color: #fff; }
.sa-shell details.sa-reject > summary { background: #f50; border-color: #f50; color: #fff; }
.sa-shell details.sa-modal[open] > .sa-modal-body { position: fixed; inset-block-start: 20%; inset-inline: 0; margin-inline: auto; width: min(420px, 90vw); background: #fff; color: #000000e0; padding: 24px; border-radius: 8px; box-shadow: 0 6px 24px #0003; z-index: 50; }
.sa-shell .sa-modal-body .sa-descriptions { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-block-end: 12px; }
.sa-shell .sa-modal-body .sa-form { display: flex; flex-direction: column; gap: 12px; }
.sa-shell .sa-modal-body .sa-form label { display: flex; flex-direction: column; gap: 4px; }
.sa-shell .per-page select { width: auto; min-width: 100px; }
.sa-shell svg.sa-replied-yes { color: #52c41a; }
.sa-shell svg.sa-replied-no { color: #ff4d4f; }
.sa-shell .sa-alert { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 16px; padding: 16px 24px; border: 1px solid #ffccc7; border-radius: 2px; background: #fff2f0; }
.sa-shell .sa-alert > svg { flex: none; margin-block-start: 2px; color: #ff4d4f; font-size: 24px; }
.sa-shell .sa-alert-body { flex: 1; min-width: 0; }
.sa-shell .sa-alert-message { font-size: 16px; color: #000000e0; }
.sa-shell .sa-alert-description { margin-block-start: 4px; font-size: 14px; color: #000000e0; }
.sa-shell main > div.sa-body:not(.sa-page) { padding: 0; }
.sa-toolbar .search select { padding-inline-end: 20px; background-position: right 4px center; }
[dir=rtl] .sa-toolbar .search select { background-position: left 4px center; }
.sa-shell main > div.sa-page-header:not(.sa-page) { padding: 16px 16px 12px; }

/* Laravel's lavender silhouette (images/user.png) instead of initials; the letter stays for assistive tech and tests. */
.sa-shell .sa-avatar { font-size: 0; color: transparent; background-color: #e0eaff; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Crect width='500' height='500' fill='%23e0eaff'/%3E%3Ccircle cx='250' cy='194' r='102' fill='%237d8fff'/%3E%3Cpath d='M72 500V428a105 105 0 0 1 105-105h14c17 9 37 15 59 15s42-6 59-15h14a105 105 0 0 1 105 105v72z' fill='%237d8fff'/%3E%3C/svg%3E"); }
.sa-shell .sa-avatar-sm { width: 28px; height: 28px; flex: none; }
.sa-shell .inline-flex-center { display: inline-flex; align-items: center; gap: 8px; }