/* ============================================================
   COGIENS RESPONSIVE SHELL v0.2
   CGS-UI-RWD-001
   Mobile First + Responsive by Default
   ============================================================ */

:root{
  --cg-bp-mobile:430px;
  --cg-bp-small:767px;
  --cg-bp-tablet:1199px;

  --cg-touch-min:44px;

  --cg-gap-xs:8px;
  --cg-gap-sm:12px;
  --cg-gap-md:18px;
  --cg-gap-lg:28px;

  --cg-page-x:clamp(16px,3vw,32px);
  --cg-section-y:clamp(28px,5vw,72px);

  --cg-header-h:72px;
  --cg-sidebar-w:260px;
}

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

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

body{
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:hidden;
}

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

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

button,
[role="button"],
.cg-button{
  min-height:var(--cg-touch-min);
}

/* Containers */
.cg-container{
  width:min(100% - (var(--cg-page-x) * 2),1200px);
  margin-inline:auto;
}

.cg-section{
  padding-block:var(--cg-section-y);
}

/* Responsive grid */
.cg-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cg-gap-md);
}

.cg-grid-2,
.cg-grid-3,
.cg-grid-4{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cg-gap-md);
}

/* Header */
.cg-header{
  position:relative;
  z-index:100;
  min-height:var(--cg-header-h);
  display:flex;
  align-items:center;
  gap:var(--cg-gap-sm);
  padding-inline:var(--cg-page-x);
}

.cg-brand-lockup{
  display:flex;
  align-items:center;
  min-width:0;
  flex:0 1 auto;
}

.cg-brand-lockup img{
  display:block;
  width:auto;
  max-width:min(52vw,210px);
  max-height:58px;
  object-fit:contain;
}

.cg-header-nav{
  display:none;
}

.cg-mobile-menu-button{
  margin-inline-start:auto;
  min-width:44px;
  min-height:44px;
}

.cg-mobile-drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(88vw,360px);
  transform:translateX(105%);
  transition:transform .2s ease;
  z-index:1000;
  overflow-y:auto;
}

.cg-mobile-drawer[data-open="true"]{
  transform:translateX(0);
}

/* Sidebar */
.cg-app-shell{
  display:block;
  min-width:0;
}

.cg-sidebar{
  width:100%;
  max-width:100%;
  overflow-x:auto;
}

.cg-main{
  min-width:0;
  padding:var(--cg-page-x);
}

/* Tables */
.cg-table-wrap,
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.cg-table-wrap table,
.table-wrap table{
  min-width:640px;
}

/* Modal */
.cg-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:end center;
  z-index:2000;
}

.cg-modal-panel{
  width:100%;
  max-height:92vh;
  overflow:auto;
  border-radius:18px 18px 0 0;
}

/* IM */
.cg-chat-panel{
  position:fixed;
  inset:8px;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  border-radius:14px;
}

/* Typography */
h1{
  font-size:clamp(2rem,8vw,3rem);
  line-height:1.05;
}

h2{
  font-size:clamp(1.5rem,5vw,2.2rem);
}

/* Marquee / ticker */
.cg-marquee,
.ticker{
  overflow:hidden;
  max-width:100%;
}

.cg-marquee-track,
.ticker-inner{
  animation-duration:48s !important;
}

.cg-marquee:hover .cg-marquee-track,
.ticker:hover .ticker-inner{
  animation-play-state:paused !important;
}

/* 431–767 */
@media (min-width:431px){
  .cg-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cg-marquee-track,
  .ticker-inner{
    animation-duration:44s !important;
  }
}

/* 768–1199 */
@media (min-width:768px){
  :root{
    --cg-header-h:80px;
  }

  .cg-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cg-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cg-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cg-modal{
    place-items:center;
  }

  .cg-modal-panel{
    width:min(92vw,760px);
    border-radius:18px;
  }

  .cg-chat-panel{
    inset:auto 16px 16px auto;
    width:min(420px,calc(100vw - 32px));
    height:min(620px,calc(100vh - 32px));
  }

  .cg-marquee-track,
  .ticker-inner{
    animation-duration:40s !important;
  }
}

/* 1200+ */
@media (min-width:1200px){
  .cg-header-nav{
    display:flex;
    align-items:center;
    gap:var(--cg-gap-md);
    margin-inline-start:auto;
  }

  .cg-mobile-menu-button{
    display:none;
  }

  .cg-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .cg-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .cg-app-shell{
    display:grid;
    grid-template-columns:var(--cg-sidebar-w) minmax(0,1fr);
  }

  .cg-sidebar{
    position:sticky;
    top:var(--cg-header-h);
    height:calc(100vh - var(--cg-header-h));
    overflow-y:auto;
    overflow-x:hidden;
  }

  .cg-marquee-track,
  .ticker-inner{
    animation-duration:34s !important;
  }
}

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

  .cg-marquee-track,
  .ticker-inner{
    animation:none !important;
    transform:none !important;
  }
}