/* =========================================================
   START: GLOBAL
========================================================= */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#070b0f;
  color:#f5f5f5;
}

/* =========================================================
   END: GLOBAL
========================================================= */


/* =========================================================
   START: LAYOUT
========================================================= */

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

.main{
  flex:1;
}

.content{
  padding:32px;
}

/* =========================================================
   END: LAYOUT
========================================================= */


/* =========================================================
   START: SIDEBAR
========================================================= */

.sidebar{
  width:260px;
  background:#05080b;
  border-right:1px solid #222;
  padding:24px 16px;
}

.logo{
  color:#ff3030;
  font-size:34px;
  font-weight:900;
}

.logo small{
  display:block;
  color:#fff;
  font-size:13px;
  letter-spacing:2px;
}

.nav a{
  display:block;
  color:#ddd;
  text-decoration:none;
  padding:14px 16px;
  margin:8px 0;
  border-radius:8px;
}

.nav a.active,
.nav a:hover{
  background:#161616;
  color:#fff;
  border:1px solid #5c1b1b;
}

/* =========================================================
   END: SIDEBAR
========================================================= */


/* =========================================================
   START: TOP BAR
========================================================= */

.topbar{
  height:72px;
  border-bottom:1px solid #222;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 32px;
  background:#090d12;
}

/* =========================================================
   END: TOP BAR
========================================================= */


/* =========================================================
   START: DASHBOARD CARDS
========================================================= */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:28px 0;
}

.card{
  border:1px solid #27313a;
  background:linear-gradient(135deg,#101820,#090d12);
  border-radius:10px;
  padding:28px;
  min-height:150px;
}

.card.red{
  border-color:#6e2525;
}

.card.green{
  border-color:#235c39;
}

.card.blue{
  border-color:#24537a;
}

.card h2{
  margin:0 0 12px;
}

.card p{
  color:#cfcfcf;
  line-height:1.5;
}

.card a{
  color:#ff4040;
  text-decoration:none;
  font-weight:bold;
}

/* =========================================================
   PRINTER SECTIONS
========================================================= */

.printer-sections-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:18px;
}

.printer-section-card{
    display:block;
    text-decoration:none;
    color:#fff;

    background:#10151a;
    border:1px solid #293139;
    border-radius:10px;

    padding:20px;

    transition:.2s;
}

.printer-section-card:hover{
    border-color:#ff3030;
    transform:translateY(-2px);
}

.printer-section-card h3{
    margin:0 0 10px;
    color:#fff;
}

.printer-section-card p{
    margin:0;
    color:#aaa;
}

/* =========================================================
   END: DASHBOARD CARDS
========================================================= */

/* =========================================================
   START: CLICKABLE PRINTERS
========================================================= */

.printer{
  display:block;
  text-decoration:none;
  color:#fff;
  transition:.2s;
}

.printer:hover{
  border-color:#ff3030;
  transform:translateY(-4px);
}

/* =========================================================
   END: CLICKABLE PRINTERS
========================================================= */

/* =========================================================
   START: PRINTER DETAIL PAGE
========================================================= */

.printer-detail-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:32px;
    align-items:flex-start;
}

.printer-detail-image{
    background:#10151a;
    border:1px solid #293139;
    border-radius:10px;
    padding:20px;
    text-align:center;
}

.printer-detail-image img{
    width:100%;
    max-height:320px;
    object-fit:contain;
}

.printer-detail-content h2{
    margin-top:0;
}

.folder-manage-box{
    background:#0b1015;
    border:1px solid #2b323a;
    border-radius:10px;
    padding:18px;
    margin-bottom:18px;
}

.folder-manage-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}

.folder-manage-head h3{
    margin:0;
}

/* =========================================================
   END: PRINTER DETAIL PAGE
========================================================= */

/* =========================================================
   START: CHECKBOX CARDS
========================================================= */

.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(180px, 1fr));
    gap:12px;
}

.check-card{
    display:flex;
    align-items:center;
    gap:10px;
    background:#0b1015;
    border:1px solid #2b323a;
    border-radius:8px;
    padding:12px 14px;
    cursor:pointer;
}

.check-card:hover{
    border-color:#ff3030;
}

.check-card input[type="checkbox"]{
    width:16px;
    height:16px;
    min-height:16px;
    margin:0;
    accent-color:#ff3030;
    flex:0 0 auto;
}

.check-card span{
    color:#fff;
    font-size:13px;
}

/* =========================================================
   END: CHECKBOX CARDS
========================================================= */


/* =========================================================
   START: PRINTER SECTION
========================================================= */

.printer-box{
  border:1px solid #252b31;
  border-radius:10px;
  padding:20px;
}

.printer-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}

.printer{
  background:#10151a;
  border:1px solid #293139;
  border-radius:8px;
  padding:18px;
  text-align:center;
}

.printer img{
  width:100%;
  height:150px;
  object-fit:contain;
}

.printer h3{
  margin:12px 0 0;
}

.empty{
  color:#aaa;
  padding:18px;
  border:1px dashed #444;
  border-radius:8px;
}

/* =========================================================
   END: PRINTER SECTION
========================================================= */


/* =========================================================
   START: RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .cards{
    grid-template-columns:1fr;
  }

  .printer-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .sidebar{
    width:220px;
  }

}

/* =========================================================
   END: RESPONSIVE
========================================================= */

/* =========================================================
   ADMIN PANEL
========================================================= */

.header{
    padding:25px 35px;
    border-bottom:1px solid #222;
}

.header h1{
    margin:0;
}

.container{
    padding:35px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.back{
    color:#ff4040;
    text-decoration:none;
}

/* =========================================================
   END ADMIN PANEL
========================================================= */

/* =========================================================
   ADMIN CARDS
========================================================= */

.grid .card{
    background:#11161c;
    border:1px solid #2b323a;
    border-radius:12px;
    padding:25px;
    text-decoration:none;
    color:#fff;
    transition:.2s;
}

.grid .card:hover{
    border-color:#ff3030;
    transform:translateY(-3px);
}

.grid .card h2{
    margin:0 0 10px;
    font-size:22px;
}

.grid .card p{
    margin:0;
    color:#aaa;
}

/* =========================================================
   END ADMIN CARDS
========================================================= */

/* =========================================================
   ADMIN FORMS
========================================================= */

.admin-panel-box{
    background:#11161c;
    border:1px solid #2b323a;
    border-radius:12px;
    padding:26px;
    margin-bottom:24px;
}

.admin-panel-box h2{
    margin:0 0 22px;
}

.admin-form{
    display:grid;
    grid-template-columns:repeat(3, minmax(220px, 1fr));
    gap:18px;
    align-items:end;
}

.admin-form > div{
    width:100%;
}

.admin-form label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    color:#bbb;
}

.admin-form input,
.admin-form select{
    width:100%;
    min-height:42px;
    background:#0b1015;
    border:1px solid #2b323a;
    color:#fff;
    padding:10px 12px;
    border-radius:8px;
}

.admin-form input[type="file"]{
    padding:8px;
}

.admin-form button{
    width:max-content;
    min-height:42px;
    background:#ff3030;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:0 18px;
    cursor:pointer;
    font-weight:700;
}

.delete-btn{
    color:#ff4040;
    font-weight:700;
    text-decoration:none;
}

.admin-form button:hover{
    background:#ff4a4a;
}

.admin-form .full-row{
    grid-column:1 / -1;
}



/* =========================================================
  END ADMIN FORMS
========================================================= */

/* =========================================================
   ADMIN TABLES
========================================================= */

.table-wrap{
    overflow-x:auto;
}

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

.admin-table th{
    text-align:left;
    background:#161c22;
    padding:12px;
}

.admin-table td{
    padding:12px;
    border-top:1px solid #232a31;
}

.admin-table tr:hover{
    background:#14191f;
}

/* =========================================================
   END ADMIN TABLES
========================================================= */

/* =========================================================
   NOTICES
========================================================= */

.notice{
    padding:15px;
    border-radius:8px;
    margin-bottom:20px;
}

.notice.success{
    background:#14351f;
    border:1px solid #1f7d43;
}

.notice.error{
    background:#351414;
    border:1px solid #7d1f1f;
}

/* =========================================================
   END NOTICES
========================================================= */

/* =========================================================
   START: PRINTER MANAGE PAGE FIX
========================================================= */

.folder-manage-box .admin-form{
    display:flex;
    align-items:end;
    gap:12px;
    margin-bottom:16px;
}

.folder-manage-box .admin-form > div{
    max-width:520px;
}

.folder-manage-box .admin-form button{
    flex:0 0 auto;
}

.folder-manage-box .admin-table{
    margin-top:10px;
}

.folder-manage-head h3{
    font-size:18px;
}

/* =========================================================
   END: PRINTER MANAGE PAGE FIX
========================================================= */