/* =====================================================
   CRONASIA FOUNDATION COLLEGE - FINAL THEME
   AdminLTE v2 - color theme only, layout unchanged
===================================================== */

:root{
  --cfc-red:#e10600;
  --cfc-dark-red:#b30000;
  --cfc-soft-red:#c40000;
  --cfc-light-red:#ff4d4d;
  --cfc-yellow:#ffd54f;
  --cfc-yellow-soft:#ffe082;
  --cfc-black:#111111;
  --cfc-white:#ffffff;
  --cfc-gray-bg:#f4f6f9;
}

/* ================= GENERAL ================= */
body{
  color:#333;
  font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.content-wrapper,
.right-side{
  background-color: var(--cfc-gray-bg) !important;
}

a{
  color: var(--cfc-red);
}
a:hover,
a:focus{
  color: var(--cfc-dark-red);
  text-decoration:none;
}

/* ================= NAVBAR ================= */
.main-header .navbar{
  background: linear-gradient(90deg, #c40000, #e10600) !important;
}

.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle{
  color:#fff !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .sidebar-toggle:hover{
  background: rgba(255,255,255,0.1) !important;
  color:#fff !important;
}

/* ================= LOGO ================= */
.main-header .logo{
  background: linear-gradient(90deg, #990000, #c40000) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center;
  height:50px;
  line-height:normal !important;
  padding:0 10px;
}

.main-header .logo:hover{
  background: linear-gradient(90deg, #8a0000, #b30000) !important;
  color:#fff !important;
}

/* Prevent duplicate logo display */
.main-header .logo .logo-mini{
  display:none !important;
}

.main-header .logo .logo-lg{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.sidebar-collapse .main-header .logo .logo-mini{
  display:flex !important;
  align-items:center;
  justify-content:center;
}

.sidebar-collapse .main-header .logo .logo-lg{
  display:none !important;
}

.cfc-logo-lg{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:2px;
  flex:0 0 auto;
  display:block;
}

.cfc-logo-mini{
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:2px;
  display:block;
}

.cfc-logo-text{
  display:flex;
  align-items:center;
  height:100%;
  font-size:16px;
  color:#fff;
  line-height:1;
  white-space:nowrap;
}

/* ================= SIDEBAR ================= */
.main-sidebar,
.left-side{
  background: linear-gradient(180deg, #c40000 0%, #e10600 60%, #ff4d4d 100%) !important;
}

.sidebar{
  background: transparent !important;
}

.sidebar-menu > li.header{
  color:#fff !important;
  background: rgba(0,0,0,0.2) !important;
}

.sidebar-menu > li > a{
  color:#fff !important;
  border-left:3px solid transparent;
  transition:all .2s ease-in-out;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a{
  background: linear-gradient(90deg, #ffe082, #ffd54f) !important;
  color:#111 !important;
  border-left:3px solid #fff !important;
  font-weight:600;
}

.sidebar-menu > li:hover > a .fa,
.sidebar-menu > li:hover > a .glyphicon,
.sidebar-menu > li:hover > a .ion,
.sidebar-menu > li.active > a .fa,
.sidebar-menu > li.active > a .glyphicon,
.sidebar-menu > li.active > a .ion{
  color:#111 !important;
}

.sidebar-menu > li > .treeview-menu{
  background: rgba(0,0,0,0.15) !important;
}

.sidebar-menu > li > .treeview-menu > li > a{
  color:#fff !important;
  transition:all .2s ease-in-out;
}

.sidebar-menu > li > .treeview-menu > li > a:hover,
.sidebar-menu > li > .treeview-menu > li.active > a{
  background: linear-gradient(90deg, #ffe082, #ffd54f) !important;
  color:#111 !important;
}

.sidebar-menu li > a > .pull-right-container,
.sidebar-menu li > a > .fa-angle-left,
.sidebar-menu li > a > .pull-right{
  color:inherit !important;
}

/* ================= USER DROPDOWN ================= */
.navbar-nav > .user-menu > .dropdown-menu{
  border-top-color:#c40000 !important;
  width:280px;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header{
  background: linear-gradient(90deg, #c40000, #e10600) !important;
  color:#fff !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header > p{
  color:#fff !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header > img{
  border:3px solid rgba(255,255,255,0.35) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer{
  background:#fff !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default{
  border-color:#ddd !important;
  color:#333 !important;
}

/* ================= BUTTONS ================= */
.btn-primary{
  background: linear-gradient(90deg, #c40000, #e10600) !important;
  border:none !important;
  color:#fff !important;
}

.btn-primary:hover,
.btn-primary:focus{
  background: linear-gradient(90deg, #990000, #c40000) !important;
  color:#fff !important;
}

.btn-warning{
  background: linear-gradient(90deg, #ffe082, #ffd54f) !important;
  border:none !important;
  color:#111 !important;
}

.btn-warning:hover,
.btn-warning:focus{
  background: linear-gradient(90deg, #ffd54f, #ffca28) !important;
  color:#111 !important;
}

.btn-default{
  border-radius:3px !important;
}

/* ================= BOXES ================= */
.box{
  border-top:3px solid #ddd;
}

.box.box-primary{
  border-top-color: var(--cfc-red) !important;
}

.box.box-warning{
  border-top-color: var(--cfc-yellow) !important;
}

.box-header.with-border{
  border-bottom:1px solid #f4f4f4;
}

/* ================= TABLE ================= */
.table{
  background:#fff;
}

.table-striped > tbody > tr:nth-of-type(odd){
  background:#f9f9f9;
}

/* ================= BADGES ================= */
.label-danger,
.badge.bg-red{
  background: var(--cfc-red) !important;
}

.label-warning,
.badge.bg-yellow{
  background: var(--cfc-yellow) !important;
  color:#111 !important;
}

/* ================= PAGINATION ================= */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus{
  background: var(--cfc-red) !important;
  border-color: var(--cfc-red) !important;
  color:#fff !important;
}

/* ================= TABS ================= */
.nav-tabs-custom > .nav-tabs > li.active{
  border-top-color: var(--cfc-red) !important;
}

/* ================= FORM ================= */
.form-control{
  border-radius:3px !important;
}

.form-control:focus{
  border-color: var(--cfc-red) !important;
  box-shadow:none !important;
}

/* ================= MODAL ================= */
.modal-header{
  background: linear-gradient(90deg, #c40000, #e10600);
  color:#fff;
}

.modal-title{
  font-weight:600;
}

/* ================= LOGIN PAGE ================= */
.login-page,
.register-page{
  background: linear-gradient(135deg, #ffffff, #fff7c7, #ffe9e9) !important;
}

.login-logo a,
.register-logo a{
  color: var(--cfc-dark-red) !important;
  font-weight:700;
}

.login-box-body,
.register-box-body{
  border-top:4px solid var(--cfc-red);
}

/* ================= DATATABLE ================= */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--cfc-red) !important;
  border-color: var(--cfc-red) !important;
  color:#fff !important;
}

/* =====================================================
   CRONASIA MODERN DASHBOARD CARDS (WHITE STYLE)
===================================================== */

/* Base card */
.small-box{
  background:#fff !important;
  border-radius:12px !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.08) !important;
  border-left:5px solid #e10600;
  color:#333 !important;
  position:relative;

  /* REMOVE ALL MOTION */
  transition:none !important;
}

.small-box:hover{
  transform:none !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.08) !important;
}



/* Remove default background colors */
.small-box.bg-aqua,
.small-box.bg-green,
.small-box.bg-yellow,
.small-box.bg-red{
  background:#fff !important;
}

/* ================= BORDER COLORS ================= */

/* Total Employees */
.small-box.bg-aqua{
  border-left:5px solid #e10600 !important;
}

/* Active Employees */
.small-box.bg-green{
  border-left:5px solid #b30000 !important;
}

/* Pending */
.small-box.bg-yellow{
  border-left:5px solid #ffd54f !important;
}

/* Attendance */
.small-box.bg-red{
  border-left:5px solid #ff4d4d !important;
}

/* ================= TEXT ================= */

.small-box .inner h3{
  font-size:32px;
  font-weight:700;
  color:#111;
}

.small-box .inner p{
  font-size:14px;
  color:#777;
}

/* ================= ICON BOX ================= */

.small-box .icon{
  position:absolute;
  right:15px;
  top:18px;
  width:60px;
  height:60px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  opacity:1;
}

/* Icon colors per card */
.small-box.bg-aqua .icon{
  background:#fde0e0;
  color:#e10600;
}

.small-box.bg-green .icon{
  background:#f5caca;
  color:#b30000;
}

.small-box.bg-yellow .icon{
  background:#fff3cd;
  color:#f39c12;
}

.small-box.bg-red .icon{
  background:#ffe0e0;
  color:#ff4d4d;
}

/* ================= FOOTER ================= */

.small-box-footer{
  background:transparent !important;
  color:#888 !important;
  padding-top:10px;
  font-size:13px;
}

.small-box-footer:hover{
  color:#e10600 !important;
}

/* ================= EMPLOYEE NAVBAR BRAND ================= */

.cfc-navbar-brand{
  display:flex !important;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
}

.cfc-navbar-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:2px;
}

.cfc-navbar-text{
  color:#fff !important;
  display:flex;
  align-items:center;
}

/* Fix navbar height alignment */
.navbar-brand{
  height:50px;
  line-height:normal !important;
}