/*
 * ACLClouds UI unification layer.
 * Loaded last on client and admin to make shared surfaces, controls,
 * tables, modals, focus states, and mobile behavior consistent.
 */

:root {
  --acl-radius-card: 8px;
  --acl-radius-control: 8px;
  --acl-radius-modal: 10px;
  --acl-control-height: 40px;
  --acl-control-padding-x: 14px;
  --acl-focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.22);
  --acl-transition: 150ms ease;
  --acl-page-gap: 16px;
  --acl-surface: var(--bg-secondary, #ffffff);
  --acl-surface-muted: var(--bg-tertiary, #f5f5f7);
  --acl-surface-raised: var(--bg-elevated, #ffffff);
  --acl-border: var(--border, rgba(0, 0, 0, 0.1));
  --acl-border-strong: var(--border-hover, rgba(0, 0, 0, 0.18));
  --acl-divider: rgba(32, 54, 84, 0.1);
  --acl-divider-strong: rgba(32, 54, 84, 0.14);
  --acl-text: var(--text-primary, #1d1d1f);
  --acl-text-muted: var(--text-secondary, #48484a);
  --acl-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(32, 54, 84, 0.03);
  --acl-shadow-floating: 0 14px 34px rgba(15, 23, 42, 0.14);
}

/*
 * Default and explicit light palette.
 * Dark mode keeps the older dark tokens instead of being flattened back to
 * the light palette here.
 */
:root:not([data-theme="dark"]),
html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f6f8fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-quaternary: #e8eef6;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #eef4fb;
  --bg-overlay: rgba(36, 50, 70, 0.34);
  --bg-backdrop: rgba(36, 50, 70, 0.38);
  --bg-scrim: rgba(36, 50, 70, 0.42);
  --overlay: rgba(36, 50, 70, 0.2);
  --border: rgba(32, 54, 84, 0.17);
  --border-subtle: rgba(32, 54, 84, 0.1);
  --border-hover: rgba(32, 54, 84, 0.28);
  --border-strong: rgba(32, 54, 84, 0.34);
  --text-primary: #172033;
  --text-secondary: #4b5565;
  --text-tertiary: #667085;
  --text-quaternary: #8a95a6;
  --text-placeholder: #98a2b3;
  --text-inverse: #ffffff;
  --black: #172033;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 18px 44px rgba(15, 23, 42, 0.16);
  --shadow-2xl: 0 24px 58px rgba(15, 23, 42, 0.18);
  --acl-surface: #ffffff;
  --acl-surface-muted: #f1f5f9;
  --acl-surface-raised: #ffffff;
  --acl-border: rgba(32, 54, 84, 0.17);
  --acl-border-strong: rgba(32, 54, 84, 0.28);
  --acl-divider: rgba(32, 54, 84, 0.1);
  --acl-divider-strong: rgba(32, 54, 84, 0.14);
  --acl-text: #172033;
  --acl-text-muted: #4b5565;
  --acl-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(32, 54, 84, 0.03);
  --acl-shadow-floating: 0 18px 44px rgba(15, 23, 42, 0.16);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

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

body {
  min-width: 320px;
  background: var(--bg-primary, #f5f5f7);
  color: var(--acl-text);
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

img,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--acl-focus-ring);
}

/* Shared cards and framed surfaces */
:where(
  .client-card,
  .stat-card,
  .server-card,
  .chart-card,
  .activity-log-list,
  .activity-log-empty,
  .file-manager-list-container,
  .trash-list,
  .admin-card,
  .content-box,
  .box,
  .panel,
  .well,
  .credits-modal,
  .database-card,
  .backup-card,
  .ticket-card,
  .schedule-card
) {
  background: var(--acl-surface);
  border: 1px solid var(--acl-border);
  border-radius: var(--acl-radius-card);
  box-shadow: var(--acl-shadow-card);
  background-clip: padding-box;
}

:where(
  .client-card,
  .stat-card,
  .server-card,
  .admin-card,
  .content-box,
  .box,
  .panel
):hover {
  border-color: var(--acl-border-strong);
  box-shadow: var(--acl-shadow-card);
}

:where(.client-card, .stat-card, .server-card, .admin-card):hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Reduce decorative page chrome on application screens */
:where(.dashboard-hero, .home-hero-banner, .admin-hero, .admin-dashboard-hero) {
  background: var(--acl-surface);
  border: 1px solid var(--acl-border);
  border-radius: var(--acl-radius-card);
  box-shadow: var(--acl-shadow-card);
  overflow: hidden;
}

:where(.dashboard-hero, .home-hero-banner, .admin-hero, .admin-dashboard-hero)::before,
:where(.dashboard-hero, .home-hero-banner, .admin-hero, .admin-dashboard-hero)::after {
  display: none;
}

:where(.dashboard-hero__title, .home-hero-banner-title, .admin-page-title, .admin-card-title) {
  letter-spacing: 0;
}

:where(
  .client-card-header,
  .client-card__header,
  .admin-card-header,
  .server-card__header,
  .file-manager-list-header,
  .admin-table th,
  .table th
) {
  background: #f8fafc;
}

:where(
  .client-card-header,
  .client-card__header,
  .admin-card-header,
  .server-card__header,
  .modal-header,
  .admin-modal-header,
  .github-import-header
) {
  border-bottom: 1px solid var(--acl-divider);
}

:where(
  .client-card__footer,
  .admin-card-footer,
  .server-card__footer,
  .modal-footer,
  .admin-modal-footer,
  .github-import-footer
) {
  border-top: 1px solid var(--acl-divider);
}

/* Buttons */
:where(
  .client-btn,
  .btn,
  .admin-btn,
  .modal-btn,
  .file-manager-action-btn,
  .power-btn,
  .pagination-btn,
  .trash-btn,
  .copy-btn,
  .fe-save-btn,
  .fm-modal-nav-btn,
  .admin-header-btn,
  .admin-toggle-btn
) {
  min-height: var(--acl-control-height);
  border-radius: var(--acl-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: background-color var(--acl-transition), border-color var(--acl-transition), color var(--acl-transition), transform var(--acl-transition), box-shadow var(--acl-transition);
}

:where(
  .client-btn,
  .btn,
  .admin-btn,
  .modal-btn,
  .file-manager-action-btn,
  .power-btn,
  .pagination-btn,
  .trash-btn,
  .copy-btn,
  .fe-save-btn
):hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
}

:where(
  .client-btn,
  .btn,
  .admin-btn,
  .modal-btn,
  .file-manager-action-btn,
  .power-btn,
  .pagination-btn,
  .trash-btn,
  .copy-btn,
  .fe-save-btn
):active:not(:disabled):not(.disabled) {
  transform: translateY(0);
}

:where(.client-btn--primary, .btn-primary, .btn--primary, .admin-btn-primary, .modal-btn-primary, .fe-save-btn) {
  background: var(--accent, #0071e3);
  border-color: var(--accent, #0071e3);
  color: #ffffff;
}

:where(.client-btn--secondary, .btn-secondary, .btn--secondary, .admin-btn-secondary, .modal-btn, .file-manager-action-btn) {
  background: #ffffff;
  border: 1px solid var(--acl-border);
  color: var(--acl-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

:where(.client-btn--danger, .btn-danger, .btn--danger, .admin-btn-danger, .modal-btn-danger) {
  background: var(--error, #ff3b30);
  border-color: var(--error, #ff3b30);
  color: #ffffff;
}

/* Inputs */
:where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):not(.CodeMirror-search-field):not(.perm-checkbox) {
  min-height: var(--acl-control-height);
  border-radius: var(--acl-radius-control);
  background: #ffffff;
  border: 1px solid var(--acl-border);
  color: var(--acl-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding-inline: var(--acl-control-padding-x);
}

:where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):not(.CodeMirror-search-field):not(.perm-checkbox):hover {
  border-color: var(--acl-border-strong);
  background: #ffffff;
}

:where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):not(.CodeMirror-search-field):not(.perm-checkbox):focus {
  outline: none;
  border-color: var(--accent, #0071e3);
  box-shadow: var(--acl-focus-ring);
}

[data-theme="dark"] :where(
  .console-input,
  .file-manager-search-input,
  .trash-search-input
) {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] :where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .console-input,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):hover {
  background: var(--bg-primary);
  border-color: var(--border-hover);
}

[data-theme="dark"] :where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .console-input,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):focus {
  background: var(--bg-secondary);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

[data-theme="dark"] :where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .console-input,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
)::placeholder {
  color: var(--text-secondary);
}

[data-theme="dark"] :where(
  .input,
  .form-input,
  .admin-form-input,
  .admin-form-select,
  .admin-form-textarea,
  .fe-filename-input,
  .fe-ext-select,
  .console-input,
  .file-manager-search-input,
  .trash-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea
):not(.CodeMirror-search-field):not(.perm-checkbox) {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

::placeholder {
  color: var(--text-tertiary, #8e8e93);
}

label,
.admin-form-label,
.schedule-selector-label,
.fm-modal-location-label {
  letter-spacing: 0;
}

/* Tables and lists */
:where(.admin-table-container, .table-responsive, .file-manager-list-container, .trash-list) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--acl-border);
  border-radius: var(--acl-radius-card);
  background: var(--acl-surface);
  box-shadow: var(--acl-shadow-card);
}

:where(.admin-table, .table, table) {
  border-collapse: separate;
  border-spacing: 0;
}

:where(.admin-table th, .admin-table td, .table th, .table td) {
  vertical-align: middle;
}

:where(.admin-table th, .table th, .file-manager-list-header) {
  color: var(--acl-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

:where(.admin-table tbody tr, .file-manager-list-row, .trash-row, .activity-log-entry) {
  transition: background-color var(--acl-transition), border-color var(--acl-transition);
}

:where(.admin-table tbody tr:hover, .file-manager-list-row:hover, .trash-row:hover, .activity-log-entry:hover) {
  background: rgba(0, 113, 227, 0.07);
}

/* Tabs */
:where(.admin-nav-tabs, .admin-node-tabs, .nav-tabs, .fe-tab-bar) {
  border-radius: var(--acl-radius-card);
  background: #eef4fb;
  border: 1px solid var(--acl-border);
  gap: 4px;
}

:where(.admin-nav-tabs a, .admin-node-tabs a, .nav-tabs > li > a, .fe-tab) {
  border-radius: 6px;
  min-height: 36px;
  color: var(--acl-text-muted);
  border: 1px solid transparent;
}

:where(.admin-nav-tabs a, .admin-node-tabs a, .nav-tabs > li > a, .fe-tab):hover {
  background: #ffffff;
  border-color: var(--acl-border);
}

:where(.admin-nav-tabs a.active, .admin-node-tabs a.active, .nav-tabs > li.active > a, .fe-tab-active) {
  background: var(--accent, #0071e3);
  color: #ffffff;
  border-color: var(--accent, #0071e3);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Modals */
:where(
  .modal,
  .modal-container,
  .modal-dialog,
  .modal-content,
  .admin-modal,
  .credits-modal,
  .projects-delete-modal,
  .projects-cancel-modal,
  .github-import-modal,
  .newdir-modal,
  .sd-modal,
  .network-dialog,
  [role="dialog"] [class*="panel_"]
) {
  border-radius: var(--acl-radius-modal);
  border: 1px solid var(--acl-border);
  background: var(--acl-surface-raised);
  box-shadow: var(--acl-shadow-floating);
  color: var(--acl-text);
}

:where(
  .modal-overlay,
  .modal-mask,
  .modal-backdrop,
  .modal-backdrop-custom,
  .admin-modal-overlay,
  .admin-sidebar-overlay,
  .credits-modal-backdrop,
  .projects-modal-overlay,
  .github-import-overlay,
  .newdir-overlay,
  .sd-overlay,
  .network-dialog-overlay,
  .mass-actions-overlay
) {
  background: var(--bg-scrim) !important;
  backdrop-filter: blur(6px);
}

:where(
  .modal-header,
  .modal-footer,
  .admin-modal-header,
  .admin-modal-footer,
  .dialog-header,
  .dialog-footer,
  .github-import-header,
  .github-import-footer
) {
  background: #f8fafc;
  border-color: var(--acl-border);
}

:where(.modal-header) {
  border-radius: var(--acl-radius-modal) var(--acl-radius-modal) 0 0;
}

:where(.modal-footer) {
  border-radius: 0 0 var(--acl-radius-modal) var(--acl-radius-modal);
}

:where(.modal-title) {
  letter-spacing: 0;
}

:where(.modal-body, .modal-content, .admin-modal-body, .github-import-body) {
  color: var(--acl-text-muted);
  background: #ffffff;
}

:where(.modal h1, .modal h2, .modal h3, .modal-title, .admin-modal-title, .github-import-title, .network-dialog-title, [role="dialog"] [class*="title_"]) {
  color: var(--acl-text);
  letter-spacing: 0;
}

:where(.modal p, .modal-body, .network-dialog-text, .github-import-subtitle, .sd-modal-text) {
  color: var(--acl-text-muted);
}

:where(.modal-close-icon, .modal-close-btn, .github-import-close, .admin-modal-close) {
  background: var(--acl-surface-muted);
  border: 1px solid var(--acl-border);
  border-radius: 8px;
  color: var(--acl-text-muted);
}

:where(.modal-close-icon, .modal-close-btn, .github-import-close, .admin-modal-close):hover {
  background: #fff1f0;
  border-color: rgba(239, 68, 68, 0.28);
  color: var(--error, #ef4444);
}

:where(.modal-container, .modal-dialog, .modal-content, .admin-modal, [role="dialog"] [class*="panel_"]) {
  max-width: min(920px, calc(100vw - 32px));
}

/* Empty and loading states */
:where(
  .home-dashboard-empty,
  .activity-log-empty,
  .fm-modal-empty,
  .fm-modal-loading,
  .file-manager-empty,
  .admin-empty-state,
  .empty-state
) {
  border-radius: var(--acl-radius-card);
  border: 1px dashed var(--acl-border);
  background: var(--acl-surface-muted);
  color: var(--acl-text-muted);
}

/* Status badges */
:where(.badge, .badge-modern, .server-card__status, .status-badge, .admin-badge) {
  border-radius: 999px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  letter-spacing: 0;
}

/* Admin shell */
.admin-content {
  min-width: 0;
}

.admin-header,
.admin-sidebar,
.admin-user-panel,
.nav-modern {
  border-color: var(--acl-border);
  box-shadow: 0 1px 0 rgba(32, 54, 84, 0.06);
}

.admin-breadcrumb {
  min-width: 0;
}

.admin-breadcrumb span,
.admin-breadcrumb a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Client shell */
.dashboard-layout,
.dashboard-main,
.server-router,
.file-edit-page,
.server-console-page,
.server-files-page,
.server-settings-page,
.server-users-page,
.server-network-page {
  min-width: 0;
}

/* Mobile behavior */
@media (max-width: 900px) {
  :where(
    .stats-grid,
    .home-dashboard-actions,
    .servers-grid,
    .billing-grid,
    .plans-grid,
    .minecraft-plans-grid,
    .admin-stats-grid,
    .admin-dashboard-grid,
    .admin-grid,
    .quick-actions-grid
  ) {
    grid-template-columns: 1fr;
  }

  :where(.admin-card-header, .client-card__header, .modal-footer, .admin-card-footer) {
    gap: 12px;
    flex-wrap: wrap;
  }

  :where(.admin-card-header > *, .client-card__header > *, .admin-card-footer > *) {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --acl-page-gap: 12px;
    --acl-control-height: 40px;
  }

  :where(.admin-content, .dashboard-content, .server-content, .PageContentBlock) {
    padding-inline: 12px;
  }

  :where(.client-card, .stat-card, .server-card, .admin-card, .content-box, .box, .panel) {
    border-radius: var(--acl-radius-card);
  }

  :where(.admin-table, .table) {
    min-width: 640px;
  }

  :where(.admin-btn, .client-btn, .btn, .modal-btn, .file-manager-action-btn) {
    min-height: 40px;
    padding-inline: 12px;
  }

  :where(.modal, .modal-container, .credits-modal) {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    border-radius: var(--acl-radius-modal);
  }

  :where(.modal-header, .modal-body, .modal-footer) {
    padding: 14px;
  }

  :where(.modal-footer) {
    justify-content: stretch;
  }

  :where(.modal-footer .btn, .modal-footer .client-btn, .modal-footer .admin-btn, .modal-footer .modal-btn) {
    flex: 1 1 auto;
  }
}

@media (max-width: 520px) {
  :where(.admin-card-header, .client-card__header, .modal-footer, .admin-card-footer) {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.admin-card-header .admin-btn, .client-card__header .client-btn, .admin-card-footer .admin-btn) {
    width: 100%;
  }

  :where(.admin-breadcrumb) {
    max-width: calc(100vw - 132px);
  }

  :where(.badge, .badge-modern, .server-card__status, .status-badge, .admin-badge) {
    white-space: normal;
  }
}

/* Final legacy overrides for older page styles that use stronger selectors. */
.projects-modal-overlay,
.admin-modal-overlay,
.modal-backdrop,
.modal-backdrop-custom,
.chart-offline-overlay,
.loading-overlay {
  background: var(--bg-scrim) !important;
  backdrop-filter: blur(6px) !important;
}

[class*="projects-upgrade-modal"],
.projects-upgrade-modal,
.admin-modal,
.modal-dialog > .modal-content,
.modal-container,
.network-dialog,
.newdir-modal,
.github-import-modal,
.sd-modal,
.credits-modal {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-xl) !important;
  color: var(--text-primary) !important;
}

[class*="projects-upgrade-modal-header"],
[class*="projects-upgrade-modal-footer"],
.projects-upgrade-modal-header,
.projects-upgrade-modal-footer,
.admin-modal-header,
.admin-modal-footer,
.modal-header,
.modal-footer {
  background: #f8fafc !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .modal-container .rounded-xl,
[data-theme="dark"] .auth-email-display input,
[data-theme="dark"] .auth-verify-input,
[data-theme="dark"] [class*="projects-upgrade-modal"] {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-modern,
[data-theme="dark"] .glass {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: var(--border) !important;
}