/* ============================================================
   COGIENS CONTROL PLANE — RWD ADAPTER v0.2
   CGS-UI-RWD-001
   ============================================================ */

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

/* ------------------------------------------------------------
   Frozen Cogiens colors
   ------------------------------------------------------------ */

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

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

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

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

button,
.button,
.control-key{
  min-height:var(--cg-touch);
}

/* ------------------------------------------------------------
   Sidebar brand
   ------------------------------------------------------------ */

.sidebar{
  background:linear-gradient(
    180deg,
    var(--cg-navy),
    #123E68
  ) !important;
}

.brand.cg-official-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:0 6px 20px !important;
}

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

.cg-cp-logo-light{
  display:none;
}

.cg-cp-logo-dark{
  display:block;
}

.brand.cg-official-brand .cg-cp-subtitle{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.5;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.nav a{
  min-height:44px;
  display:flex;
  align-items:center;
}

.nav a.active{
  background:rgba(0,133,208,.26) !important;
  border-left:3px solid var(--cg-orange);
  color:#fff !important;
}

.nav a:hover{
  background:rgba(255,255,255,.10) !important;
}

/* ------------------------------------------------------------
   Main / cards / tables
   ------------------------------------------------------------ */

.main,
.card,
.grid,
.table-wrap,
.form-grid,
.page-header{
  min-width:0;
}

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

.page-header h1{
  font-size:clamp(24px,3vw,34px);
}

button,
.button{
  background:var(--cg-blue) !important;
}

button:hover,
.button:hover{
  background:#006FAE !important;
}

button.secondary,
.button.secondary{
  background:#EAF5FB !important;
  color:var(--cg-blue) !important;
}

/* ------------------------------------------------------------
   Mobile navigation button
   ------------------------------------------------------------ */

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

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

@media(max-width:1000px){

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

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

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:840px){

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

  .cg-cp-mobile-toggle{
    display:grid;
    place-items:center;
    position:fixed;
    top:12px;
    left:12px;
    z-index:900;
  }

  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;

    width:min(310px,86vw) !important;
    height:100vh !important;

    z-index:850 !important;

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

    transform:translateX(-105%);
    transition:transform .22s ease;

    box-shadow:0 20px 60px rgba(0,0,0,.34);
  }

  body.cg-cp-nav-open .sidebar{
    transform:translateX(0);
  }

  body.cg-cp-nav-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:840;
    background:rgba(4,18,35,.52);
  }

  .nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-width:0 !important;
  }

  .nav a{
    width:100%;
    min-height:48px;
  }

  .main{
    width:100%;
    padding:72px 16px 38px !important;
  }

  .control-bar{
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }

  .page-header{
    display:block !important;
  }

  .page-header h1{
    font-size:clamp(24px,8vw,32px);
  }

  .grid.cards,
  .grid.two,
  .grid.three,
  .form-grid{
    grid-template-columns:1fr !important;
  }

  .action{
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .action > :last-child{
    grid-column:1 / -1;
  }
}

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

@media(max-width:430px){

  .main{
    padding:68px 14px 30px !important;
  }

  .sidebar{
    width:88vw !important;
  }

  .cg-cp-logo{
    height:58px;
    max-height:58px;
  }

  .control-bar{
    margin-top:0 !important;
  }

  .control-key{
    min-width:44px;
    padding:8px 10px !important;
  }

  table{
    font-size:13px;
  }

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

  .login-card{
    width:min(100%,520px) !important;
    padding:24px 18px !important;
  }

  .login-control-bar{
    top:10px !important;
    right:10px !important;
  }
}

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

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

  .sidebar{
    transition:none !important;
  }

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