/* ═══════════════════════════════════════════════════════════════════
   COLLAB ERP — RESPONSIVE FRAMEWORK
   ═══════════════════════════════════════════════════════════════════
   Mobile-first. Breakpoints:
     - Mobile:  default (< 640px)
     - Tablet:  640px+
     - Desktop: 1024px+
     - XL:      1280px+

   Standardises layout, typography, spacing, and component sizing
   across every Collab ERP page (front + back office).
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1) RESET / BASE
   ───────────────────────────────────────────────────────────────── */

:root {
  --c-navy: #0a1838;
  --c-navy-2: #122a59;
  --c-sky: #38b6ff;
  --c-sky-2: #5cc5ff;
  --c-orange: #ff8c2a;
  --c-orange-2: #f5a623;
  --c-green: #2ed47a;
  --c-red: #dc3545;
  --c-text: #0a1838;
  --c-text-2: #555;
  --c-text-3: #888;
  --c-border: #e0e6f0;
  --c-border-2: #d0dfe8;
  --c-bg: #f9fbff;
  --c-card: #ffffff;
  --c-elevated: #f0f4f8;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --container-narrow: 720px;
  --container-default: 1120px;
  --container-wide: 1280px;
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body { overflow-x: hidden; }  /* prevent horizontal scrollbar from off-screen elements */

img, video, svg { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────
   2) FLUID TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

h1 { font-size: clamp(22px, 4vw, 32px); line-height: 1.2; }
h2 { font-size: clamp(18px, 3vw, 24px); line-height: 1.25; }
h3 { font-size: clamp(15px, 2.4vw, 18px); line-height: 1.3; }

/* ─────────────────────────────────────────────────────────────────
   3) CONTAINERS — fluid padding, capped max width
   ───────────────────────────────────────────────────────────────── */

.collab-container,
.activity-feed-wrap,
.profile-page,
.workspace-page,
main.collab-main {
  width: 100%;
  max-width: var(--container-default);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .collab-container, .activity-feed-wrap, .profile-page, .workspace-page, main.collab-main {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .collab-container, .activity-feed-wrap, .profile-page, .workspace-page, main.collab-main {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .activity-feed-wrap { max-width: var(--container-wide); }
}

/* ─────────────────────────────────────────────────────────────────
   4) HERO SECTIONS — responsive padding
   ───────────────────────────────────────────────────────────────── */

.ta-hero, .ud-hero, .cart-hero, .sa-hero, .profile-hero, .community-hero {
  padding: var(--space-5) var(--space-4) !important;
}

@media (min-width: 640px) {
  .ta-hero, .ud-hero, .cart-hero, .sa-hero, .profile-hero {
    padding: var(--space-6) var(--space-6) !important;
  }
}

@media (min-width: 1024px) {
  .ta-hero, .ud-hero, .cart-hero, .sa-hero, .profile-hero {
    padding: var(--space-8) var(--space-8) !important;
  }
}

/* Hero hero-stacking on mobile */
.ta-hero, .ud-hero, .cart-hero {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .ta-hero h1, .ud-hero h1, .cart-hero h1 { font-size: 20px !important; }
  .ta-hero p, .ud-hero p, .cart-hero p { font-size: 13px !important; }
  .ta-hero-meta, .ud-hero-cta { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   5) STAT GRIDS — auto-fit to viewport
   ───────────────────────────────────────────────────────────────── */

.ta-stat-grid, .ud-stat-grid, .cart-module-grid, .ta-finance-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

@media (min-width: 640px) {
  .ta-stat-grid, .ud-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .ta-stat-grid, .ud-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ta-stat-num, .ud-sc-num { font-size: 20px !important; }
  .ta-stat-lbl, .ud-sc-lbl { font-size: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   6) MAIN 2-COLUMN GRIDS (Tenant Admin, User Dashboard)
   ───────────────────────────────────────────────────────────────── */

.ta-main-grid, .ud-grid-2col {
  grid-template-columns: 1fr !important;
  gap: var(--space-4) !important;
}

@media (min-width: 1024px) {
  .ta-main-grid { grid-template-columns: minmax(0, 1.6fr) 320px !important; }
  .ud-grid-2col { grid-template-columns: minmax(0, 1.6fr) 320px !important; }
}

/* Analytics 3-column → stacks on tablet+ */
.ta-analytics-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-4) !important;
}
@media (min-width: 1024px) {
  .ta-analytics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1023px) {
  /* Inline style with grid-column: span 2 still works at desktop;
     at smaller widths every widget spans 1 column */
  .ta-analytics-grid > [style*="grid-column"] { grid-column: auto !important; }
}

/* ─────────────────────────────────────────────────────────────────
   7) CART PAGE
   ───────────────────────────────────────────────────────────────── */

.cart-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-4) !important;
}
@media (min-width: 1100px) {
  .cart-grid { grid-template-columns: minmax(0, 1.8fr) 380px !important; }
}

.cart-summary {
  position: static !important;
}
@media (min-width: 1100px) {
  .cart-summary { position: sticky !important; top: 50px; }
}

/* ─────────────────────────────────────────────────────────────────
   8) COMMUNITY FEED — 3-column shell
   ───────────────────────────────────────────────────────────────── */

.community-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) !important;
}

@media (min-width: 820px) {
  .community-shell { grid-template-columns: minmax(0, 1fr) 280px !important; }
  .community-rail-left { display: none !important; }
}

@media (min-width: 1100px) {
  .community-shell { grid-template-columns: 240px minmax(0, 1fr) 280px !important; }
  .community-rail-left { display: flex !important; }
}

.community-rail {
  position: static !important;
}
@media (min-width: 1024px) {
  .community-rail { position: sticky !important; top: 86px; }
}

.community-ads-banner {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.community-ads-banner > * { flex-shrink: 0; }

/* Feed posts: tighten padding on mobile */
@media (max-width: 640px) {
  .feed-post { padding: 14px !important; }
  .feed-post-image { max-height: 280px !important; }
  .composer { padding: 14px !important; }
  .composer-actions { flex-wrap: wrap; gap: 8px; }
}

/* Share menu fits viewport on mobile */
@media (max-width: 480px) {
  .share-menu {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }
  .share-menu-item { padding: 12px !important; font-size: 14px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   9) JOBS / VACANCIES
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Stack hero columns */
  main[style*="max-width:1200px"] > div[style*="border-radius:20px"] {
    padding: 24px var(--space-4) !important;
  }
  /* Card grid on jobs page already uses auto-fill minmax(360px), which
     auto-stacks below 360px viewport. Tighten for very small. */
}

/* Apply modal scrolls properly on small screens */
#apply-modal > div, #jobs-modal > div, #apps-modal > div {
  max-height: 92vh !important;
  margin: 4vh auto !important;
}
@media (max-width: 640px) {
  #apply-modal > div, #jobs-modal > div, #apps-modal > div {
    padding: 20px var(--space-4) !important;
  }
  /* Form fields stack 1-column on phone */
  #apply-form > div[style*="grid-template-columns:1fr 1fr"],
  #jobs-form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   10) PROFILE + WORKSPACE PAGES
   ───────────────────────────────────────────────────────────────── */

.profile-page > div[style*="grid-template-columns:repeat(auto-fit"],
.workspace-page > div {
  max-width: 100%;
}

/* Workspace file table → cards on mobile */
@media (max-width: 640px) {
  .workspace-page table { font-size: 12px; }
  .workspace-page th, .workspace-page td {
    padding: 8px 10px !important;
  }
  .workspace-page th:nth-child(2),
  .workspace-page td:nth-child(2) { display: none; }  /* hide size */
}

/* ─────────────────────────────────────────────────────────────────
   11) FOOTER & TABLES
   ───────────────────────────────────────────────────────────────── */

table.ta-table, table.ud-table, .wp-list-table {
  width: 100%;
  font-size: 13px;
}

@media (max-width: 640px) {
  table.ta-table, table.ud-table {
    font-size: 12px;
  }
  table.ta-table th, table.ta-table td,
  table.ud-table th, table.ud-table td {
    padding: 8px 6px !important;
  }
  /* On very small screens, hide low-priority columns */
  table.ta-table td:last-child small,
  table.ud-table td:last-child small { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   12) HEADER — make the dropdown work on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .collab-header, header.site-header {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }
  .collab-header .brand-text { display: none; }
  .collab-header .nav-link, .site-header .nav-link {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

/* Burger / mobile menu toggle support */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
  .desktop-only { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   13) BUTTONS — tap-friendly on mobile
   ───────────────────────────────────────────────────────────────── */

.btn, button, .button {
  min-height: 36px;
  touch-action: manipulation;
}
@media (max-width: 640px) {
  .btn-xl, button.btn-xl { padding: 12px 18px !important; font-size: 14px !important; }
  .btn-lg { padding: 10px 18px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   14) MODAL OVERLAYS — full-screen on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  [id$="-modal"][style*="display:flex"] > div,
  div[style*="position:fixed"][style*="z-index:99999"] > div {
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   15) FOCUS STATES — accessibility
   ───────────────────────────────────────────────────────────────── */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-sky);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   16) PRINT
   ───────────────────────────────────────────────────────────────── */

@media print {
  .community-rail, .ta-hero, .ud-hero, .community-ads, .community-ads-banner,
  .follow-btn, .share-menu-wrap, .composer, .feed-scope-tabs,
  #ta-revenue-chart, #sa-revenue-chart, #sa-growth-chart { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ─────────────────────────────────────────────────────────────────
   17) HCM / WP-ADMIN compatibility
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
  /* WP admin sidebar collapses on its own, but our content needs slimmer padding */
  .wrap.collab-admin, .wrap.collab-tenant-admin {
    margin-right: 0 !important;
  }
  .wrap.collab-admin h1 {
    flex-wrap: wrap;
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   18) FRONTEND DASHBOARD SIDEBAR (cdash-shell)
   ───────────────────────────────────────────────────────────────── */

.cdash-shell { display: grid; grid-template-columns: 1fr; gap: var(--space-4) !important; }

@media (min-width: 1024px) {
  .cdash-shell { grid-template-columns: 260px minmax(0, 1fr) !important; }
}

@media (max-width: 1023px) {
  .cdash-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) !important;
  }
  /* On tablet, the side nav becomes a horizontal scroll strip */
  .cdash-side-nav {
    flex-direction: row !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    grid-column: 1 / -1;
  }
  .cdash-side-link { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .cdash-sidebar { grid-template-columns: 1fr !important; }
  .cdash-side-nav { flex-direction: column !important; overflow-x: visible !important; white-space: normal; }
  .cdash-side-link { flex-shrink: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   19) MESSAGES PAGE
   ───────────────────────────────────────────────────────────────── */

.msgr-shell {
  display: grid;
  grid-template-columns: 1fr !important;
  height: auto !important;
}

@media (min-width: 768px) {
  .msgr-shell {
    grid-template-columns: 320px 1fr !important;
    height: 600px !important;
  }
}

@media (max-width: 767px) {
  .msgr-threads { max-height: 240px; border-right: 0; border-bottom: 1px solid #e0e6f0; }
  .msgr-conversation { min-height: 400px; }
}

/* ─────────────────────────────────────────────────────────────────
   20) DOCS / FAQ / LANDING PAGES (catch-all)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Any 2/3-column grid inside .container collapses to 1 col on mobile */
  main .container > div[style*="grid-template-columns:repeat(2"],
  main .container > div[style*="grid-template-columns:repeat(3"],
  main .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables in long-form pages — let them scroll horizontally */
  main .container table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────────
   21) NOTIFICATION + MESSAGE BELL DROPDOWNS — fit mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .collab-notif-panel {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   22) HERO BLOCKS WITH ABSOLUTE DECORATIONS — stop overflow
   ───────────────────────────────────────────────────────────────── */

.ta-hero, .ud-hero, .cart-hero, .sa-hero, .profile-hero, .community-hero,
[style*="border-radius:20px"][style*="overflow:hidden"],
[style*="border-radius:16px"][style*="overflow:hidden"] {
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   23) FORMS — full-width inputs on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="date"],
  form select,
  form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;  /* prevents iOS zoom on focus */
  }
  /* Generic two-col form rows stack */
  form [style*="grid-template-columns:1fr 1fr"],
  form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   24) ANNOUNCEMENT BAR + TRIAL ALERT — wrap on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .alert {
    flex-wrap: wrap !important;
    text-align: center;
  }
  .alert > .alert-body { flex: 1 1 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────
   25) FOOTER — stack columns on mobile
   ───────────────────────────────────────────────────────────────── */

.site-footer .footer-inner,
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}