/* ========================================
   ADMIN SHARED STYLES - Modern Design System
   Consistent design for all admin pages
   Uses CSS custom properties from _design-tokens.css
   ======================================== */

/* Page Layout */
.admin-page {
    background: var(--color-bg-secondary);
    min-height: 100vh;
    width: 100%;
    /* Content padding is applied globally via `.app-body--content` so all pages match. */
    padding: 0;
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
}

/* One radius system for admin form controls */
.admin-page :is(
    .admin-form-input,
    .admin-input-simple,
    .admin-form-select,
    .admin-search-input,
    .app-select-trigger,
    .app-datepicker,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    select,
    textarea
) {
    border-radius: var(--radius-sm);
}

.admin-container {
    padding: 0;
}

/* Page Header */
.admin-header {
    padding-top: 24px;
    padding-bottom: 0;
}

.admin-page-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
    margin: var(--space-5) 0 0 0;
    font-family: var(--font-family-base);
}

.admin-page-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: var(--space-1) 0 var(--space-6) 0;
    line-height: var(--line-height-normal);
    font-family: var(--font-family-base);
    letter-spacing: -0.01em;
}

/* Cards */
.admin-card {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    position: relative;
    overflow: visible;
    transition: box-shadow var(--transition-apple);
}

.admin-card:hover {
    box-shadow: var(--shadow-md);
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);  /* 16px */
}

.admin-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-family-base);
}

/* Dashboard Cards */
.admin-dashboard-card {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-apple);
}

.admin-dashboard-card:hover {
    box-shadow: var(--shadow-md);
}

.admin-dashboard-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-family-base);
}

.admin-dashboard-card-subtitle {
    font-size: var(--font-size-sm);  /* ~14px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;  /* 0 0 16px 0 */
    font-family: var(--font-family-base);
}

.admin-dashboard-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);  /* 12px - slightly adjusted from 10px */
}

.admin-dashboard-link {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: var(--radius-full);
    padding: 8px 16px;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-apple-fast), color var(--transition-apple-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
    letter-spacing: -0.01em;
}

.admin-dashboard-link:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
    box-shadow: none;
}

/* Alert Messages */
.admin-alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    margin-bottom: var(--space-4);
    border: none;
    box-shadow: var(--shadow-sm);
}

.admin-alert.success {
    background: var(--gradient-success);
    color: var(--color-success);
}

.admin-alert.error {
    background: var(--gradient-error);
    color: var(--color-error);
}

.admin-alert.info {
    background: var(--gradient-info);
    color: var(--color-info);
}

.admin-alert.warning {
    background: var(--gradient-warning);
    color: var(--color-warning);
}

/* Loading State */
.admin-loading {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    font-weight: 400;
    font-family: var(--font-family-base);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* Form Rows */
.admin-form-row {
    display: flex;
    gap: var(--space-5);  /* 20px */
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Form Group */
.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    max-width: 368px;
    position: relative;
}

.admin-form-group.full-width {
    max-width: 100%;
}

/* Form Label */
.admin-form-label {
    font-size: 11px;
    font-weight: 500;
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0 0 0 14px;
    font-family: var(--font-family-base);
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

/* Form Input */
.admin-form-input {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 24px 14px 8px 14px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    transition: border-color var(--transition-apple-fast), box-shadow var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.admin-form-input::placeholder {
    color: var(--color-text-muted);
}

.admin-form-input:focus {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    background: var(--color-bg-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

.admin-form-input:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Simple Input (without floating label) */
.admin-input-simple {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    transition: border-color var(--transition-apple-fast), box-shadow var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.admin-input-simple::placeholder {
    color: var(--color-text-muted);
}

.admin-input-simple:focus {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    background: var(--color-bg-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

/* Form Select */
.admin-form-select {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 40px 0 14px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    transition: border-color var(--transition-apple-fast), box-shadow var(--transition-apple-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.admin-form-select:focus {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    background-color: var(--color-bg-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

/* Textarea */
.admin-form-textarea {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    resize: vertical;
    transition: border-color var(--transition-apple-fast), box-shadow var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.admin-form-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    background: var(--color-bg-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

/* Checkbox & Radio
   Admin uses "switch rows" for booleans (same style as Admin Notifications modal). */
.admin-form-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    cursor: pointer;
    user-select: none;
    /* Most markup is `input` then `label text`.
       Row-reverse puts the toggle on the right without requiring markup changes. */
    flex-direction: row-reverse;
}

/* Compact variant for dense lists (e.g., multi-select dropdowns). */
.admin-form-check--compact {
    padding: 8px 12px;
    border-radius: var(--radius-md);
}

/* Treat legacy checkbox row wrappers the same way (many admin modals use these). */
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check),
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    cursor: pointer;
    user-select: none;
    flex-direction: row-reverse;
}

/* Switch control (overrides global `wwwroot/Styles/Inputs.css` checkbox SVG). */
.admin-standard input[type="checkbox"].admin-form-check-input,
.admin-standard input[type="checkbox"].admin-checkbox,
.admin-standard input[type="checkbox"].form-check-input,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"],
.modal-container input[type="checkbox"].admin-form-check-input,
.modal-container input[type="checkbox"].admin-checkbox,
.modal-container input[type="checkbox"].form-check-input,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.10);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-apple-fast), border-color var(--transition-apple-fast), opacity var(--transition-apple-fast);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.admin-standard input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact,
.admin-standard input[type="checkbox"].admin-checkbox.admin-form-check-input--compact,
.modal-container input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact,
.modal-container input[type="checkbox"].admin-checkbox.admin-form-check-input--compact {
    width: 40px;
    height: 24px;
}

.admin-standard input[type="checkbox"].admin-form-check-input::before,
.admin-standard input[type="checkbox"].admin-form-check-input:checked::before,
.admin-standard input[type="checkbox"].admin-checkbox::before,
.admin-standard input[type="checkbox"].admin-checkbox:checked::before,
.admin-standard input[type="checkbox"].form-check-input::before,
.admin-standard input[type="checkbox"].form-check-input:checked::before,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]::before,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked::before,
.modal-container input[type="checkbox"].admin-form-check-input::before,
.modal-container input[type="checkbox"].admin-form-check-input:checked::before,
.modal-container input[type="checkbox"].admin-checkbox::before,
.modal-container input[type="checkbox"].admin-checkbox:checked::before,
.modal-container input[type="checkbox"].form-check-input::before,
.modal-container input[type="checkbox"].form-check-input:checked::before,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]::before,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked::before {
    /* Inputs.css injects a checkbox SVG via ::before when checked; kill it. */
    content: "" !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    transform: none !important;
}

.admin-standard input[type="checkbox"].admin-form-check-input::after,
.admin-standard input[type="checkbox"].admin-checkbox::after,
.admin-standard input[type="checkbox"].form-check-input::after,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]::after,
.modal-container input[type="checkbox"].admin-form-check-input::after,
.modal-container input[type="checkbox"].admin-checkbox::after,
.modal-container input[type="checkbox"].form-check-input::after,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-bg-primary);
    /* Lighter shadow reads more "precise" and avoids the knob looking visually low. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translate(0, -50%);
}

.admin-standard input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact::after,
.admin-standard input[type="checkbox"].admin-checkbox.admin-form-check-input--compact::after,
.modal-container input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact::after,
.modal-container input[type="checkbox"].admin-checkbox.admin-form-check-input--compact::after {
    width: 20px;
    height: 20px;
}

.admin-standard input[type="checkbox"].admin-form-check-input:checked,
.admin-standard input[type="checkbox"].admin-checkbox:checked,
.admin-standard input[type="checkbox"].form-check-input:checked,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked,
.modal-container input[type="checkbox"].admin-form-check-input:checked,
.modal-container input[type="checkbox"].admin-checkbox:checked,
.modal-container input[type="checkbox"].form-check-input:checked,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked {
    background: var(--color-primary, #1A7CCA);
    border-color: rgba(0, 0, 0, 0.08);
}

.admin-standard input[type="checkbox"].admin-form-check-input:checked::after,
.admin-standard input[type="checkbox"].admin-checkbox:checked::after,
.admin-standard input[type="checkbox"].form-check-input:checked::after,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked::after,
.modal-container input[type="checkbox"].admin-form-check-input:checked::after,
.modal-container input[type="checkbox"].admin-checkbox:checked::after,
.modal-container input[type="checkbox"].form-check-input:checked::after,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:checked::after {
    transform: translate(18px, -50%);
}

.admin-standard input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact:checked::after,
.admin-standard input[type="checkbox"].admin-checkbox.admin-form-check-input--compact:checked::after,
.modal-container input[type="checkbox"].admin-form-check-input.admin-form-check-input--compact:checked::after,
.modal-container input[type="checkbox"].admin-checkbox.admin-form-check-input--compact:checked::after {
    transform: translate(16px, -50%);
}

.admin-standard input[type="checkbox"].admin-form-check-input:focus-visible,
.admin-standard input[type="checkbox"].admin-checkbox:focus-visible,
.admin-standard input[type="checkbox"].form-check-input:focus-visible,
.admin-standard :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:focus-visible,
.modal-container input[type="checkbox"].admin-form-check-input:focus-visible,
.modal-container input[type="checkbox"].admin-checkbox:focus-visible,
.modal-container input[type="checkbox"].form-check-input:focus-visible,
.modal-container :is(.modern-checkbox, .modal-checkbox-row, .form-check) input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.15);
}

.admin-form-check-label {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    letter-spacing: -0.01em;
}

/* Buttons */
.admin-btn {
    border-radius: var(--radius-sm);
    padding: 0 var(--space-5);
    min-height: 36px;
    height: 40px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--transition-apple-fast), opacity var(--transition-apple-fast);
    border: none;
    letter-spacing: -0.01em;
}

.admin-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.admin-btn-primary {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    box-shadow: none;
}

.admin-btn-primary:hover:not(:disabled) {
    opacity: 0.85;
}

.admin-btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: none;
}

.admin-btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

.admin-btn-outline {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
    border: none;
    box-shadow: none;
}

.admin-btn-outline:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
    box-shadow: none;
}

.admin-btn-danger {
    background: var(--color-error);
    color: var(--color-text-inverse);
    box-shadow: none;
}

.admin-btn-danger:hover:not(:disabled) {
    opacity: 0.85;
}

.admin-btn-sm {
    height: 36px;
    padding: 0 var(--space-4);
    font-size: 13px;
    border-radius: var(--radius-sm);
}

/* Extra small buttons for table actions */
.admin-btn-xs {
    height: 32px;
    width: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.admin-btn-icon {
    width: 16px;
    height: 16px;
}

/* ========================================
   TABLE ROW ACTION BUTTONS
   Compact action button group for table rows
   ======================================== */

.admin-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Compact icon-only action button */
.admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-apple-fast), color var(--transition-apple-fast);
    flex-shrink: 0;
    box-shadow: none;
}

.admin-action-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.admin-action-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Play/Activate button */
.admin-action-btn--play {
    color: var(--color-emerald);
}

.admin-action-btn--play:hover {
    background: rgba(16, 185, 129, 0.08);
    color: var(--color-success);
    box-shadow: none;
}

/* Pause button */
.admin-action-btn--pause {
    color: var(--color-amber);
}

.admin-action-btn--pause:hover {
    background: rgba(245, 158, 11, 0.08);
    color: var(--color-warning);
    box-shadow: none;
}

/* Edit button */
.admin-action-btn--edit {
    color: var(--color-text-muted);
}

.admin-action-btn--edit:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
    box-shadow: none;
}

/* Delete button */
.admin-action-btn--delete {
    color: var(--color-error);
}

.admin-action-btn--delete:hover {
    background: rgba(220, 38, 38, 0.06);
    color: var(--color-error);
    box-shadow: none;
}

/* Stats button */
.admin-action-btn--stats {
    color: var(--color-violet);
}

.admin-action-btn--stats:hover {
    background: rgba(139, 92, 246, 0.06);
    color: var(--color-violet-dark);
    box-shadow: none;
}

/* Save button */
.admin-action-btn--save {
    color: var(--color-emerald);
}

.admin-action-btn--save:hover {
    background: rgba(16, 185, 129, 0.06);
    color: var(--color-success);
    box-shadow: none;
}

/* Form Actions */
.admin-form-actions {
    display: flex;
    gap: var(--space-4);  /* 16px */
    align-items: center;
    padding-top: var(--space-2);  /* 8px */
}

/* Search Section */
.admin-search-card {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
    position: relative;
    overflow: visible;
    transition: box-shadow var(--transition-apple);
}


.admin-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);  /* 16px */
}

.admin-search-header:not(:last-child) {
    margin-bottom: var(--space-5);  /* 20px */
}

.admin-search-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-family-base);
}

.admin-search-form {
    display: flex;
    gap: var(--space-4);  /* 16px */
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-search-input-wrapper {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    position: relative;
    display: flex;
    align-items: center;
}

.admin-search-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.admin-search-input {
    background: var(--color-bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 40px 0 44px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    transition: border-color var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.admin-search-input::placeholder {
    color: var(--color-text-muted);
}

.admin-search-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.15);
    background: var(--color-bg-primary);
    box-shadow: none;
}

.admin-search-clear {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    border-radius: 6px;
    transition: var(--transition-normal);
}

.admin-search-clear:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-dark-tertiary);
}

.admin-search-clear svg {
    width: 16px;
    height: 16px;
}

.admin-search-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Table Styles */
.admin-table-container {
    margin-top: var(--space-4);
}

.admin-table-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-table-header-cell {
    font-family: var(--font-family-base);
    font-weight: var(--table-header-font-weight);
    font-size: var(--table-header-font-size);
    line-height: var(--table-line-height);
    letter-spacing: var(--table-letter-spacing);
    text-transform: none;
    color: var(--color-text-muted);
    padding: 0 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.admin-table-header-cell:first-child {
    padding-left: 24px;
}

.admin-table-header-cell:last-child {
    padding-right: 24px;
    text-align: left;
}

.admin-table-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-table-row {
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-3) 0 0;
    box-shadow: none;
    border: none;
    transition: background var(--transition-apple-fast);
}

.admin-table-row:hover {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: none;
    transform: none;
}

.admin-table-row:focus-visible {
    outline: none;
    background: rgba(26, 124, 202, 0.06);
    box-shadow: inset 0 0 0 2px rgba(26, 124, 202, 0.18);
}

.admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.admin-table-row-content {
    display: flex;
    align-items: center;
    padding: var(--space-4) 0;
    flex: 1;
    min-width: 0;
}

.admin-table-cell {
    font-family: var(--font-family-base);
    font-weight: var(--table-body-font-weight);
    font-size: var(--table-body-font-size);
    line-height: var(--table-line-height);
    color: var(--color-text-secondary);
    padding: 0 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
    letter-spacing: var(--table-letter-spacing);
}

.admin-table-cell:first-child {
    padding-left: 24px;
}

.admin-table-cell-primary {
    font-family: var(--font-family-base);
    font-weight: var(--table-body-font-weight);
    font-size: var(--table-body-font-size);
    line-height: var(--table-line-height);
    color: var(--color-text-primary);
    padding: 0 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
    letter-spacing: var(--table-letter-spacing);
}

.admin-table-cell-primary:first-child {
    padding-left: 24px;
}

.admin-table-cell-secondary {
    font-family: var(--font-family-base);
    font-weight: var(--table-body-font-weight);
    font-size: var(--table-body-font-size);
    line-height: var(--table-line-height);
    color: var(--color-text-muted);
    padding: 0 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
    letter-spacing: var(--table-letter-spacing);
}

/* Modal typography/buttons/surfaces across admin pages */
.admin-page :is(.modal-content, .an-modal) {
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
}

.admin-page :is(.modal-header, .an-modal-header) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.admin-page :is(.modal-footer) {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.admin-page :is(.modal-title, .an-modal-title-row h3) {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.admin-table-cell-secondary:first-child {
    padding-left: 24px;
}

.admin-table-empty {
    color: var(--color-text-secondary);
    padding: 48px 24px;
    text-align: center;
    width: 100%;
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: 400;
}

/* Edit Button */
.admin-edit-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--transition-apple-fast);
    flex-shrink: 0;
}

.admin-edit-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
}

.admin-edit-btn-text {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

.admin-edit-btn:hover .admin-edit-btn-text {
    color: var(--color-text-primary);
}

.admin-edit-btn-icon {
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
}

.admin-edit-btn:hover .admin-edit-btn-icon {
    color: var(--color-text-secondary);
}

/* ========================================
   SMART AUTO-GRID TABLE SYSTEM
   Automatically calculates equal column widths
   Usage: Add .admin-auto-grid and .admin-grid-cols-N
   ======================================== */

/* Base auto-grid - equal columns */
.admin-auto-grid {
    display: grid;
    align-items: center;
    gap: 0;
    width: 100%;
}

/* Column count modifiers - using equal fractions */
.admin-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.admin-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.admin-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.admin-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.admin-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }

/* Auto-grid cell overflow handling - CRITICAL for alignment */
.admin-auto-grid .admin-table-cell,
.admin-auto-grid .admin-table-cell-primary,
.admin-auto-grid .admin-table-cell-secondary,
.admin-auto-grid .admin-table-header-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 12px;
    text-align: left;
}

/* Consistent first/last cell padding for auto-grid */
.admin-auto-grid .admin-table-cell:first-child,
.admin-auto-grid .admin-table-cell-primary:first-child,
.admin-auto-grid .admin-table-cell-secondary:first-child,
.admin-auto-grid .admin-table-header-cell:first-child {
    padding-left: 24px;
}

.admin-auto-grid .admin-table-cell:last-child,
.admin-auto-grid .admin-table-cell-primary:last-child,
.admin-auto-grid .admin-table-cell-secondary:last-child,
.admin-auto-grid .admin-table-header-cell:last-child {
    padding-right: 24px;
}

/* Auto-grid actions column alignment - actions stay right-aligned */
.admin-auto-grid .admin-grid-actions {
    justify-self: end;
    text-align: right;
    padding-right: 16px;
}

/* Auto-grid header styling */
.admin-auto-grid.admin-table-header {
    display: grid;
    padding: var(--space-4, 16px) 0;
    margin-bottom: 0;
}

/* Auto-grid row content styling */
.admin-auto-grid.admin-table-row-content {
    display: grid;
    padding: var(--space-4, 16px) 0;
}

/* Tablet: horizontal scroll if needed */
@media (max-width: 1023.98px) {
    .admin-table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table-container:has(.admin-auto-grid) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-grid-cols-3 { min-width: 360px; }
    .admin-grid-cols-4 { min-width: 480px; }
    .admin-grid-cols-5 { min-width: 600px; }
    .admin-grid-cols-6 { min-width: 720px; }
    .admin-grid-cols-7 { min-width: 840px; }
    .admin-grid-cols-8 { min-width: 960px; }
    .admin-grid-cols-9 { min-width: 1080px; }
    .admin-grid-cols-10 { min-width: 1200px; }
}

/* Mobile: stack to cards with labels */
/* ----------------------------------------
   MOBILE — Horizontal scroll table
   Apple 2026: clean swipeable table, not card inflation.
   The table scrolls horizontally with momentum/inertia.
   ---------------------------------------- */
@media (max-width: 767.98px) {
    /* Card wrapper becomes scroll container on mobile */
    .admin-table-card {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Non-card tables: container scrolls edge-to-edge */
    .admin-container > .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4);
    }

    /* Keep header visible — compact it */
    .admin-auto-grid.admin-table-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--color-bg-secondary);
    }

    .admin-table-header-cell {
        font-size: var(--table-header-font-size);
        font-weight: var(--table-header-font-weight);
        line-height: var(--table-line-height);
        letter-spacing: var(--table-letter-spacing);
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* Min-widths inherited from tablet breakpoint via admin-grid-cols-N classes.
       Fallback min-width for generic auto-grids: */
    .admin-auto-grid.admin-table-row-content,
    .admin-auto-grid.admin-table-header {
        min-width: 600px;
    }

    /* Compact rows */
    .admin-table-row-content {
        padding: 0;
    }

    .admin-auto-grid .admin-table-cell,
    .admin-auto-grid .admin-table-cell-primary,
    .admin-auto-grid .admin-table-cell-secondary {
        font-size: var(--table-body-font-size);
        font-weight: var(--table-body-font-weight);
        line-height: var(--table-line-height);
        letter-spacing: var(--table-letter-spacing);
        padding: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-auto-grid .admin-table-cell-primary {
        font-size: var(--table-body-font-size);
        font-weight: var(--table-body-font-weight);
    }

    /* No data-label pseudo-elements — header is visible */
    .admin-auto-grid .admin-table-cell::before,
    .admin-auto-grid .admin-table-cell-primary::before,
    .admin-auto-grid .admin-table-cell-secondary::before {
        content: none;
    }

    /* Card rows — flat style */
    .admin-table-container:has(.admin-auto-grid) .admin-table-row {
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: none;
    }

    .admin-table-rows {
        gap: 0;
    }

    .admin-auto-grid .admin-table-row:not(:last-child) {
        box-shadow: inset 0 -1px 0 var(--color-bg-tertiary);
    }

    /* Actions column */
    .admin-auto-grid .admin-grid-actions {
        padding: 10px;
    }

    .admin-auto-grid .admin-grid-actions::before {
        content: none;
    }
}

/* Delete Button */
.admin-delete-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background var(--transition-apple-fast);
    flex-shrink: 0;
    box-shadow: none;
}

.admin-delete-btn:hover {
    background: rgba(220, 38, 38, 0.06);
    box-shadow: none;
}

.admin-delete-btn-text {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    color: var(--color-error);
    letter-spacing: -0.01em;
}

.admin-delete-btn:hover .admin-delete-btn-text {
    color: var(--color-error);
}

.admin-delete-btn-icon {
    width: 15px;
    height: 15px;
    color: var(--color-error);
}

.admin-delete-btn:hover .admin-delete-btn-icon {
    color: var(--color-error);
}

/* Pagination */
/* Pagination Container */
.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-5, 20px);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.admin-pagination-left {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-shrink: 0;
}

.admin-pagination-info {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.admin-pagination-size {
    display: flex;
    align-items: center;
}

/* Pagination Controls */
.admin-pagination-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.admin-pagination-pages {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 2px;
}

.admin-pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-muted);
    transition: background var(--transition-apple-fast), color var(--transition-apple-fast);
    position: relative;
}

.admin-pagination-btn:hover:not(:disabled):not(.active) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-primary);
}

.admin-pagination-btn.active {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    font-weight: 500;
    box-shadow: none;
}

.admin-pagination-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.admin-pagination-nav {
    color: var(--color-text-muted);
}

.admin-pagination-nav:hover:not(:disabled) {
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.04);
}

.admin-pagination-nav svg {
    flex-shrink: 0;
}

.admin-pagination-ellipsis {
    min-width: 32px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

/* Mobile Pagination Nav */
.admin-pagination-mobile-nav {
    display: none;
    align-items: center;
    gap: var(--space-2, 8px);
}

.admin-pagination-mobile-info {
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark-tertiary);
    white-space: nowrap;
    min-width: 48px;
    text-align: center;
}

/* Page Size Select Dropdown */
.admin-page-size-select {
    height: 32px;
    padding: 0 26px 0 10px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.admin-page-size-select:hover {
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--color-text-secondary);
}

.admin-page-size-select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

/* Responsive Pagination */
@media (max-width: 767.98px) {
    .admin-pagination {
        flex-wrap: wrap;
        gap: var(--space-3, 12px);
    }

    .admin-pagination-controls {
        display: none;
    }

    .admin-pagination-mobile-nav {
        display: flex;
    }

    .admin-pagination-left {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .admin-pagination {
        padding: var(--space-3, 12px);
    }

    .admin-pagination-left {
        flex-direction: column;
        gap: var(--space-2, 8px);
        align-items: stretch;
    }

    .admin-pagination-info {
        text-align: center;
    }

    .admin-page-size-select {
        width: 100%;
    }
}

/* Status Badges */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-family-base);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.admin-badge-success {
    background: var(--gradient-success);
    color: var(--color-success);
}

.admin-badge-error {
    background: var(--gradient-error);
    color: var(--color-error);
}

.admin-badge-warning {
    background: var(--gradient-warning);
    color: var(--color-warning);
}

.admin-badge-info {
    background: var(--gradient-info);
    color: var(--color-info);
}

.admin-badge-neutral {
    background: var(--gradient-neutral);
    color: var(--color-text-secondary);
}

/* Modal Styles */
.admin-modal-error {
    background: var(--gradient-error);
    color: var(--color-error);
    border: none;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
    font-family: var(--font-family-base);
    box-shadow: var(--shadow-sm);
}

.admin-modal-success {
    background: var(--gradient-success);
    color: var(--color-success);
    border: none;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
    font-family: var(--font-family-base);
    box-shadow: var(--shadow-sm);
}

/* Divider */
.admin-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: var(--space-5) 0;
    border: none;
}

/* Empty State */
.admin-empty-state {
    text-align: center;
    padding: var(--space-20) var(--space-8);  /* 80px 32px */
}

.admin-empty-state-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

.admin-empty-state-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1) 0;
    letter-spacing: -0.01em;
}

.admin-empty-state-text {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ========================================
   RESPONSIVE TABLE WRAPPER
   Enables horizontal scroll on small screens
   ======================================== */

.admin-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table-responsive::-webkit-scrollbar {
    height: 8px;
}

.admin-table-responsive::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.admin-table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 4px;
}

.admin-table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Minimum table width to prevent column squishing */
.admin-table-responsive .admin-table-container {
    min-width: 600px;
}

/* ========================================
   ATSK ENTERPRISE UI - Bootstrap Grid Helpers
   ======================================== */

/* Page wrapper for all admin pages */
.admin-page-wrapper {
    background: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-secondary) 100%);
    min-height: 100vh;
    width: 100%;
}

/* Consistent content card that works with Bootstrap grid */
.atsk-content-card {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

/* Form control consistent sizing */
.atsk-form-control {
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--color-bg-secondary);
    font-family: var(--font-family-base);
    font-size: 14px;
    transition: border-color var(--transition-apple-fast);
    letter-spacing: -0.01em;
}

.atsk-form-control:focus {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: none;
    background: var(--color-bg-primary);
}

/* Touch-friendly button sizing */
.atsk-btn-touch {
    min-height: 44px;
    min-width: 44px;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .admin-page-title {
        font-size: var(--font-size-3xl);  /* ~28-32px */
        line-height: 40px;
        margin-left: var(--space-6);  /* 24px */
    }

    .admin-page-subtitle {
        margin-left: var(--space-6);  /* 24px */
    }

    .admin-container {
        padding: var(--space-6) 0 0 0;  /* top only — .admin-page handles horizontal */
    }

    .admin-form-group {
        max-width: 100%;
    }

    .admin-search-input-wrapper {
        max-width: 100%;
    }

    .admin-table-header {
        display: none;
    }

    .admin-table-row {
        flex-direction: column;
        padding: var(--space-4);  /* 16px */
    }

    .admin-table-row-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);  /* 8px */
        width: 100%;
    }

    .admin-table-cell,
    .admin-table-cell-primary,
    .admin-table-cell-secondary {
        width: 100%;
        padding: var(--space-1) 0;  /* 4px 0 */
    }

    .admin-edit-btn,
    .admin-delete-btn {
        align-self: flex-end;
        margin-top: var(--space-3);  /* 12px */
    }
}

@media (max-width: 767.98px) {
    .admin-header {
        padding-top: var(--space-5);
    }

    .admin-page {
        padding: 0;
    }

    .admin-page-title {
        font-size: var(--font-size-2xl);
        line-height: 36px;
        margin-left: var(--space-4);
    }

    .admin-page-subtitle {
        font-size: var(--font-size-sm);
        margin-left: var(--space-4);
    }

    .admin-container {
        padding: var(--space-4) 0 0 0;  /* top only — .admin-page handles horizontal */
    }

    .admin-card,
    .admin-search-card {
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }

    .admin-form-row,
    .admin-search-form {
        flex-direction: column;
        gap: var(--space-4);  /* 16px */
    }

    .admin-form-group,
    .admin-search-input-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }

    .admin-form-actions {
        flex-direction: column;
        width: 100%;
    }

    .admin-btn {
        width: 100%;
    }

    .admin-search-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);  /* 12px */
    }

    .admin-search-controls {
        flex-direction: column;
        width: 100%;
    }

    .admin-search-controls .admin-search-input-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .admin-search-controls .admin-btn {
        width: 100%;
    }

    .admin-pagination {
        flex-wrap: wrap;
        gap: var(--space-3, 12px);
    }

    .admin-pagination-controls {
        display: none;
    }

    .admin-pagination-mobile-nav {
        display: flex;
    }

    .admin-dashboard-card {
        padding: var(--space-5);  /* 20px */
    }
}

@media (max-width: 575.98px) {
    .admin-header {
        padding-top: var(--space-4);  /* 16px */
    }

    .admin-page-title {
        font-size: var(--font-size-2xl);  /* 24px */
        line-height: var(--space-8);  /* 32px */
    }

    .admin-card,
    .admin-search-card {
        padding: var(--space-4);
        gap: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .admin-card-title,
    .admin-search-title {
        font-size: 17px;
    }

    .admin-form-input,
    .admin-input-simple,
    .admin-form-select {
        height: 44px;
        border-radius: var(--radius-md);
    }

    .admin-btn {
        height: 44px;
        font-size: var(--font-size-sm);
        border-radius: var(--radius-md);
    }

    .admin-btn-sm {
        height: 36px;
        font-size: var(--font-size-sm);
    }
}

/* Form Grid Layout */
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Checkbox Styles */
.admin-checkbox-label {
    /* Back-compat: treat legacy admin checkbox labels as switch rows. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    cursor: pointer;
    user-select: none;
    flex-direction: row-reverse;
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

/* Form Hint */
.admin-form-hint {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Static Label (non-floating, for use with admin-input-simple) */
.admin-label-static {
    font-family: var(--font-family-base);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    display: block;
}

/* Form Group for Static Labels */
.admin-form-group-static {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 368px;
}

.admin-form-group-static.full-width {
    max-width: 100%;
}

/* Two Column Grid Layout */
.admin-two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);  /* 24px */
}

@media (max-width: 1023px) {
    .admin-two-column-grid {
        grid-template-columns: 1fr;
    }
}

/* Column Form Layout */
.admin-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);  /* 16px */
    padding: var(--space-4) 0;  /* 16px 0 */
}

.admin-form-column .admin-form-group-static {
    max-width: 100%;
}

/* ========================================
   MOBILE ACTION MENU
   Dropdown menu for table row actions on mobile
   ======================================== */

.mobile-action-menu-container {
    position: relative;
    display: none;
}

.mobile-action-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--glass-bg-light);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-apple-fast);
    box-shadow: var(--shadow-xs);
}

.mobile-action-trigger:hover,
.mobile-action-trigger.active {
    background: var(--color-bg-secondary);
    color: var(--color-dark-tertiary);
    box-shadow: var(--shadow-sm);
}

.mobile-action-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    box-shadow: var(--shadow-float-elevated);
    z-index: 100;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 10px;
    background: var(--color-bg-secondary);
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    width: 100%;
    text-align: left;
}

.mobile-action-item:hover {
    background: var(--color-primary-light, #EBF5FF);
}

.mobile-action-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.mobile-action-item:hover .mobile-action-icon {
    color: var(--color-primary, #1A7CCA);
}

.mobile-action-text {
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-dark-tertiary);
}

.mobile-action-item:hover .mobile-action-text {
    color: var(--color-primary, #1A7CCA);
}

/* Show mobile action menu only on mobile */
@media (max-width: 767.98px) {
    .mobile-action-menu-container {
        display: block;
    }

    /* Hide desktop action buttons on mobile */
    .admin-grid-actions .desktop-actions {
        display: none !important;
    }

    .admin-grid-actions {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

/* Desktop: hide mobile menu, show regular buttons */
@media (min-width: 768px) {
    .mobile-action-menu-container {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .admin-form-input,
    .admin-input-simple,
    .admin-form-select,
    .admin-form-textarea,
    .admin-btn,
    .admin-edit-btn,
    .admin-delete-btn,
    .admin-pagination-btn,
    .admin-pagination-nav,
    .admin-page-size-select,
    .admin-table-row,
    .admin-card,
    .admin-search-card,
    .admin-dashboard-card,
    .admin-action-btn,
    .admin-dashboard-link,
    .mobile-action-trigger,
    .mobile-action-item {
        transition: none;
    }

    .admin-btn-primary:hover:not(:disabled),
    .admin-btn-danger:hover:not(:disabled),
    .admin-table-row:hover {
        transform: none;
    }
}

/* ----------------------------------------
   CODE BADGE
   Inline code/identifier styling
   ---------------------------------------- */
.admin-code-badge {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-mono);
    color: var(--color-text-secondary);
}

/* Tables should not mix font families (avoid per-glyph fallback for localized text in "code" pills). */
.admin-table-card code,
.admin-table-card .admin-code-badge,
.admin-table-container code,
.admin-table-container .admin-code-badge {
    font-family: var(--font-family-base) !important;
}

/* Table typography: keep one font family for all table content. */
.admin-table-card,
.admin-table-container {
    font-family: var(--font-family-base);
}

.admin-table-card *,
.admin-table-container * {
    font-family: inherit !important;
}

/* ----------------------------------------
   STATS GRID
   Dashboard statistics cards layout
   ---------------------------------------- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.admin-stat-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    color: white;
}

.admin-stat-card--success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark, #059669) 100%);
}

.admin-stat-card--warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark, #d97706) 100%);
}

.admin-stat-card--info {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark, #2563eb) 100%);
}

.admin-stat-card--purple {
    background: linear-gradient(135deg, var(--color-violet) 0%, var(--color-violet-dark) 100%);
}

.admin-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.admin-stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.9;
}

/* ----------------------------------------
   SECTION HEADINGS
   Modal/form section titles
   ---------------------------------------- */
.admin-section-heading {
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.admin-section-heading--spaced {
    margin-top: var(--space-4);
}

/* ----------------------------------------
   MODAL SCROLL AREA
   Scrollable modal content
   ---------------------------------------- */
.admin-modal-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: var(--space-2);
}

/* ----------------------------------------
   TWO-COLUMN GRID
   Form layouts with two equal columns
   ---------------------------------------- */
.admin-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 576px) {
    .admin-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   FORM ACTIONS (Modal Footer)
   Modal form button container
   ---------------------------------------- */
.admin-form-actions--bordered {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: none;
}

/* ----------------------------------------
   PERMISSION CARD STYLES
   For roles/permissions modal
   ---------------------------------------- */
.admin-permission-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-float);
}

.admin-permission-card-header {
    padding: var(--space-4) var(--space-5);
    background: var(--glass-bg-light);
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-permission-card-header-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.admin-permission-card-body {
    padding: var(--space-5);
}

.admin-permission-label {
    align-items: flex-start !important;
}

.admin-permission-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.admin-permission-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ----------------------------------------
   HELPER TEXT CLASSES
   Utility text styles
   ---------------------------------------- */
.admin-text-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.admin-text-muted {
    color: var(--color-text-tertiary);
}

/* ========================================
   ADMIN STANDARD (Notifications Baseline)
   Opt-in via: <div class="admin-page admin-standard">
   Goals:
   - Clean (non-glass) filter card surface
   - 44px filter inputs, consistent typography
   - Standard pagination controls across admin pages
   ======================================== */

.admin-page.admin-standard {
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.admin-page.admin-standard :is(input, select, textarea, button) {
    font-family: inherit;
    letter-spacing: inherit;
}

/* Filter header icon is redundant when the section is already titled "Filters". */
.admin-page.admin-standard .aph-filter-icon {
    display: none;
}

/* Filters card surface (AdminPageHeader) */
.admin-page.admin-standard .aph-filters-card {
    background: var(--color-bg-primary);
    border: none;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Prefer a stable 4-col filter grid on wide screens */
@media (min-width: 1280px) {
    .admin-page.admin-standard .aph-filters-content {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /* Activity logs needs 5 filter fields on one row */
    .admin-page.admin-standard .admin-page-header.activity-logs-header .aph-filters-content {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .admin-page.admin-standard .admin-page-header.activity-logs-header .filter-field {
        min-width: 0;
        flex: 1 1 0%;
    }
}

/* Filter field layout */
.admin-page.admin-standard .filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0%;
}

.admin-page.admin-standard .filter-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.admin-page.admin-standard .filter-input-wrapper {
    position: relative;
    width: 100%;
    height: 44px;
}

/* Icon inside filter input wrapper */
.admin-page.admin-standard .filter-input-wrapper > svg.filter-input-icon,
.admin-page.admin-standard .filter-input-wrapper > svg.filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Filter inputs (override global Inputs.css 52px styles) */
.admin-page.admin-standard :is(.filter-input, .filter-input-wrapper input) {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px; /* default assumes an icon */
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    transition: border-color var(--transition-apple-fast), box-shadow var(--transition-apple-fast);
    box-sizing: border-box;
}

/* If the wrapper has no icon, remove extra left padding. */
.admin-page.admin-standard .filter-input-wrapper:not(:has(svg)) :is(.filter-input, input) {
    padding-left: 14px;
}

.admin-page.admin-standard :is(.filter-input:focus, .filter-input-wrapper input:focus) {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
    background: var(--color-bg-primary) !important;
}

.admin-page.admin-standard :is(.filter-input::placeholder, .filter-input-wrapper input::placeholder) {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* AppSelect / AppDatePicker triggers inside filters */
.admin-page.admin-standard .filter-field :is(.app-select-trigger, .app-datepicker) {
    height: 44px !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-primary) !important;
}

.admin-page.admin-standard .filter-field :is(.app-select-value, .app-select-placeholder) {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

.admin-page.admin-standard .filter-field .app-select-arrow {
    width: 14px !important;
    height: 14px !important;
    color: var(--color-text-muted) !important;
}

/* ----------------------------------------
   De-glass older admin pages (2026 refresh)
   Apply only when the page opts in via .admin-standard
   ---------------------------------------- */
.admin-page.admin-standard :is(.admin-table-card, .admin-pagination) {
    background: var(--color-bg-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-page.admin-standard :is(.admin-table-card:hover, .admin-pagination:hover) {
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}

.admin-page.admin-standard :is(.dropdown-menu, .mobile-action-dropdown) {
    background: var(--color-bg-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: var(--shadow-float) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-page.admin-standard .mobile-action-trigger {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

.admin-page.admin-standard .mobile-action-trigger:hover,
.admin-page.admin-standard .mobile-action-trigger.active {
    background: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
}

.admin-page.admin-standard :is(.dropdown-option.selected, .dropdown-option.selected:hover) {
    background: rgba(26, 124, 202, 0.10) !important;
    color: var(--color-text-primary) !important;
}

.admin-page.admin-standard :is(.filter-field-label, .admin-label-static) {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
}

/* Standard pagination (shared across admin pages) */
.an-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.an-pagination-info {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.an-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.an-page-status {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: -0.01em;
    padding: 0 var(--space-2);
    font-variant-numeric: tabular-nums;
}

.an-page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-apple-fast);
    flex-shrink: 0;
}

.an-page-nav svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.an-page-nav:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.an-page-nav:active:not(:disabled) {
    transform: scale(0.92);
}

.an-page-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

.an-page-numbers {
    display: flex;
    align-items: center;
    gap: 2px;
}

.an-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: all var(--transition-apple-fast);
    font-variant-numeric: tabular-nums;
}

.an-page-num:hover:not(.active) {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.an-page-num:active:not(.active) {
    transform: scale(0.92);
}

.an-page-num.active {
    background: var(--color-primary, #1A7CCA);
    color: var(--color-text-inverse);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.25);
}

.an-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.an-page-size {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all var(--transition-apple-fast);
    font-variant-numeric: tabular-nums;
}

.an-page-size:hover {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.an-page-size:focus {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

@media (max-width: 767.98px) {
    .an-pagination {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }

    .an-pagination-controls {
        justify-content: space-between;
    }

    .an-page-numbers {
        flex: 1;
        justify-content: center;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .an-page-numbers::-webkit-scrollbar {
        display: none;
    }

    .an-page-size {
        width: 100%;
    }
}

/* ========================================
   ENTERPRISE TABLE ALIGNMENT UTILITIES
   Standards:
   - Text content: left-aligned
   - Numbers/amounts: right-aligned
   - Dates: left-aligned
   - Status badges: left-aligned
   - Actions: right-aligned
   ======================================== */

/* Column alignment modifiers - apply to both header and cells */
.col-align-left,
.admin-table-header-cell.col-align-left,
.admin-table-cell.col-align-left {
    text-align: left !important;
}

.col-align-right,
.admin-table-header-cell.col-align-right,
.admin-table-cell.col-align-right {
    text-align: right !important;
}

.col-align-center,
.admin-table-header-cell.col-align-center,
.admin-table-cell.col-align-center {
    text-align: center !important;
}

/* Numeric/Amount columns - right-aligned with monospace font */
.col-amount,
.admin-table-header-cell.col-amount,
.admin-table-cell.col-amount {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.col-amount .amount-value,
.col-amount .amount-badge {
    display: inline-flex;
    justify-content: flex-end;
}

/* Actions column - right-aligned */
.col-actions,
.admin-table-header-cell.col-actions,
.admin-table-cell.col-actions {
    text-align: right !important;
    justify-self: end;
}

/* For grid layouts - ensure proper cell alignment */
.admin-auto-grid .col-align-right,
.admin-auto-grid .col-amount {
    justify-self: end;
}

.admin-auto-grid .col-align-center {
    justify-self: center;
}

.admin-auto-grid .col-align-left {
    justify-self: start;
}