/* =========================================
   Lumyro v1.0.1
   Visual polish / overrides
========================================= */

/*
   Hoofdcontent dichter bij sidebar.

   v1.0 centreerde een vaste contentbreedte
   waardoor er op ultrawide schermen te veel
   lege ruimte links ontstond.
*/

.page {
  width: auto;

  max-width: 1380px;

  margin: 0;

  padding:
    46px 42px
    90px;
}


/* Iets bredere auth-form */

.auth-box {
  width: min(
    460px,
    100%
  );
}


/* Login rechterpaneel iets rustiger */

.auth-form-panel {
  padding:
    50px 60px;
}


/* Meer onderscheid tussen achtergrond / cards */

.panel,
.metric-card,
.mini-metric,
.subject-card,
.custom-flashcard,
.analysis-body {
  border-color:
    #e2e2df;

  box-shadow:
    0 1px 2px
      rgba(0,0,0,.015),
    0 10px 28px
      rgba(0,0,0,.025);
}


/* Dashboard hero iets compacter */

.hero-dashboard-card {
  min-height: 228px;

  padding:
    32px 36px;
}


/* Dashboard header */

.dashboard-header {
  margin-bottom: 27px;
}


/* Metrics iets strakker */

.metric-card {
  min-height: 115px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-label {
  margin-bottom: 12px;
}

.metric-value {
  font-size: 29px;
}


/* Sidebar verfijning */

.sidebar {
  width: 232px;

  padding:
    22px 14px 17px;
}

.main-area {
  margin-left: 232px;
}

.sidebar-brand {
  padding-left: 9px;
}

.nav-item {
  min-height: 43px;

  padding:
    0 12px;

  border-radius: 11px;
}

.nav-item.active {
  background:
    #e9e9e6;
}

.nav-icon {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;
}

.nav-icon svg {
  width: 17px;
  height: 17px;

  display: block;

  stroke:
    currentColor;
}


/* Sidebar gebruikersplan */

.sidebar-user-copy span {
  text-transform: capitalize;
}


/* Module-card onderscheid */

.sidebar-module.active {
  background:
    #efefec;

  border:
    1px solid #e8e8e4;
}


/* Subject header minder verticale lucht */

.subject-header {
  margin-bottom: 22px;
}

.subject-metrics {
  margin-bottom: 20px;
}

.subject-tabs {
  margin-bottom: 20px;
}


/* Subject titel */

.subject-header h1 {
  max-width: 760px;
}


/* Primaire CTA sterker */

.subject-header-actions
.button-primary {
  min-width: 136px;
}


/* Secundaire knoppen subtieler */

.subject-header-actions
.button-secondary {
  color: #4e4e53;
}


/* Study cards */

.subject-card {
  min-height: 215px;
}

.subject-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.05);
}


/* Empty states */

.empty-panel {
  background:
    rgba(255,255,255,.72);

  border-color:
    #d9d9d5;
}


/* Document upload */

.upload-panel {
  background:
    rgba(255,255,255,.68);
}


/* Tabellen */

.document-row {
  transition:
    background .12s ease;
}

.document-row:hover {
  background:
    #fafaf8;
}


/* Analysis */

.analysis-body {
  box-shadow:
    none;
}


/* Form controls */

.form-group input,
.form-group textarea {
  transition:
    border-color .15s,
    box-shadow .15s,
    background .15s;
}


/* Betere focus states */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label.upload-button:focus-visible {
  outline:
    2px solid #1b1b1e;

  outline-offset: 2px;
}


/* Buttons */

.button {
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.button-primary {
  box-shadow:
    0 5px 14px
    rgba(0,0,0,.1);
}


/* Hover subject tab */

.subject-tab:not(.active):hover,
.analysis-tab:not(.active):hover {
  background:
    rgba(255,255,255,.55);

  color:
    var(--text);
}


/* Learning session */

.session-card,
.session-question {
  box-shadow:
    0 18px 55px
    rgba(0,0,0,.045);
}


/* Toast iets moderner */

.toast {
  backdrop-filter:
    blur(8px);
}


/* scrollbar */

* {
  scrollbar-width: thin;
  scrollbar-color:
    #c8c8c4 transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background:
    #cdcdc9;

  border:
    2px solid transparent;

  background-clip:
    padding-box;

  border-radius: 20px;
}


/* Tablet */

@media (max-width: 900px) {

  .main-area {
    margin-left: 0;
  }

  .sidebar {
    width: 244px;
  }

  .page {
    width: auto;

    max-width: none;

    padding:
      34px 22px
      70px;
  }

}


/* Telefoon */

@media (max-width: 700px) {

  .auth-form-panel {
    padding:
      34px 22px;
  }

  .page {
    padding:
      28px 17px
      65px;
  }

  .hero-dashboard-card {
    min-height: auto;

    padding:
      27px 24px;
  }

}


/* Klein scherm */

@media (max-width: 430px) {

  .page {
    padding-left: 14px;
    padding-right: 14px;
  }

}