/* ============================================================
   COGIENS APP — RESPONSIVE SHELL ADAPTER v0.2
   CGS-UI-RWD-001
   ============================================================ */

:root{
  --cg-blue:#0085D0;
  --cg-orange:#EB6100;
  --cg-navy:#0D2C54;
  --cg-touch:44px;
}

/* ------------------------------------------------------------
   Frozen brand colors
   ------------------------------------------------------------ */

html,
html[data-theme="light"],
html[data-theme="dark"]{
  --brand:var(--cg-blue) !important;
  --primary:var(--cg-blue) !important;
  --primary-strong:#006FAE !important;
}

/* ------------------------------------------------------------
   Global safety
   ------------------------------------------------------------ */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

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

button,
.button,
.icon-button,
.language-key,
.auth-links a{
  min-height:var(--cg-touch);
}

/* ------------------------------------------------------------
   APP Header
   ------------------------------------------------------------ */

.topbar{
  position:sticky;
  top:0;
  z-index:500;
  min-height:82px;
  padding:10px clamp(14px,2.5vw,28px);
  gap:16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

/*
   Replace old square "C" brand with official Cogiens logo.
*/
.brand.cg-official-brand{
  width:220px;
  min-width:220px;
  height:62px;
  display:flex;
  align-items:center;
  overflow:visible;
}

.cg-app-logo{
  display:block;
  width:auto;
  height:58px;
  max-height:58px;
  object-fit:contain;
}

html[data-theme="light"] .cg-app-logo-dark{
  display:none !important;
}

html[data-theme="light"] .cg-app-logo-light{
  display:block !important;
}

html[data-theme="dark"] .cg-app-logo-light{
  display:none !important;
}

html[data-theme="dark"] .cg-app-logo-dark{
  display:block !important;
}

/* Default before JS theme initialization */
html:not([data-theme="dark"]) .cg-app-logo-dark{
  display:none;
}

/* ------------------------------------------------------------
   Primary top navigation
   ------------------------------------------------------------ */

.topnav{
  gap:6px;
}

.topnav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
}

/* Official orange registration CTA */
.auth-links .button,
.auth-links a.button{
  background:var(--cg-orange) !important;
  border-color:var(--cg-orange) !important;
  color:#fff !important;
}

.cg-mobile-nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

/* ------------------------------------------------------------
   Workspace
   ------------------------------------------------------------ */

.app-shell{
  min-width:0;
}

.workspace-main,
.panel,
.job-card,
.content-grid,
.stack{
  min-width:0;
}

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

.workspace-header h1{
  font-size:clamp(26px,3vw,42px);
}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media(max-width:1000px){

  .cg-mobile-nav-toggle{
    display:grid;
    place-items:center;
    flex:0 0 44px;
  }

  .topnav{
    display:none !important;
  }

  /*
     Public pages:
     menu button opens top navigation.
  */
  body:not(.cg-has-workspace-sidebar).cg-mobile-nav-open .topnav{
    display:flex !important;
    position:fixed;
    top:76px;
    left:12px;
    right:12px;
    z-index:700;
    padding:12px;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
  }

  body:not(.cg-has-workspace-sidebar).cg-mobile-nav-open .topnav a{
    width:100%;
  }
}

/* ------------------------------------------------------------
   Mobile / portrait phones
   ------------------------------------------------------------ */

@media(max-width:760px){

  .topbar{
    min-height:72px;
    padding:8px 12px;
    gap:8px;
  }

  .brand.cg-official-brand{
    width:164px;
    min-width:164px;
    height:54px;
  }

  .cg-app-logo{
    height:50px;
    max-height:50px;
  }

  /*
     APP workspace sidebar becomes a real off-canvas drawer.
     No more horizontal scrolling navigation.
  */

  .app-shell{
    grid-template-columns:1fr !important;
  }

  .app-shell > .sidebar{
    position:fixed !important;
    top:72px !important;
    left:0 !important;
    bottom:0 !important;
    width:min(310px,86vw) !important;
    height:auto !important;
    z-index:650 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;

    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:0 18px 50px rgba(0,0,0,.24);
  }

  body.cg-mobile-nav-open.cg-has-workspace-sidebar
  .app-shell > .sidebar{
    transform:translateX(0);
  }

  .app-shell > .sidebar nav{
    display:grid !important;
    min-width:0 !important;
    width:100% !important;
  }

  .app-shell > .sidebar nav a,
  .app-shell > .sidebar nav button{
    width:100%;
    min-height:48px;
  }

  body.cg-mobile-nav-open.cg-has-workspace-sidebar::after{
    content:"";
    position:fixed;
    inset:72px 0 0 0;
    z-index:640;
    background:rgba(5,18,36,.46);
  }

  .workspace-main{
    width:100%;
    padding:18px 16px 34px !important;
  }

  .workspace-header{
    flex-direction:column;
    align-items:stretch;
  }

  .workspace-header > div:last-child{
    width:100%;
  }

  .workspace-header .button{
    width:100%;
    justify-content:center;
  }

  .job-grid,
  .content-grid,
  .metrics,
  .grid{
    grid-template-columns:1fr !important;
  }

  /*
     Tables may scroll only inside table wrapper.
     They may not stretch the whole page.
  */

  table{
    font-size:14px;
  }

  th,
  td{
    padding:10px 12px;
  }

  .hero{
    padding-left:16px;
    padding-right:16px;
  }

  .hero h1{
    font-size:clamp(34px,10vw,48px) !important;
    line-height:1.08;
  }

  .hero-copy > p:not(.eyebrow){
    font-size:16px !important;
    line-height:1.7;
  }
}

/* ------------------------------------------------------------
   Small portrait phones
   ------------------------------------------------------------ */

@media(max-width:430px){

  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .brand.cg-official-brand{
    grid-column:1;
    width:145px;
    min-width:145px;
    height:50px;
  }

  .cg-app-logo{
    height:46px;
    max-height:46px;
  }

  .cg-mobile-nav-toggle{
    grid-column:2;
    grid-row:1;
  }

  .tri-keys{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .auth-links,
  .account-menu{
    grid-column:2;
    grid-row:2;
    justify-self:end;
    max-width:150px;
  }

  .auth-links{
    display:flex;
    gap:6px;
  }

  .auth-links a{
    padding-left:10px;
    padding-right:10px;
  }

  .account-menu summary{
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .app-shell > .sidebar{
    top:116px !important;
  }

  body.cg-mobile-nav-open.cg-has-workspace-sidebar::after{
    inset:116px 0 0 0;
  }

  .workspace-main{
    padding:16px 14px 30px !important;
  }

  .panel,
  .job-card,
  .onboarding{
    border-radius:14px;
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .app-shell > .sidebar{
    transition:none !important;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }
}