/* Comman Css */
*{padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: "K2D", sans-serif;}

html{font-size: 10px;}
body{font-size: 1.6rem;}
.menu-gap{padding-left: 1rem;}
.d-flex{display: flex;}
.align-c{align-items: center;}
.cursor-p{cursor: pointer;}
.gap{gap: 3rem;}
.box-body{background: var(--sidebar-item-color); border-radius: 2rem; box-shadow: 0 0 10px var(--box-shadow); padding: 2rem;}
/* ------------------------------------------------ */
/* /Veriable */
:root{
    --main-bg-color: #F1F2F6;
    --sidebar-width: 23rem;
    --sidebar-bg-color: #740938;
    --sidebar-hover: #E10249;
    --sidebar-sub-menu-color: #580127;
    --sidebar-item-color: #fff;
    --sidebar-item-hover-bg-color: #63062d;
    --box-shadow: #0000002b;
    --orange-color: #FF7F00;
    --table-color-1: #7e0001;
    --table-color-2: #e7e7e7;
    --table-color-3: #f4c5c9;
    --box-color: #18E4B4;
}
/* ------------------------------------------- */

body{
    min-height: 100vh;
    min-height: 100dvh;
    background: url(../img/admin-bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--text-clr);
    display: grid;
    grid-template-columns: auto 1fr;

  }
  #sidebar{
    box-sizing: border-box;
    height: 100vh;
    width: 23rem;
    background-color: var(--sidebar-bg-color);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow-y: scroll;
    text-wrap: nowrap;
  }
  #sidebar.close{width: 5rem;}
  #sidebar .s-logo{ display: none;}
  .close .s-logo{display: block !important;}
  .close .f-logo{display: none;}
  .close .brand{padding: 0.5rem;}
  #sidebar::-webkit-scrollbar{ display: none; }
  .close a, .close .dropdown-btn{padding: 1rem !important;}
  #sidebar a, #sidebar .dropdown-btn{ padding: 1rem 2rem; text-decoration: none; color: var(--sidebar-item-color); display: flex; align-items: center; gap: 1em; }
  .brand{width: 100%; padding: 0rem 3rem; position: sticky; top: 0; background: var(--sidebar-bg-color);}
  .brand img{width: 100%;}
  #sidebar li a:hover, button:hover{background: var(--sidebar-hover); transition: 0.5s ease-in-out;}
  .dropdown-btn{
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
  } 
  #sidebar li a img, #sidebar li button img{width: 2.5rem;}
  #sidebar a span, #sidebar .dropdown-btn span{
    flex-grow: 1; font-size: 1.6rem; font-weight: 300;
  }
  #sidebar .sub-menu{
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
    background: var(--sidebar-sub-menu-color);
  }
  #sidebar .sub-menu li > a { padding-left: 3rem;}
  #sidebar .sub-menu > div{ overflow: hidden;}
  #sidebar .sub-menu.show{  grid-template-rows: 1fr;}
  .mobil-toggle{display: none;}
  main p{
    color: var(--secondary-text-clr);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .container{
    margin-bottom: 2rem;
    padding: 2rem 3rem;
  }
  .dropdown-btn .fa-caret-down{ transition: 200ms ease;}
  .rotate .fa-caret-down{ rotate: 180deg;}
  .top-head { background: var(--sidebar-item-color); display: flex; justify-content: space-between; align-items: center; padding: 1rem; position: sticky; top: 0; box-shadow: 0 4px 15px var(--box-shadow); z-index: 1;}
  .top-left   .mobil-toggle > img,   .top-left   .desktop-toggle > img{width: 3rem; margin: 0 1rem;}
  .top-right > img{width: 3rem; margin-left: 1rem;}
  .user span p{margin: 0; font-size: 1.5rem;}
  .user span h5{font-size: 1.1rem;}
  .user span i{padding-right: 1rem; color: #0000009e;}
  .user > img{width: 4rem;}
  .user{margin-left: 2rem; gap: 1rem; cursor: pointer;}
  .user > span{text-align: right;}
  .admin-heading{display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem;}
  .admin-heading h4 a{color: var(--sidebar-item-hover-bg-color);}
  .sec-1 { width: 100%; background: var(--sidebar-item-color); box-shadow: 0 0 10px var(--box-shadow); border-radius: 2rem; display: flex; align-items: center; justify-content: space-between; padding: 3rem; flex-wrap: wrap;}
  .sec-1-box{display: flex; align-items: center; gap: 1rem;}
  .sec-1-box h3{color: var(--orange-color); font-size: 2.4rem;}
  .sec-1-box h4{font-size: 1.8rem;}
  /* ------------------ Form -------------------- */
.form-wrapper{background: var(--sidebar-item-color); box-shadow: 0 0 10px var(--box-shadow); border-radius: 2rem; padding: 3rem;}
.form-body{max-width: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
.form-sec{width: 45%;}
.form-box input{height: 4rem; width: 100%; padding: 0 2rem; margin: 0.6rem 1.5rem 1.5rem 0; flex: 1;  border: 1px solid var(--sidebar-hover); background: none; border-radius: 0.5rem;}
.form-box select{height: 4rem; width: 100%; padding: 0 2rem; flex: 1; margin: 0.6rem 1.5rem 1.5rem 0; border: 1px solid var(--sidebar-hover); background: none; border-radius: 0.5rem;}
.flex-flied{display: flex; gap: 1rem;}
.form-box>div{width: 100%;}
.form-sec>h2 { margin-bottom: 2rem; }
.form-btn input { width: 16rem; padding: 0.8rem; font-size: 1.6rem; background: #ffbe0e; border: navajowhite; cursor: pointer; border-radius: 0.5rem;}
.form-btn {margin-top: 2rem}
input[type="file"]::file-selector-button{border: none; height: 4rem; margin-left:-2rem; background: #152259; color: #fff; width: 12rem; margin-right: 1.5rem; cursor: pointer;}
/* ----------------------  datalist ------------------- */
.data_list table {width: 100%; margin: 2rem 0; border-collapse: collapse;}
.data_list table thead{background: var(--table-color-1); color: #fff;}
.data_list table tr td{padding: 1rem 2rem}
.data_list table tbody tr:nth-child(odd){background: var(--table-color-2)}
.data_list table tbody tr:nth-child(even){background: var(--table-color-3)}

.add-new { background: #fff; box-shadow: 0 0 10px #9999; position: fixed; width: 100%; top: 5rem;}
.addnew-wrap { display: flex; justify-content: space-between; padding: 2rem 30rem 2rem 2rem; }
.addnew-btn a { background: #152259; color: #fff; padding: 1rem 2rem; border-radius: 0.8rem; }
.addnew-btn img{vertical-align: text-bottom;}
.page-name { font-size: 2rem; font-weight: 600; }
.search_form input { padding: 1rem; width: 35rem;}
.search_form button{padding: 1rem; width: 10rem}
/* -------------------------- Detail Page --------------------- */
.View-details {
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.View-details h2 {
    margin-bottom: 20px;
    color: #333;
}
.View-details .form-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.View-details .form-box label {
    font-weight: bold;
    color: #555;
    width: 30%;
}
.View-details .form-box span {
    width: 70%;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.View-details .student-img img {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.student-wel{margin-bottom: 3rem;}
.student-attendance{ margin-top: 3rem;}
.wel-sec { width: 100%; background: var(--box-color); }
.contact_sourec a { font-size: 1.6rem; border: 1px solid #fff; padding: 1rem; border-radius: 5rem; }
.student-profile-info h2, .student-attendance h2{text-align: center; margin-bottom: 2rem;}
.stu-detail-box table, .student-attendance table{width: 100%; text-align: left; justify-content: space-around;}
.stu-detail-box table, .student-attendance table{border-collapse: collapse; width: 100%;}
.stu-detail-box table th, .stu-detail-box table td, .student-attendance table th, .student-attendance table td{ padding: 0.5rem 2rem;}
.student-att h3{margin-bottom: 1rem;}
.wel-sec-text h1{margin-bottom: 1.5rem;}

   /* Popup container */
   .del-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.popup-content{background: #fff; padding: 2rem; border-radius: 0.8rem; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 30rem; max-width: 90%;}
.popup-content .btn{display: flex; justify-content: space-between; align-items: center;}
.popup-content .btn a{color: var(--table-color-2); cursor: pointer; background: var(--sidebar-hover); padding: 1rem 2rem; border-radius: 0.5rem; border: 1px solid var(--sidebar-hover); color: #000; transition: 0.5s ease-in-out;}
.popup-content .btn .btn-secondary{background: var(--box-color); border: 1px solid var(--box-color); color: #000; transition: 0.5s ease-in-out;}
.popup-content .btn a:hover{background: none; transition: 0.5s ease-in-out;}
.att-bar-item span { font-size: 1.8rem; }
.att-bar-item{ margin-bottom: 0.5rem;}

/* book & docs */
.book-list-btn a {border: 1px solid #d7d7d7;padding: 4rem; border-radius: 1rem; background: #fff; display: block; font-size: 1.8rem;}
.book-list-card { margin-top: 6rem; display: flex ; flex-wrap: wrap; gap: 2rem;}
.book-list-btn {width: calc(25% - 2rem);text-align: center;}