/*----Style sheet for Dashboard.php file----*/
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
   --Prifont:"Roboto",sans-serif;
   --bg:#f6f8fa;--card:#ebebeb;--accent:#0b63d4;--muted:#6b7280
 }
    *{box-sizing:border-box}
body {width:95%;margin:auto;font-family: var(--Secfont);background-color: var(--accent);}
#head{width:250px;margin-top:5px;text-align: left;margin-bottom: 5px;color:var(--bg);}
.Header { display: flex; align-items:center; justify-content:start; gap: 5px; margin-top: 10px; margin-bottom: 10px; }
.Header input{width:15px;margin-left:8px;color:white;}
.Header label{width:100px;}
input[type="radio"] { appearance: none; width: 15px; height: 15px; border: 2px solid #f60303; border-radius: 50%; outline: none; cursor: pointer; position: relative; } 
input[type="radio"]:hover { border-color: #59f321; }
input[type="radio"]:checked { border-color: #2196f3; background-color: #41f321; }

.filter-section{display:flex;justify-content:flex-start;gap:20px; font-size:0.90em; font-family: var(--Prifont); height: 40px;;
   color:black;margin-bottom:-10px; padding: 5px;border:1px solid rgb(245, 232, 232)}
label{margin-right:5px;width:60px;font-weight:bold;color:var(--bg);}
select{width:150px;height:20px;}
.Btn{margin-left:15px;font-size:1.0em;width:120px; height:20px;color: black;
   border: none;border-radius: 4px;cursor: pointer;margin: 2px;}
.Btn1{background: #edd209;width:80px;}   
.Btn2{background: #4caf50;color:white;}   
.Btn:hover{background: #4cafaa;}

.main{padding:10px;border: 1px solid rgb(248, 228, 228); border-radius: 4px;display: flex;
   justify-content:flex-start;gap:20px;margin-top:10px;}
.Gr{font-family: var(--Prifont); font-size:0.9em; color: #333;padding: 0.1em;color:black;}
#Tb1, #Tb2, #Tb3,#Tb5,#Tb6,#Tb3_text{color:black; width:90px;}
#Tb4{color:black; width:250px;}
#idx{width:50px;}


#p1{font-family: var(--Secfont);font-size: 1em;text-align: center;color:var(--bg);}
/*-----Pagination---------------*/
#x1{margin:auto; width:50vw; display: flex;justify-content: space-between;margin-top:10px;color:var(--bg);}
#pageNumber{width:30px;}

/*---Table CSS----*/
#content{height:85vh; padding:10px;border: 1px solid #f19797; border-radius: 4px;background-color: #b5c0e7;}
table{width:100%;border-collapse:collapse;margin-top:px;}
th,td{padding:2px 2px;border:1px solid #ccc;text-align:left;}
th{background-color: #f4f4f4;}  
.bt{color: white;border: none;border-radius: 4px;margin-left:0.3em;cursor: pointer;}
.bt1{background: blue;}
.bt1:hover{background: #dd93ee;}
.bt2{background: #4caf50;}
.bt2:hover{background: #dd93ee;}
.bt3{background: #f44336;}
.bt3:hover{background: #dd93ee;}

/*---Modal CSS for Add Author----*/
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
.modal-content{background-color:var(--card);margin:15% auto;padding:20px;border:1px solid #888;border-radius:8px;width:400px;box-shadow:0 4px 8px rgba(0,0,0,0.3);}
.close{color:black;float:right;font-size:38px;font-weight:bold;cursor:pointer;}
.close:hover,.close:focus{color:rgb(248, 5, 21);}
#AuthorTitle{margin-top:0;margin-bottom:10px; color:black;text-align:center;}
.modal-content label{display:inline-block;margin-left:5px;margin-bottom:10px;width:90px;font-weight:bold;color:black;}
.modal-content select,input{width:200px;height:20px;}
 .modal-content textarea { width: 200px; height: 45px; font-size: 14px;  padding: 4px; resize: both; border: 1px solid #ddd; border-radius: 4px; font-family: var(--Prifont); }
.modal-content #m_file{height:30px; padding:5px;}

/* Responsive Design for Tablets and Mobile */
@media (max-width: 1024px) {
  body { width: 98%; }
  #content {height:80vh; padding: 8px; }
  .filter-section { gap: 15px; font-size: 0.85em; }
  .main { gap: 15px; }
  select { width: 130px; }
  .Btn { width: 100px; }
  #content { height: 80vh; }
  .modal-content { width: 90%; margin: 30% auto; }
}

@media (max-width: 768px) {
  body { width: 98%; }
  #head { width: 100%; font-size: 0.9em; }
  .filter-section { flex-direction: column; gap: 10px; height: auto; }
  label { width: 100%; margin-right: 0; margin-bottom: 5px; }
  select { width: 100%; }
  .Btn { width: 100%; margin-left: 0; }
  .main { flex-direction: column; gap: 10px; }
  #content {height:80vh; padding: 8px; }
  .buttons{display:flex;}
  table { font-size: 0.9em; }
  th, td { padding: 4px 2px; }
  /* Hide ID, Category, Author columns on tablet */
  th:nth-child(1), td:nth-child(1),
  th:nth-child(2), td:nth-child(2),
  th:nth-child(3), td:nth-child(3),
  th:nth-child(5), td:nth-child(5) { display: none; }
  /* Hide delete button on tablet */
  td .bt3 { display: none; }
  #x1 { width: 80vw; font-size: 0.85em; }
  .modal-content { width: 95%; margin: 40% auto; padding: 15px; }
  .modal-form-group input, .modal-form-group select { font-size: 0.9em; }
  .modal-buttons { flex-direction: column; }
  .modal-btn { width: 100%; }
  #Tb1, #Tb2, #Tb3, #Tb5, #Tb6, #Tb3_text { width: 70px; }
  #Tb4 { width: 70px; }
  #idx { width: 40px; }
}

@media (max-width: 480px) {
  body { width: 100%; margin: 0; padding: 5px; }
  #head { font-size: 0.8em; }
  .filter-section { flex-direction: column; gap: 8px; padding: 3px; border: none; }
  label { font-size: 0.85em; }
  select { width: 100%; height: 30px; font-size: 0.9em; }
  .Btn { width: 100%; height: 30px; font-size: 0.85em; margin: 5px 0; }
  .main { flex-direction: column; padding: 5px; }
  #content { height: 80vh; padding: 5px; }
  .buttons{display:flex;}
  table { font-size: 0.75em; }
  th, td { padding: 2px 1px; }
  /* Hide ID, Category, Author columns on mobile */
  th:nth-child(1), td:nth-child(1),
  th:nth-child(2), td:nth-child(2),
  th:nth-child(3), td:nth-child(3) { display: none; }
  /* Hide delete button on mobile */
  td .bt3 { display: none; }
  .bt { padding: 4px 6px; font-size: 0.8em; margin: 2px 0; }
  #x1 { width: 95vw; flex-direction: column; }
  #pageNumber { width: 50px; }
  .modal-content { width: 98%; margin: 50% auto; padding: 12px; border-radius: 4px; }
  .modal-content h3 { font-size: 1.1em; }
  .modal-form-group { margin-bottom: 10px; }
  .modal-form-group input, .modal-form-group select { width: 100%; font-size: 0.85em; }
  .modal-form-group textarea { width: 100%; margin-left: 0; }
  .modal-buttons { flex-direction: column; gap: 5px; }
  .modal-btn { padding: 8px 12px; font-size: 0.85em; }
  #Tb1, #Tb2, #Tb3, #Tb5, #Tb6, #Tb3_text { width: 50px; }
  #Tb4 { width: 75px; }
  #idx { width: 30px; }
}