/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root {
  --font-size:           1rem;
  --bold-weight:         600;
  --menu-bg:             #0e2c86;
  --dark-bg:             #161c4c;
  --menu-text:           #dfddee;
  --menu-hover:          #162f61;
  --menu-active:         #5BADFF;
  --menu-width:          16.7rem;
  --header-height:       4rem;
  --footer-height:       3rem;
  --content-border:      #817fba;
  --table-border:        #121128;

  --content-bg:          #e7eaf3;
  --main-bg:             #cfd5e7;
  --gap-size:            2rem;
  --card-shadow:         0 1px 4px rgba(0,0,0,.08);
  --primary-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--primary-font);
  background:  var(--main-bg);
  color:       #2c3e50;
  font-size:   var(--font-size);
  margin: 0;
}
body,html{
  height: 100%;
}


select {

  background-color: var(--content-bg);
  border: thin solid var(--table-border);
  border-radius: 0.6rem;
  display: inline-block;
  font: inherit;
  padding: 0.7em 3.5em 0.7em 1em;
  margin: 0;
  box-sizing: border-box;
}

.normal-button {
   border-radius: 0.6rem;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: 600;
   padding: .7rem;
   background-color: #3F4697;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.normal-button:hover {
   background: #817FBA;
}

#btn-disconnect{
  padding: .1rem .6rem;
  margin: 0 1rem;
}

.wrapper{
  min-height: 100%;
  display: grid;
  grid-template: 
    "sidebar header" 1.8rem
    "sidebar content" 1fr
    "footer footer" 6rem
    / 16rem 1fr;
}

.user-badge{
  font-size: 1rem;

}
aside{
  grid-area: sidebar;
  background: var(--menu-bg);
  padding: 2rem 0;
  color: var(--menu-text);
}

h1{
  font-size: 2rem;
}

.page-title{
  margin-bottom: var(--gap-size);
  line-height: 1.8rem;
  padding: var(--gap-size) 0 var(--gap-size) var(--gap-size);
  border-bottom: thin solid var(--content-border);
  background: var(--content-bg);
}
header{
  grid-area: header;
  height: 1.8rem;
  background: var(--dark-bg);
}

header,footer{
  color: var(--menu-text)
}

main{
  grid-area: content;
}

footer{
  grid-area: footer;
  background: var(--dark-bg);
}

.side-menu{
  li{
    a{
      padding: 1rem 2rem;
      display: block;
    }
    &:hover{
      background: var(--menu-hover);
    }
  }
}

.all-page{
  margin: var(--gap-size);
}

.home-page{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap-size);
}
.home-grid{
  display: grid;
  gap: var(--gap-size);
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: min-content;
}

.courses-grid{
  display: grid;
  gap: var(--gap-size);
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: min-content;
}

.card{
  overflow: hidden;
  background: var(--content-bg);
  border-radius: .8rem;
  border: thin solid var(--content-border);
  padding: var(--gap-size);
  margin-bottom: var(--gap-size);
}

.card-item{
  padding: 0;
  margin: 0;
  img{
    object-fit: cover;
    width: 100%;
    height: 12rem
  }
  h3{
  font-size: 1.45rem;
  padding: 1rem;
  }
}

table{
  text-align: left;
  width: 100%;
  border-style: solid;
  border-collapse: collapse;
  margin: var(--gap-size) 0;

  tr{
    border-bottom: thin solid var(--table-border);
  }

  th,td{
    padding: 1.42rem;
  }

  thead{
    font-weight: var(--bold-weight);

  }
}

.pagination{

}