/* public/assets/css/style.css */

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#f5f6f7
}

.app{
  display:flex;
  min-height:100vh;
}

/* ======================
   SIDEBAR
====================== */

.sidebar{
  width:240px;
  background:#0a63d3;
  color:#fff;
  padding:16px;
  position:sticky;
  top:0;
  height:100vh;
  transition:.3s;
  z-index:1000;
}

.sidebar .brand{
  font-weight:700;
  font-size:18px;
  margin-bottom:8px
}

.sidebar .user{
  font-size:14px;
  margin-bottom:12px;
  opacity:.9
}

.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:8px
}

.sidebar nav a{
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.1);
  padding:10px;
  border-radius:8px
}

.sidebar nav a:hover{
  background:rgba(255,255,255,.18)
}

.sidebar .logout{
  background:#00000026
}

/* ======================
   CONTENT
====================== */

.content{
  flex:1;
  padding:20px;
  transition:.3s;
}

/* ======================
   CARD / TABLE
====================== */

.card{
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:16px;
  margin-bottom:16px
}

table{
  width:100%;
  border-collapse:collapse
}

th,td{
  border-bottom:1px solid #eee;
  padding:8px;
  text-align:left;
  font-size:14px
}

/* ======================
   BUTTON
====================== */

.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  color:#111
}

.btn.primary{
  background:#0a63d3;
  color:#fff;
  border-color:#0a63d3
}

.btn.danger{
  background:#d9534f;
  color:#fff;
  border-color:#d9534f
}

/* ======================
   INPUT
====================== */

input,select,textarea{
  width:100%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:8px
}

.grid{
  display:grid;
  gap:12px
}

.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

.notice{
  padding:10px;
  border-left:4px solid #0a63d3;
  background:#e9f2ff;
  border-radius:6px;
  margin-bottom:10px
}

/* ======================
   LOGIN
====================== */

.login-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  background:#e7f0ff
}

.login-box{
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  padding:24px;
  width:360px
}

/* ======================
   HAMBURGER
====================== */

.mobile-toggle{
  display:none;
  position:fixed;
  top:15px;
  left:15px;
  background:#0a63d3;
  color:#fff;
  border:none;
  font-size:20px;
  padding:8px 12px;
  border-radius:8px;
  z-index:1100;
  cursor:pointer;
}

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

@media(max-width:900px){

  .mobile-toggle{
    display:block;
  }

  .sidebar{
    position:fixed;
    left:0;
    top:0;
    transform:translateX(-100%);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .content{
    padding:20px;
  }

  .grid.cols-2,
  .grid.cols-3{
    grid-template-columns:1fr;
  }

  table{
    font-size:12px;
  }
}
.reminder-popup.hidden {
  display:none;
}

.reminder-popup.show {
  display:flex;
}
.hidden {
  display: none !important;
}
/* ======================
   REMINDER POPUP
====================== */

.reminder-popup{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.reminder-popup.show{
  display:flex;
}

.reminder-popup .popup-inner{
  background:#d62828;
  color:#fff;
  padding:35px 45px;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  max-width:480px;
  width:90%;
  text-align:center;
}

.reminder-popup .popup-inner h4{
  margin:0 0 12px;
  font-size:22px;
  font-weight:700;
}

.reminder-popup .popup-inner p{
  margin:0 0 22px;
  font-size:15px;
}

.reminder-popup .btn{
  background:#fff;
  color:#d62828;
  border:none;
}
.hidden {
  display: none !important;
}

.reminder-popup.show {
  display: flex !important;
}