/*
 * GTARP UCP definitive light-mode and responsive correction.
 * This file intentionally loads last.
 */

/* Real light-theme variables: existing components using variables inherit them. */
html[data-theme="light"],
body.light-mode {
  --gt-bg: #f0edf2;
  --gt-bg-soft: #f7f4f8;
  --gt-sidebar: #fbf9fc;
  --gt-topbar: rgba(251, 249, 252, .985);
  --gt-panel: #ffffff;
  --gt-panel-2: #f6f1f7;
  --gt-panel-3: #ede6ef;
  --gt-input: #ffffff;
  --gt-border: rgba(103, 78, 105, .22);
  --gt-border-strong: rgba(143, 82, 108, .42);
  --gt-border-soft: rgba(103, 78, 105, .13);
  --gt-text: #241f26;
  --gt-muted: #6f6672;
  --gt-muted-2: #877d8a;
  --gt-shadow: 0 16px 42px rgba(49, 34, 51, .09);
}

/* Prevent browser zoom from forcing fixed-width content through adjacent items. */
body.gtarp-ucp,
body.gtarp-ucp #wrapper,
body.gtarp-ucp .main,
body.gtarp-ucp .main-content,
body.gtarp-ucp .main-content > .container,
body.gtarp-ucp .main-content > .container-fluid,
body.gtarp-ucp .gtarp-screen {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.gtarp-ucp {
  overflow-x: hidden !important;
}

body.gtarp-ucp *,
body.gtarp-ucp *::before,
body.gtarp-ucp *::after {
  box-sizing: border-box;
}

body.gtarp-ucp img,
body.gtarp-ucp video,
body.gtarp-ucp canvas,
body.gtarp-ucp svg {
  max-width: 100%;
}

body.gtarp-ucp .row > [class*="col-"],
body.gtarp-ucp [class*="-grid"] > *,
body.gtarp-ucp [class*="-layout"] > *,
body.gtarp-ucp .panel,
body.gtarp-ucp .panel-body,
body.gtarp-ucp .gtarp-card {
  min-width: 0 !important;
}

body.gtarp-ucp .btn-group,
body.gtarp-ucp .action-buttons,
body.gtarp-ucp .gtarp-actions,
body.gtarp-ucp .gtarp-card-actions,
body.gtarp-ucp .gtarp-profile-actions {
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.gtarp-ucp .table-responsive,
body.gtarp-ucp .dataTables_wrapper,
body.gtarp-ucp .gtarp-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Compact Online Players and Staff Team cards; never stretch a single player. */
body.gtarp-ucp .staff-panel {
  width: 100% !important;
  overflow: hidden !important;
}

body.gtarp-ucp .staff-grid,
body.gtarp-ucp .gtarp-online-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(185px, 220px)) !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 18px !important;
}

body.gtarp-ucp .staff-card,
body.gtarp-ucp .gtarp-online-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 220px !important;
  min-height: 295px !important;
}

body.gtarp-ucp .gtarp-online-card {
  min-height: 305px !important;
}

body.gtarp-ucp .gtarp-online-add-form {
  width: 100% !important;
  margin: 0 !important;
}

body.gtarp-ucp .gtarp-online-add-form .btn {
  width: 100% !important;
}

/* ----- Complete light-mode surfaces ----- */
html[data-theme="light"] body.gtarp-ucp,
body.gtarp-ucp.light-mode,
html[data-theme="light"] body.gtarp-ucp #wrapper,
html[data-theme="light"] body.gtarp-ucp .main,
html[data-theme="light"] body.gtarp-ucp .main-content,
body.gtarp-ucp.light-mode #wrapper,
body.gtarp-ucp.light-mode .main,
body.gtarp-ucp.light-mode .main-content {
  color: var(--gt-text) !important;
  background: var(--gt-bg) !important;
}

html[data-theme="light"] body.gtarp-ucp .gtarp-topbar,
html[data-theme="light"] body.gtarp-ucp .navbar.navbar-default.navbar-fixed-top,
html[data-theme="light"] body.gtarp-ucp .gtarp-brand,
html[data-theme="light"] body.gtarp-ucp #sidebar-nav,
html[data-theme="light"] body.gtarp-ucp footer,
body.gtarp-ucp.light-mode .gtarp-topbar,
body.gtarp-ucp.light-mode .navbar.navbar-default.navbar-fixed-top,
body.gtarp-ucp.light-mode .gtarp-brand,
body.gtarp-ucp.light-mode #sidebar-nav,
body.gtarp-ucp.light-mode footer {
  color: var(--gt-text) !important;
  background: var(--gt-sidebar) !important;
  background-image: none !important;
  border-color: var(--gt-border) !important;
}

/* Every normal panel/card is light. Colored badges and action buttons are handled later. */
html[data-theme="light"] body.gtarp-ucp :is(
  .panel,
  .panel-default,
  .panel-body,
  .panel-footer,
  .well,
  .gtarp-card,
  .gtarp-card-modern,
  .gtarp-item-card,
  .gtarp-list-row,
  .gtarp-status-row,
  .gtarp-property-card,
  .gtarp-character-picker,
  .gtarp-character-card,
  .gtarp-character-selector-card,
  .gtarp-character-quick-card,
  .gtarp-character-activity-card,
  .gtarp-character-attribute-card,
  .gtarp-profile-main-card,
  .gtarp-profile-account-card,
  .gtarp-profile-requests-card,
  .gtarp-account-asset-card,
  .gtarp-account-table-card,
  .gtarp-phone-card,
  .gtarp-property-access-card,
  .gtarp-record-card,
  .gtarp-ticket-card,
  .gtarp-media-card,
  .gtarp-mastodon-card,
  .gtarp-activity-card,
  .gtarp-clock-card,
  .gtarp-settings-media-card,
  .gtarp-admin-shell,
  .gtarp-tab-content,
  .staff-panel,
  .staff-tab-content,
  .gtarp-online-panel,
  .gtarp-inline-search-results,
  .gtarp-empty,
  .gtarp-empty-state
),
body.gtarp-ucp.light-mode :is(
  .panel,
  .panel-default,
  .panel-body,
  .panel-footer,
  .well,
  .gtarp-card,
  .gtarp-card-modern,
  .gtarp-item-card,
  .gtarp-list-row,
  .gtarp-status-row,
  .gtarp-property-card,
  .gtarp-character-picker,
  .gtarp-character-card,
  .gtarp-character-selector-card,
  .gtarp-character-quick-card,
  .gtarp-character-activity-card,
  .gtarp-character-attribute-card,
  .gtarp-profile-main-card,
  .gtarp-profile-account-card,
  .gtarp-profile-requests-card,
  .gtarp-account-asset-card,
  .gtarp-account-table-card,
  .gtarp-phone-card,
  .gtarp-property-access-card,
  .gtarp-record-card,
  .gtarp-ticket-card,
  .gtarp-media-card,
  .gtarp-mastodon-card,
  .gtarp-activity-card,
  .gtarp-clock-card,
  .gtarp-settings-media-card,
  .gtarp-admin-shell,
  .gtarp-tab-content,
  .staff-panel,
  .staff-tab-content,
  .gtarp-online-panel,
  .gtarp-inline-search-results,
  .gtarp-empty,
  .gtarp-empty-state
) {
  color: var(--gt-text) !important;
  background: var(--gt-panel) !important;
  background-image: none !important;
  border-color: var(--gt-border) !important;
  box-shadow: var(--gt-shadow) !important;
}

/* Inline legacy dark backgrounds in old pages. */
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well, select, input, textarea)[style*="background-color: #1"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well, select, input, textarea)[style*="background-color:#1"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well, select, input, textarea)[style*="background-color: #2"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well, select, input, textarea)[style*="background-color:#2"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well)[style*="background: #1"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well)[style*="background:#1"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well)[style*="background: #2"],
html[data-theme="light"] body.gtarp-ucp :is(.panel, .well)[style*="background:#2"] {
  color: var(--gt-text) !important;
  background: var(--gt-panel) !important;
  background-color: var(--gt-panel) !important;
  border-color: var(--gt-border) !important;
}

/* Panel/header/tab surfaces. */
html[data-theme="light"] body.gtarp-ucp :is(
  .panel-heading,
  .panel-footer,
  .gtarp-card-header,
  .gtarp-card-head,
  .modal-header,
  .modal-footer,
  .permission-savebar,
  .input-group-addon,
  .tab-content .nav-tabs,
  .character-content,
  .staff-tabs > li > a
) {
  color: var(--gt-text) !important;
  background: var(--gt-panel-2) !important;
  background-image: none !important;
  border-color: var(--gt-border) !important;
}

/* Headings and ordinary text must be dark in light mode. */
html[data-theme="light"] body.gtarp-ucp :is(
  h1, h2, h3, h4, h5, h6,
  .panel-title,
  .modal-title,
  .gtarp-page-title h1,
  .gtarp-card h1,
  .gtarp-card h2,
  .gtarp-card h3,
  .gtarp-card h4,
  .gtarp-card h5,
  .gtarp-character-card-head h2,
  .gtarp-character-data b,
  .gtarp-character-data-section h2,
  .gtarp-character-insights-value,
  .gtarp-mini-stat-row b,
  .gtarp-kpi-value,
  .gtarp-feed-item b,
  .gtarp-item-name,
  .gtarp-account-asset-meta b,
  .gtarp-profile-account-card dd,
  .staff-name,
  .staff-lastseen,
  .gtarp-friend-mini-state
) {
  color: var(--gt-text) !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.gtarp-ucp :is(
  p,
  small,
  .muted,
  .text-muted,
  .gtarp-muted,
  .gtarp-kpi-note,
  .gtarp-character-card-head p,
  .gtarp-character-data span,
  .gtarp-online-head p
) {
  color: var(--gt-muted) !important;
}

/* Character cards: all old black data boxes become light. */
html[data-theme="light"] body.gtarp-ucp .gtarp-character-counts span,
html[data-theme="light"] body.gtarp-ucp .gtarp-account-asset-address,
html[data-theme="light"] body.gtarp-ucp .gtarp-account-asset-meta span,
html[data-theme="light"] body.gtarp-ucp .gtarp-character-facts > *,
html[data-theme="light"] body.gtarp-ucp .gtarp-character-profile-metrics > *,
html[data-theme="light"] body.gtarp-ucp .gtarp-character-insights > *,
html[data-theme="light"] body.gtarp-ucp .gtarp-mini-stat-row,
html[data-theme="light"] body.gtarp-ucp .gtarp-capacity {
  color: var(--gt-text) !important;
  background: var(--gt-panel-2) !important;
  background-image: none !important;
  border-color: var(--gt-border) !important;
}

html[data-theme="light"] body.gtarp-ucp .gtarp-character-counts b,
html[data-theme="light"] body.gtarp-ucp .gtarp-account-asset-address,
html[data-theme="light"] body.gtarp-ucp .gtarp-account-asset-meta b {
  color: var(--gt-text) !important;
}

/* Online Players + Staff Team light cards. */
html[data-theme="light"] body.gtarp-ucp .staff-card,
html[data-theme="light"] body.gtarp-ucp .gtarp-online-card {
  color: var(--gt-text) !important;
  background:
    radial-gradient(circle at top, rgba(185, 122, 145, .12), transparent 45%),
    #ffffff !important;
  border-color: var(--gt-border) !important;
  box-shadow: 0 10px 26px rgba(49, 34, 51, .08) !important;
}

html[data-theme="light"] body.gtarp-ucp .staff-rank {
  color: #ffffff !important;
  background: linear-gradient(135deg, #b97a91, #6f557d) !important;
}

html[data-theme="light"] body.gtarp-ucp .staff-status.online {
  color: #13774b !important;
  background: rgba(30, 166, 101, .11) !important;
  border-color: rgba(30, 166, 101, .25) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.gtarp-ucp .staff-status.offline {
  color: #b3344d !important;
  background: rgba(203, 58, 82, .09) !important;
  border-color: rgba(203, 58, 82, .22) !important;
  box-shadow: none !important;
}

/* Forms, dropdowns and Select2. */
html[data-theme="light"] body.gtarp-ucp :is(
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea,
  .select2-container .select2-choice,
  .select2-container--default .select2-selection,
  .select2-dropdown,
  .dropdown-menu,
  .navbar-nav .dropdown-menu,
  .gtarp-friends-menu
) {
  color: var(--gt-text) !important;
  -webkit-text-fill-color: var(--gt-text) !important;
  background: var(--gt-input) !important;
  background-image: none !important;
  border-color: var(--gt-border) !important;
}

html[data-theme="light"] body.gtarp-ucp input::placeholder,
html[data-theme="light"] body.gtarp-ucp textarea::placeholder {
  color: #8b818e !important;
  -webkit-text-fill-color: #8b818e !important;
}

/* Tables. */
html[data-theme="light"] body.gtarp-ucp :is(table, .table, .dataTable) {
  color: var(--gt-text) !important;
  background: var(--gt-panel) !important;
  border-color: var(--gt-border) !important;
}

html[data-theme="light"] body.gtarp-ucp :is(table, .table, .dataTable) > thead > tr > th {
  color: #504653 !important;
  background: var(--gt-panel-2) !important;
  border-color: var(--gt-border) !important;
}

html[data-theme="light"] body.gtarp-ucp :is(table, .table, .dataTable) > tbody > tr > td {
  color: var(--gt-text) !important;
  background: var(--gt-panel) !important;
  border-color: var(--gt-border-soft) !important;
}

html[data-theme="light"] body.gtarp-ucp .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="light"] body.gtarp-ucp .table-hover > tbody > tr:hover > td {
  background: #faf8fb !important;
}

/* Buttons: light buttons always have dark text; colored action buttons stay readable. */
html[data-theme="light"] body.gtarp-ucp :is(.btn-default, .btn-secondary),
html[data-theme="light"] body.gtarp-ucp button:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.gtarp-theme-toggle):not(.gtarp-friends-toggle):not(.btn-toggle-fullwidth):not(.gtarp-newest-member-add):not(.gtarp-icon-button) {
  color: #352d38 !important;
  -webkit-text-fill-color: #352d38 !important;
  background: #eee8f0 !important;
  background-image: none !important;
  border-color: #cfc3d1 !important;
}

html[data-theme="light"] body.gtarp-ucp :is(.btn-default, .btn-secondary):hover,
html[data-theme="light"] body.gtarp-ucp button:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.gtarp-theme-toggle):not(.gtarp-friends-toggle):not(.btn-toggle-fullwidth):not(.gtarp-newest-member-add):not(.gtarp-icon-button):hover {
  color: #211b24 !important;
  -webkit-text-fill-color: #211b24 !important;
  background: #e2d8e5 !important;
  border-color: #bfaec3 !important;
}

html[data-theme="light"] body.gtarp-ucp :is(
  .btn-primary,
  .btn-info,
  .btn-success,
  .btn-danger,
  .gtarp-auth-submit,
  .gtarp-newest-member-add,
  .staff-rank,
  .label-primary,
  .badge-primary
),
html[data-theme="light"] body.gtarp-ucp :is(
  .btn-primary,
  .btn-info,
  .btn-success,
  .btn-danger,
  .gtarp-auth-submit,
  .gtarp-newest-member-add
) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Pagination and alerts. */
html[data-theme="light"] body.gtarp-ucp .pagination > li > a,
html[data-theme="light"] body.gtarp-ucp .pagination > li > span,
html[data-theme="light"] body.gtarp-ucp .alert,
html[data-theme="light"] body.gtarp-ucp .label-default,
html[data-theme="light"] body.gtarp-ucp .badge-default {
  color: var(--gt-text) !important;
  background: var(--gt-panel-2) !important;
  border-color: var(--gt-border) !important;
}

/* Bootstrap modal content. The backdrop itself remains dark for contrast. */
html[data-theme="light"] body.gtarp-ucp .modal-content,
html[data-theme="light"] body.gtarp-ucp .gtarp-auth-modal .modal-content,
html[data-theme="light"] body.gtarp-ucp .swal2-modal {
  color: var(--gt-text) !important;
  background: var(--gt-panel) !important;
  border-color: var(--gt-border) !important;
}

html[data-theme="light"] body.gtarp-ucp .close,
html[data-theme="light"] body.gtarp-ucp .gtarp-modal-close {
  color: #3b313d !important;
  -webkit-text-fill-color: #3b313d !important;
  background: var(--gt-panel-2) !important;
  border-color: var(--gt-border) !important;
  opacity: 1 !important;
}

/* Keep the logo stable and independent from static.gtarp.network. */
body.gtarp-ucp .gtarp-logo,
body.gtarp-ucp .gtarp-sidebar-brand img,
body.gtarp-ucp .gtarp-auth-logo,
body.gtarp-ucp .gtarp-mobile-brand img {
  object-fit: contain !important;
}

/* Compact shell also handles normal desktop windows at high browser zoom. */
@media (max-width: 1180px) {
  :root {
    --gt-sidebar-width: 0px;
    --gt-topbar-height: 72px;
  }

  body.gtarp-ucp #sidebar-nav.sidebar {
    left: 0 !important;
    width: min(330px, 88vw) !important;
    max-width: 88vw !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    z-index: 1060 !important;
  }

  body.gtarp-ucp.gtarp-mobile-nav-open #sidebar-nav.sidebar {
    transform: translateX(0) !important;
  }

  body.gtarp-ucp .main,
  body.gtarp-ucp footer {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.gtarp-ucp .gtarp-topbar,
  body.gtarp-ucp .navbar.navbar-default.navbar-fixed-top {
    left: 0 !important;
    right: 0 !important;
  }

  body.gtarp-ucp .gtarp-sidebar-toggle {
    display: block !important;
  }

  body.gtarp-ucp .gtarp-search.navbar-form {
    display: none !important;
  }

  body.gtarp-ucp .gtarp-dashboard,
  body.gtarp-ucp .gtarp-profile-overview-grid,
  body.gtarp-ucp .gtarp-character-reference-layout,
  body.gtarp-ucp .gtarp-character-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.gtarp-ucp .gtarp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.gtarp-ucp .main-content {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.gtarp-ucp .staff-grid,
  body.gtarp-ucp .gtarp-online-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }

  body.gtarp-ucp .staff-card,
  body.gtarp-ucp .gtarp-online-card {
    max-width: none !important;
    min-height: 270px !important;
  }

  body.gtarp-ucp .gtarp-kpis {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.gtarp-ucp .staff-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}