/* ==================================================
   THEME SYSTEM (AUTO DARK / LIGHT)
================================================== */

:root{
  /* LIGHT MODE (DEFAULT) */
  --bg-main:#f5f7fb;
  --bg-container:rgba(15,23,36,.06);
  --bg-panel:rgba(255,255,255,.85);

  --text-main:#1f2937;
  --text-soft:#6b7280;
  --text-invert:#ffffff;

  --accent-primary:#6b7fd7;
  --accent-hover:#7f94ee;
  --accent-warning:#f2a766;

  --input-bg:#f1f3f9;
  --input-text:#1f2937;

  --border-soft:rgba(15,23,36,.08);
}

/* DARK MODE */
[data-theme="dark"]{
  --bg-main:#0e1422;
  --bg-container:rgba(0,0,0,.45);
  --bg-panel:rgba(255,255,255,.08);

  --text-main:#e5e7eb;
  --text-soft:#9ca3af;
  --text-invert:#000000;

  --accent-primary:#8b9cff;
  --accent-hover:#a5b4ff;
  --accent-warning:#f4b07a;

  --input-bg:#1f2937;
  --input-text:#e5e7eb;

  --border-soft:rgba(255,255,255,.08);
}



/* ==================================================
   FINAL PRODUCTION CSS
   Stable • Clean • IIS Safe
================================================== */

/* ---------- RESET ---------- */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  color:var(--text-dark);
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  background:var(--bg-light);
  overflow:auto;
}

/* ---------- LOGIN PAGE ---------- */
.page_login{
  min-height:100%;
  width:100vw;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(to right,#000,#000046,#000);
  position:relative;
  z-index:5;
}

/* background animated circle */
.page_login_img,
.page_login_img_div{
  position:fixed;
  left:-25vw;
  bottom:-20vh;
  width:50vw;
  height:50vw;
  border-radius:50%;
}

.page_login_img{
  z-index:6;
  animation:rotateBg 360s linear infinite;
}

.page_login_img_div{
  z-index:10;
  background:radial-gradient(
    transparent,
    transparent,
    transparent,
    rgba(17,17,132,.5),
    rgba(0,0,0,.9) 40%
  ) top right/300vw 300vw;
  animation:moveBg 320s infinite alternate;
}

@keyframes rotateBg{
  from{transform:rotate(0deg)}
  to{transform:rotate(359deg)}
}

@keyframes moveBg{
  to{background-position:center right}
}

/* ---------- MAIN CONTAINER ---------- */
.containner{
  width:calc(100vw - 10vw);
  min-height:80vh;
  margin:40px auto;
  padding:20px;
  border-radius:2vw;
  background:rgba(0,0,0,.5);
  z-index:20;
}

/* ---------- INFO BOX ---------- */
.info-box{
  float:left;
  width:calc(100% - 450px);
  min-width:340px;
  font-size:20px;
}

.info-box h1{
  color:rgba(186,225,255,1);
  font-size:48px;
}

.info-box h2{
  color:var(--accent-warning);
}

.info-box span{
  color:rgba(255,225,255,1);
}

/* ---------- LOGIN BOX ---------- */
.login-box{
  float:right;
  width:100%;
  max-width:360px;
  padding:22px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(2,6,23,.6);
  color:var(--text-light);
}

.login-box h2{
  color:var(--accent-warning);
  margin-bottom:10px;
}

/* inputs */
.login-box input[type=email],
.login-box input[type=password]{
  width:100%;
  padding:12px;
  margin:10px 0;
  border:none;
  border-radius:12px;
  background:#3a3b52;
  color:#fff;
}

.login-box input:focus{
  outline:2px solid #a6b1e1;
}

.input-group{position:relative}

.toggle-password{
  position:absolute;
  right:15px;
  top:42%;
  cursor:pointer;
  color:#ccc;
}

.remember-me{
  font-size:.9em;
  color:#ccc;
}

/* ---------- BUTTONS ---------- */


/* ---------- ALERT ---------- */
.alert{
  background:#ff6b6b;
  color:#fff;
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
}

/* ---------- SOCIAL & FOOTER ---------- */
.connect-us{
  float:right;
  width:320px;
  text-align:right;
  color:var(--accent-warning);
}

.medsos,
.social-share img{
  width:50px;
  height:50px;
  cursor:pointer;
}

.medsos:hover,
.social-share:hover{
  filter:invert(30%);
}

.links{
  position:fixed;
  bottom:0;
  z-index:60;
}

/* ---------- TABLE & DATATABLE ---------- */
table{box-shadow:0 0 5px #888}
td{vertical-align:middle}
td .btn{width:60px;padding:4px}

table thead tr th {text-align:center}
.table-small td,
.table-small th{font-size:13px}

.dt-buttons{width:100%}
.dt-buttons button{width:100px}
.dataTables_filter{margin:10px}

/* ---------- SECTIONS ---------- */
#section_add,
#section_list,
#section_history{display:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1300px){
  .info-box{
    transform:scale(.8);
    transform-origin:left top;
  }
  .containner{margin:20px auto}
  .login-box{background:rgba(0,0,0,.6)}
}

@media(max-width:720px){
  .info-box,
  .login-box{
    float:none;
    width:100%;
    transform:none;
  }
}

@media(max-width:600px){
  .dash-buttons{flex-direction:column}
}
.logo {width: 80px!important}
a { text-decoration:none; cursor: pointer}

.btn-icon {display: inline-block; width: 130px; height: 130px; margin: 5px; padding-top: 25px; vertical-align: bottom; cursor: pointer; border-radius: 8px; color: #FFFFFF}
.btn-icon:hover {mix-blend-mode: darken;}