:root{
    --ray-navy:#172554;        /* deep indigo-blue (sidebar vibe) */
    --ray-blue:#1e3a8a;        /* brand depth */
    --ray-accent:#2563eb;      /* action buttons */
    --ray-mint:#22c55e;        /* status ok */
    --ray-text:#0f172a;        /* slate-900 */
    --ray-muted:#64748b;       /* slate-500 */
    --ray-soft:#f1f5f9;        /* slate-100 */
    --card-radius:14px;
  }
  
  *{ box-sizing: border-box; }
  body.bg-app{
    background: linear-gradient(120deg, #f8fafc, #eef2ff);
    min-height: 100vh;
    color: var(--ray-text);
  }
  
  /* Login layout */
  .login-wrap{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
  }
  .brand-badge{
    display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; letter-spacing:.3px;
  }
  .brand-badge .dot{
    width:10px; height:10px; background:#ffd23f; border-radius:50%;
  }
  .card-login{
    width:100%;
    max-width: 980px;
    border:0;
    border-radius: var(--card-radius);
    box-shadow: 0 20px 50px rgba(2,6,23,.12);
    overflow:hidden;
  }
  .card-login .left{
    background: linear-gradient(180deg, var(--ray-blue), var(--ray-navy));
    color:#fff;
  }
  .card-login .left .title{
    font-size: 28px; font-weight:700; line-height:1.2;
  }
  .card-login .left .hint{
    opacity:.85; font-size:14px;
  }
  .form-control{
    border-radius:10px;
  }
  .btn-primary{
    background: var(--ray-accent);
    border-color: var(--ray-accent);
    border-radius: 10px;
  }
  .btn-primary:hover{
    filter: brightness(.95);
  }
  .text-muted{ color: var(--ray-muted)!important; }
  .small-link{ text-decoration:none; }
  .small-link:hover{ text-decoration:underline; }
  

  /* ========= Desktop collapsed behavior ========= */
@media (min-width: 992px) {
    /* When collapsed on desktop, remove left padding and expand topbar */
    body.sidebar-collapsed {
      padding-left: 0 !important;
    }
    body.sidebar-collapsed .topbar {
      left: 0 !important;
    }
    /* Hide the sidebar by sliding it out on desktop collapse */
    body.sidebar-collapsed .sidebar {
      transform: translateX(-100%);
    }
  }
  
  /* Optional polish: animate content spacing a bit when collapsing */
  body.with-sidebar,
  .topbar {
    transition: padding-left .25s ease, left .25s ease;
  }