:root {

/* --brkp-1: #feffe0;
--brkp-2: #ffd7a6;
--brkp-3: rgb(253, 167, 138);
--brkp-4: rgb(119 77 194); */

--card-count: 7.5;
}


/* =========================================================================
   MODES
   ========================================================================= */

html[data-view="compact"] {
    /* 1. hide some elements */
    .extended,
    p.section-intro,
    p.card-desc,
    .card-guides,
    p.card-note,
    p.card-sub-label {display:none;}

    /* 2. Adjust section and card widths */
    .content {gap: 50px 20px;}

    .section-actions {/* display: inline-block; */}
    .section-content {min-height: unset;gap: var(--gap);}
    .card-row {align-items: start}

    .rl-section {width: unset;}
    /* section.tools {width: 37.5%}
    section.projects {width: 25%}
    section.crm {width: 12.5%}
    section.fauxnet {width: 12.5%} */
    
    .rl-section + .rl-section {padding-top: unset;}
    section.rl-section.projects {margin:  0;}
    /* 3. Make card smaller */
    .card {width: calc((100vw - var(--side-w) - (var(--gap) * var(--card-count))) / var(--card-count));}
    .btn.compact {width: calc((100vw - var(--side-w) -  (var(--gap) * var(--card-count))) / var(--card-count));}
    .section-head {display: flex;flex-direction: column;gap: 15px;}
    .section-content {/* max-width: 400px; */}    
    .section-actions {/* display: flex; *//* gap:  0px; */flex-direction: row;flex-wrap: nowrap;min-height: 40px;}
    .card-actions {display: flex; flex-direction: column;}

    .card-links {
        display: flex;
        flex-direction: row;
        gap: 5px 24px;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .card-links li {width: 100%;}

    .section-actions {gap: var(--gap);}


}

html[data-view="extended"]  { 
  .compact {display: none;}
  section.rl-section,
  section.rl-section.projects,
  section.rl-section.crm,
  section.rl-section.fauxnet {/* width: unset; */}
        .rl-section + .rl-section {/* padding-top: unset; */}
  section.rl-section.projects {/* margin:  0; */}
 }


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1600px) { /*for better looking buttons in cards*/
body {background: var(--brkp-1)}
        .card-actions a {
        width: 100%;
        } 
        .card-actions {
        grid-template-columns: 1fr;
    }
   html[data-view="compact"] {--card-count: 5.5;}
}

/* Collapse the rail: main first, sidebar becomes a panel below */
/* Was 1080 */
@media (max-width: 1080px) {
    body {background: var(--brkp-2)}
    section.rl-section.fauxnet {/* width: 66%; */}
    .shell { display: flex; flex-direction: column; }
    .sidebar {
        position: static; width: auto; height: auto; order: 2;
        border-right: none; border-top: 1px solid var(--side-border);
        overflow: visible;
    }
    .main { margin-left: 0; order: 1; }
    .sidebar-scroll {
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
    .sidebar-foot { border-top: none; }
    /* .theme-menu { left: 0; right: auto; min-width: 180px; } */
    .card-actions {flex-direction: column;}
    .card-desc {min-height: unset}

    html[data-view="compact"] {--card-count: 3;}
}

@media (max-width: 760px) {
body {background: var(--brkp-3)}

      .clock {
         display: block;
         /* position: fixed; */
         top: clamp(24px, 3.2vw, 44px);
         right: clamp(20px, 3.6vw, 52px);
         }
  .card-row, .card-row--2 { grid-template-columns: 1fr; }
  .card-links--cols { grid-template-columns: 1fr; }
  .sidebar-scroll { grid-template-columns: 1fr; }
  .topbar {flex-direction: row;}
  .topbar-right {justify-content: space-between;/* width: 100%; */}
  .topbar-right #weather-widget {display: none;}

  section.rl-section.projects,
  section.rl-section.crm, section.rl-section.fauxnet {width: 100%; margin-right: 0;  }
  .section-content {min-height: unset}
  .section-content.vertical {align-items: center;}
     html[data-view="compact"] {
         --card-count: 1;
         .section-actions {flex-direction: column; width: 100%;}
        .rl-section, .card, .btn.compact, .btn.custom {width: 100%}
    
     }
}

@media (max-width: 480px) {
body {background: var(--brkp-4) }
  .clock {
         /* text-align: left; */
         }
    .rl-section,
  .section-actions .btn, .card-actions .btn { width: 100%; }
}



/* HIDE CMap Mail text */
@media (max-width: 1850px) and (min-width:1599px){
.btn-mail span.btn-text {
    display: none;
}
}