/**
 * Google Play Console–inspired portal theme.
 * Loads after portal-clean.css on employee + admin shells.
 */

/* —— Shared layout & typography (same in light and dark) —— */
[data-theme="light"],
[data-theme="dark"] {
  --portal-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --portal-font-size-root: 14px;
  --portal-font-size-body: 0.875rem;
  --portal-font-size-sm: 0.8125rem;
  --portal-font-size-xs: 0.75rem;
  --portal-font-size-sidebar: 0.875rem;
  --portal-font-size-lg: 1.25rem;
  --portal-font-size-xl: 1.375rem;
  --portal-line-height: 1.4286;
  --portal-sidebar-w: 16rem;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --vk-nav-active-border: transparent;
}

/* —— Design tokens —— */
[data-theme="light"] {
  --gpc-blue: #1a73e8;
  --gpc-blue-hover: #1765cc;
  --gpc-blue-pressed: #185abc;
  --gpc-blue-surface: #e8f0fe;
  --gpc-green: #1e8e3e;
  --gpc-red: #d93025;
  --gpc-bg: #f8f9fa;
  --gpc-surface: #ffffff;
  --gpc-surface-2: #f1f3f4;
  --gpc-border: #dadce0;
  --gpc-border-strong: #bdc1c6;
  --gpc-text: #202124;
  --gpc-text-secondary: #5f6368;
  --gpc-text-disabled: #80868b;

  --accent: var(--gpc-blue);
  --primary: var(--gpc-blue);

  --bg: var(--gpc-bg);
  --portal-content-bg: var(--gpc-bg);
  --surface: var(--gpc-surface-2);
  --panel: var(--gpc-surface);
  --border: var(--gpc-border);
  --border-strong: var(--gpc-border-strong);
  --text: var(--gpc-text);
  --muted: var(--gpc-text-secondary);
  --portal-link: var(--gpc-blue);
  --portal-link-hover: var(--gpc-blue-hover);
  --sidebar-nav: var(--gpc-text-secondary);
  --vk-nav-hover: var(--gpc-blue);
  --vk-nav-active-bg: var(--gpc-blue-surface);
  --accent-muted: var(--gpc-blue-surface);
  --btn-primary-bg: var(--gpc-blue);
  --btn-primary-fg: #ffffff;
  --bubble-out-mid: var(--gpc-blue);
  --bubble-out-bottom: var(--gpc-blue-hover);
  --bubble-out-stroke: var(--gpc-blue-pressed);
  --input-bg: var(--gpc-surface);
  --pill-bg: var(--gpc-surface-2);
  --shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.2);
  --shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --thread-top: var(--gpc-bg);
  --thread-bottom: var(--gpc-bg);
  --nav-top: var(--gpc-surface);
  --nav-mid: var(--gpc-surface);
  --nav-bottom: var(--gpc-surface);
  --nav-stroke: var(--gpc-border);
  --bubble-in-top: var(--gpc-surface);
  --bubble-in-mid: var(--gpc-surface);
  --bubble-in-bottom: var(--gpc-surface);
  --bubble-in-stroke: var(--gpc-border);
  --tab-top: var(--gpc-surface);
  --tab-bottom: var(--gpc-surface);
  --scrollbar-thumb: #dadce0;
  --scrollbar-thumb-hover: #bdc1c6;
}

[data-theme="dark"] {
  --gpc-blue: #8ab4f8;
  --gpc-blue-hover: #aecbfa;
  --gpc-blue-pressed: #669df6;
  --gpc-blue-surface: rgba(138, 180, 248, 0.16);
  --gpc-green: #81c995;
  --gpc-red: #f28b82;
  --gpc-bg: #202124;
  --gpc-surface: #292a2d;
  --gpc-surface-2: #35363a;
  --gpc-border: #3c4043;
  --gpc-border-strong: #5f6368;
  --gpc-text: #e8eaed;
  --gpc-text-secondary: #9aa0a6;
  --gpc-text-disabled: #80868b;

  --accent: var(--gpc-blue);
  --primary: var(--gpc-blue);

  --bg: var(--gpc-bg);
  --portal-content-bg: var(--gpc-bg);
  --surface: var(--gpc-surface-2);
  --panel: var(--gpc-surface);
  --border: var(--gpc-border);
  --border-strong: var(--gpc-border-strong);
  --text: var(--gpc-text);
  --muted: var(--gpc-text-secondary);
  --portal-link: var(--gpc-blue);
  --portal-link-hover: var(--gpc-blue-hover);
  --sidebar-nav: var(--gpc-text-secondary);
  --vk-nav-hover: var(--gpc-blue);
  --vk-nav-active-bg: var(--gpc-blue-surface);
  --accent-muted: var(--gpc-blue-surface);
  --btn-primary-bg: var(--gpc-blue);
  --btn-primary-fg: #202124;
  --btn-surface-bg: var(--gpc-surface);
  --btn-surface-bg-hover: var(--gpc-surface-2);
  --btn-surface-border: var(--gpc-border);
  --btn-surface-border-hover: var(--gpc-border-strong);
  --btn-surface-fg: var(--gpc-text);
  --btn-surface-fg-hover: var(--gpc-text);
  --bubble-out-mid: var(--gpc-blue);
  --bubble-out-bottom: var(--gpc-blue-hover);
  --bubble-out-stroke: var(--gpc-blue-pressed);
  --input-bg: var(--gpc-surface);
  --pill-bg: var(--gpc-surface-2);
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.45), 0 4px 8px 3px rgba(0, 0, 0, 0.35);
  --thread-top: var(--gpc-bg);
  --thread-bottom: var(--gpc-bg);
  --nav-top: var(--gpc-surface);
  --nav-mid: var(--gpc-surface);
  --nav-bottom: var(--gpc-surface);
  --nav-stroke: var(--gpc-border);
  --bubble-in-top: var(--gpc-surface);
  --bubble-in-mid: var(--gpc-surface);
  --bubble-in-bottom: var(--gpc-surface);
  --bubble-in-stroke: var(--gpc-border);
  --tab-top: var(--gpc-surface);
  --tab-bottom: var(--gpc-surface);
  --scrollbar-thumb: var(--gpc-border);
  --scrollbar-thumb-hover: var(--gpc-border-strong);
}

:root {
  --sidebar-w: var(--portal-sidebar-w, 16rem);
  --gpc-topbar-h: 3.5rem;
}

/* —— Typography —— */
html,
body {
  font-family: var(--portal-font-family) !important;
  font-size: var(--portal-font-size-root) !important;
  line-height: var(--portal-line-height) !important;
  letter-spacing: 0.00625em;
}

.topbar__title {
  font-size: var(--portal-font-size-lg) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

#appView h2.page-title,
#appView h3.page-title,
#adminApp h2.page-title,
.main h2.page-title,
.main h3.page-title {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gpc-text-secondary) !important;
}

/* —— Page canvas —— */
[data-theme="light"] body,
[data-theme="dark"] body {
  background: var(--gpc-bg) !important;
  background-image: none !important;
}

.layout__main {
  background: var(--gpc-bg) !important;
}

.main {
  padding: 1.5rem !important;
}

@media (min-width: 960px) {
  .main {
    padding: 1.5rem 1.75rem 2rem !important;
  }
}

/* —— Sidebar (Play Console nav rail) —— */
[data-theme="light"] .sidebar,
[data-theme="dark"] .sidebar {
  width: var(--portal-sidebar-w) !important;
  background: var(--gpc-surface) !important;
  border-right: 1px solid var(--gpc-border) !important;
  box-shadow: none !important;
}

[data-theme="light"] .sidebar__brand,
[data-theme="dark"] .sidebar__brand {
  background: var(--gpc-surface) !important;
  border-bottom: 1px solid var(--gpc-border) !important;
  min-height: var(--gpc-topbar-h);
  display: flex;
  align-items: center;
}

.sidebar__nav {
  padding: 0.5rem 0.75rem !important;
  gap: 0.125rem !important;
}

.side-link,
.side-link--link,
.side-aux {
  color: var(--gpc-text-secondary) !important;
  border-radius: 0 1.5rem 1.5rem 0 !important;
  border-left: 3px solid transparent !important;
  padding: 0.5rem 0.75rem 0.5rem 0.65rem !important;
  font-weight: 500 !important;
  font-size: var(--portal-font-size-sidebar) !important;
  margin-right: 0 !important;
}

.side-link:hover,
.side-link--link:hover,
.side-aux:hover {
  color: var(--gpc-text) !important;
  background: var(--gpc-surface-2) !important;
}

.side-link.active {
  color: var(--gpc-blue) !important;
  background: var(--gpc-blue-surface) !important;
  border-left-color: var(--gpc-blue) !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .side-link.active {
  color: var(--gpc-blue) !important;
}

.side-link__ico {
  opacity: 0.82;
}

.side-link.active .side-link__ico {
  opacity: 1;
}

.sidebar__bottom {
  border-top: 1px solid var(--gpc-border) !important;
  padding: 0.5rem 0.75rem 0.75rem !important;
}

/* —— Top bar —— */
[data-theme="light"] .topbar,
[data-theme="dark"] .topbar {
  min-height: var(--gpc-topbar-h);
  background: var(--gpc-surface) !important;
  border-bottom: 1px solid var(--gpc-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-inline: 1rem !important;
}

.topbar__title {
  color: var(--gpc-text) !important;
}

.topbar-notif,
.topbar-profile__trigger,
.sidebar-toggle,
.topbar .btn-signout {
  color: var(--gpc-text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.topbar-notif:hover,
.topbar-profile__trigger:hover,
.sidebar-toggle:hover {
  background: var(--gpc-surface-2) !important;
  color: var(--gpc-text) !important;
}

.topbar-notif.is-active {
  background: var(--gpc-blue-surface) !important;
  color: var(--gpc-blue) !important;
}

.topbar-profile__fallback {
  background: var(--gpc-blue) !important;
}

/* —— Cards & surfaces —— */
[data-theme="light"] .card,
[data-theme="dark"] .card,
[data-theme="light"] .login-card,
[data-theme="dark"] .login-card {
  background: var(--gpc-surface) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

#appView .card,
#adminApp .card {
  padding: 1rem 1.125rem !important;
}

.dash-analytics-card,
.dash-done-trend-card,
.dash-presence-card,
.dash-job-panel,
.dash-top-split__aside,
.dash-panel {
  background: var(--gpc-surface) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

#dashActiveWorkCard.dash-panel.dash-active-work-card,
#dashActiveDeploymentsCard.dash-panel.dash-active-deployments-card {
  padding: 0.85rem 1rem 1rem !important;
}

#dashActiveWorkCard .tm-table-wrap,
#dashActiveWorkCard .tm-table-wrap--dashboard {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#dashActiveWorkCard .tm-data-table tbody td {
  border-bottom: none !important;
  background: transparent !important;
}

#dashActiveWorkCard .tm-data-table tbody tr,
#dashActiveWorkCard .tm-data-table tbody tr:hover {
  background: transparent !important;
}

/* —— Buttons —— */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.0107142857em;
  text-transform: none !important;
  min-height: 2.25rem;
  padding: 0.5rem 1rem !important;
}

.btn.primary {
  background: var(--gpc-blue) !important;
  border-color: var(--gpc-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn.primary:hover {
  background: var(--gpc-blue-hover) !important;
  border-color: var(--gpc-blue-hover) !important;
  filter: none !important;
}

.btn:not(.primary):not(.ghost) {
  background: var(--gpc-surface) !important;
  border-color: var(--gpc-border) !important;
  color: var(--gpc-blue) !important;
}

.btn:not(.primary):not(.ghost):hover {
  background: var(--gpc-surface-2) !important;
  border-color: var(--gpc-border-strong) !important;
}

.btn.ghost {
  color: var(--gpc-blue) !important;
}

.btn.ghost:hover {
  background: var(--gpc-blue-surface) !important;
}

/* —— Forms —— */
input,
select,
textarea {
  border-radius: var(--radius-sm) !important;
  border-color: var(--gpc-border) !important;
  background: var(--gpc-surface) !important;
  font-size: var(--portal-font-size-body) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gpc-blue) !important;
  box-shadow: 0 0 0 1px var(--gpc-blue) !important;
  outline: none !important;
}

label {
  color: var(--gpc-text-secondary) !important;
  font-weight: 400 !important;
}

/* —— Tables —— */
.table-wrap,
.tm-table-wrap {
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  background: var(--gpc-surface) !important;
  box-shadow: none !important;
}

.tm-data-table thead th,
.data-table thead th,
.tm-table-compact thead th,
.dash-mini-table th {
  background: var(--gpc-surface) !important;
  border-bottom: 1px solid var(--gpc-border) !important;
  color: var(--gpc-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.tm-data-table tbody td,
.data-table tbody td {
  border-bottom: 1px solid var(--gpc-border) !important;
}

.tm-data-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--gpc-surface-2) !important;
}

.tm-data-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* —— Task / ticket manager chrome (flat full-bleed) —— */
.tm-page-header,
.stk-mgr-header {
  background: var(--gpc-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--gpc-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tm-page-header .tm-toolbar,
.tm-page-header .stk-page-toolbar,
.tm-page-header .stk-mgr-toolbar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#tab-help-support .hs-page-header.card,
#tab-team-dashboard .td-page-header.card {
  background: var(--gpc-surface) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.tm-tab {
  border-radius: var(--radius-sm) !important;
  color: var(--gpc-text-secondary) !important;
}

.tm-tab.is-active {
  background: var(--gpc-blue-surface) !important;
  color: var(--gpc-blue) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}

.tm-task-card,
.tm-series-card {
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.tm-task-card:hover,
.tm-series-card:hover {
  border-color: var(--gpc-border-strong) !important;
  box-shadow: none !important;
}

/* —— Modals —— */
.active-dep-modal__panel,
.modal-dialog {
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}

.active-dep-modal__head {
  border-bottom: 1px solid var(--gpc-border) !important;
}

/* —— Login —— */
.login-wrap {
  background: var(--gpc-bg) !important;
}

.login-card {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

.login-card h1 {
  font-weight: 400 !important;
  color: var(--gpc-text) !important;
}

/* —— Dashboard widgets —— */
.dash-analytics-kpi,
.dash-active-work-metric,
.dash-presence-card {
  border-radius: var(--radius) !important;
}

.dash-work-tag {
  color: var(--gpc-text-secondary) !important;
}

.dash-work-tag__num {
  color: var(--gpc-text) !important;
}

.dash-active-work-section__label,
.dash-active-deployments-card__head .page-title,
.dash-active-work-card__head .page-title,
.dash-analytics-card__title {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--gpc-text) !important;
}

/* —— Admin toolbar —— */
#adminApp .toolbar,
.admin-shell .toolbar {
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  background: var(--gpc-surface) !important;
  box-shadow: none !important;
}

/* —— Deployment board —— */
#tab-deployment .dp-users-board__main,
#tab-deployment .dp-users-sidebar,
#tab-deployment .dp-board-col {
  border-color: var(--gpc-border) !important;
  box-shadow: none !important;
}

#tab-deployment .dp-board-col__head {
  background: var(--gpc-blue) !important;
}

/* —— Selection —— */
::selection {
  background: rgba(26, 115, 232, 0.2);
}

/* —— Language switch —— */
.lang-switch {
  border-color: var(--gpc-border) !important;
  background: var(--gpc-surface) !important;
}

.lang-switch__btn.is-active {
  background: var(--gpc-blue-surface) !important;
  color: var(--gpc-blue) !important;
}

/* —— Compact mobile —— */
@media (max-width: 768px) {
  .main {
    padding: 1rem !important;
  }

  .topbar__title {
    font-size: 1.0625rem !important;
  }
}

/* —— RTL Arabic typography —— */
[dir="rtl"] body,
html.is-rtl body {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* —— Kill legacy glossy chrome —— */
[data-theme="light"] .sidebar__brand::after,
[data-theme="dark"] .sidebar__brand::after,
[data-theme="light"] .topbar::after,
[data-theme="dark"] .topbar::after {
  display: none !important;
}

[data-theme="light"] .sidebar__brand,
[data-theme="dark"] .sidebar__brand {
  background: var(--gpc-surface) !important;
  box-shadow: none !important;
}

[data-theme="light"] .sidebar__brand .brand-logos__block,
[data-theme="dark"] .sidebar__brand .brand-logos__block {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar__brand .brand-logos__mark {
  background: transparent !important;
}

.sidebar__brand .brand-logos {
  padding: 0.35rem 0.75rem;
}

/* —— Nav active (override portal-clean text color) —— */
[data-theme="light"] .side-link.active,
[data-theme="dark"] .side-link.active {
  color: var(--gpc-blue) !important;
  background: var(--gpc-blue-surface) !important;
  border-left-color: var(--gpc-blue) !important;
}

/* —— Profile & notification menus —— */
.topbar-profile__menu,
.topbar-notif__panel,
.notif-panel {
  background: var(--gpc-surface) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}

.topbar-profile__menu-item,
.notif-panel__item,
.notif-item {
  color: var(--gpc-text) !important;
  border-radius: var(--radius-sm) !important;
}

.topbar-profile__menu-item:hover,
.notif-panel__item:hover,
.notif-item:hover {
  background: var(--gpc-surface-2) !important;
  color: var(--gpc-text) !important;
}

.topbar-profile__trigger,
.topbar-notif {
  color: var(--gpc-text-secondary) !important;
}

.topbar-profile__menu-item#logoutBtn:hover {
  background: var(--gpc-surface-2) !important;
  color: var(--gpc-text) !important;
}

/* —— Status badges & pills —— */
.badge,
.pill,
.tm-badge,
.tm-pill,
.dash-badge {
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.02em;
}

.badge--primary,
.tm-badge--open,
.tm-status--open {
  background: var(--gpc-blue-surface) !important;
  color: var(--gpc-blue) !important;
}

/* —— Links —— */
a,
.link,
.tm-link {
  color: var(--gpc-blue) !important;
}

a:hover,
.link:hover,
.tm-link:hover {
  color: var(--gpc-blue-hover) !important;
}

/* —— Search / filter bars —— */
.tm-search,
.tm-filter-bar,
.toolbar input[type="search"],
.toolbar input[type="text"] {
  background: var(--gpc-surface) !important;
  border: 1px solid var(--gpc-border) !important;
  border-radius: var(--radius-sm) !important;
}

/* —— Scrollbars —— */
* {
  scrollbar-color: var(--gpc-border) transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--gpc-border) !important;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gpc-border-strong) !important;
}

/* —— Flatten task/ticket gradient panels —— */
.tm-page-header,
.tm-toolbar,
.stk-mgr-header,
.hs-page-header,
.td-page-header,
.tm-modal__panel,
.tm-drawer {
  background-image: none !important;
}

/* —— Chips & segmented controls —— */
.chip,
.segmented-control__btn {
  border-radius: var(--radius-sm) !important;
  border-color: var(--gpc-border) !important;
}

.chip.is-active,
.segmented-control__btn.is-active {
  background: var(--gpc-blue-surface) !important;
  color: var(--gpc-blue) !important;
  border-color: transparent !important;
}

/* —— Empty states —— */
.empty-state,
.tm-empty,
.no-data {
  color: var(--gpc-text-secondary) !important;
}

/* —— Focus rings (Material) —— */
:focus-visible {
  outline: 2px solid var(--gpc-blue) !important;
  outline-offset: 2px;
}

/* —— New task modal: text tabs (not toolbar pills) —— */
.inat-create__form--tabs .inat-create__tabbar--header .inat-create__tab,
.inat-create__form--tabs .inat-create__tabbar--header .inat-create__tab.is-active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8125rem !important;
}
.inat-create__form--tabs .inat-create__tabbar--header .inat-create__tab.is-active {
  color: var(--gpc-blue) !important;
  border-bottom-color: var(--gpc-blue) !important;
  font-weight: 600 !important;
}
.inat-create__form--tabs .inat-create__tabbar--header {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}