/* AIRADS Modern Theme v1.0
 * Foundation stylesheet - ready to paste.
 */

:root{
  /* Brand */
  --primary:#367fec;
  --primary-dark:#2c70d6;
  --primary-darker:#1f5bb5;
  --primary-darkest:#164994;
  --primary-gradient-end:#2c70d6;
  --primary-gradient-end-alt:#367fec;
  --secondary:#164994;
  --primary-btn:#164994;
  --accent:#f0c830;

  /* Neutrals - backgrounds */
  --bg-main:#F7F8FC;
  --bg-card:#FFFFFF;
  --bg-soft:#F8FAFC;
  --bg-tint-primary:#FFF3F6;
  --bg-tint-primary-alt:#FFF6F8;
  --bg-tint-success:#ECFDF5;
  --bg-tint-info:#EFF6FF;
  --bg-tint-warning:#FFFBEB;
  --bg-tint-warning-alt:#FFF7ED;
  --bg-tint-danger:#FEF2F2;
  --bg-tint-purple:#F3E8FF;

  /* Neutrals - text */
  --text-main:#164994;
  --text-sidebar:#FFFFFF;
  --text-muted:#6B7280;
  --text-muted-2:#64748B;
  --text-faint:#94A3B8;
  --text-lightest:#CBD5E1;

  /* Borders */
  --border:#E5E7EB;
  --border-light:#EEF2F7;
  --border-light-alt:#EDF2F7;
  --border-lightest:#F1F5F9;
  --avatar-border:#F3F4F6;

  /* Status colors */
  --success:#10B981;
  --success-dark:#059669;
  --warning:#F59E0B;
  --warning-dark:#D97706;
  --danger:#DC2626;
  --danger-alert:#EF4444;
  --info:#3B82F6;
  --info-dark:#2563EB;
  --purple:#7C3AED;

  /* Buttons - default variant */
  --btn-default-text:rgb(181, 181, 195);
  --btn-default-border:rgb(243, 246, 249);
  --btn-default-hover-text:#f4f4f7;

  /* Shadows (reused rgba tones) */
  --shadow:0 6px 18px rgba(15,23,42,.08);
  --shadow-hover:0 14px 32px rgba(15,23,42,.12);
  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --shadow-header:0 2px 12px rgba(0,0,0,.05);
  --shadow-lg:0 15px 35px rgba(15,23,42,.12);
  --shadow-xl:0 15px 40px rgba(15,23,42,.12);
  --shadow-btn-hover:0 12px 30px rgba(0,0,0,.3);
  --shadow-primary-glow:0 10px 20px rgba(198,7,64,.25);
  --focus-ring:0 0 0 3px rgba(198,7,64,.12);
  --focus-ring-alt:0 0 0 4px rgba(198,7,64,.10);
  --sidebar-shadow:0 10px 40px rgba(0,0,0,.25);
  --menu-active-shadow:0 8px 20px rgba(0,0,0,.18);

  /* White overlay tones (used on the dark sidebar) */
  --overlay-white-92:rgba(255,255,255,.92);
  --overlay-white-85:rgba(255,255,255,.85);
  --overlay-white-70:rgba(255,255,255,.7);
  --overlay-white-55:rgba(255,255,255,.55);
  --overlay-white-22:rgba(255,255,255,.22);
  --overlay-white-12:rgba(255,255,255,.12);
  --overlay-white-10:rgba(255,255,255,.10);
  --overlay-white-08:rgba(255,255,255,.08);

  /* Primary-tinted alpha (focus rings / glows) */
  --primary-alpha-25:rgba(198,7,64,.25);
  --primary-alpha-12:rgba(198,7,64,.12);
  --primary-alpha-10:rgba(198,7,64,.10);

  /* Neutral dark shadows */
  --shadow-dark-30:rgba(0,0,0,.3);
  --shadow-dark-25:rgba(0,0,0,.25);
  --shadow-dark-18:rgba(0,0,0,.18);
  --shadow-dark-12:rgba(0,0,0,.12);
  --shadow-dark-06:rgba(0,0,0,.06);
  --shadow-dark-05:rgba(0,0,0,.05);
  --shadow-slate-12:rgba(15,23,42,.12);
  --shadow-slate-08:rgba(15,23,42,.08);
  --shadow-slate-06:rgba(15,23,42,.06);
  --shadow-slate-05:rgba(15,23,42,.05);
}

body{
  font-family:Poppins,"Segoe UI",sans-serif;
  background:var(--bg-main)!important;
  color:var(--text-main)!important;
}

/* Header */
#kt_header,.header{
  background:var(--bg-card)!important;
  border:none!important;
  box-shadow:0 2px 12px var(--shadow-dark-05)!important;
  min-height:68px;
}

/* Sidebar */
#kt_aside,.aside,#kt_brand,.brand{
  background:linear-gradient(180deg,var(--primary),var(--primary-darker))!important;
}
#kt_aside_menu{background:transparent!important;}
#kt_aside_menu .menu-item{margin:4px 8px;}
#kt_aside_menu .menu-link{
  min-height:46px;
  color:var(--bg-card)!important;
  border-radius:10px;
  transition:.25s ease;
}
#kt_aside_menu .menu-link:hover{
  background:var(--overlay-white-10)!important;
  padding-left:22px;
}
#kt_aside_menu .menu-item-active>.menu-link,
#kt_aside_menu .menu-item-open>.menu-link{
  background:var(--bg-card)!important;
  color:var(--primary)!important;
  box-shadow:var(--shadow);
}
#kt_aside_menu .menu-item-active i,
#kt_aside_menu .menu-item-open i{
  color:var(--sidebar)!important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
 color:var(--sidebar)!important;
}
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
  color:var(--sidebar)!important;
}

/* Cards */
.card,.card-custom,.kt-portlet{
  background:var(--bg-card)!important;
  border:none!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  transition:.25s;
}
.card:hover,.card-custom:hover,.kt-portlet:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover)!important;
}
.card-title{
  font-weight:600!important;
  color:var(--text-main)!important;
}
.display-4,.counter,.card h2{
  color:var(--primary)!important;
  font-weight:700!important;
}

/* Tabs */
.nav-tabs{border:none;gap:8px;}
.nav-tabs .nav-link{
    border: none !important;
    background: var(--primary)14;
    border-radius: 10px;
    color: var(--text-muted);
    padding:10px 15px;
    font-size:13px;
}
.nav-tabs .nav-link.active{
  background:var(--primary)!important;
  color:var(--bg-card)!important;
}

/* Buttons */
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-gradient-end))!important;
  border:none!important;
  border-radius:10px!important;
}
.btn-primary:hover{
  transform:translateY(-2px);
}
.btn.btn-default {
    color: var(--btn-default-text);
    background-color: var(--primary-btn);
    border-color: var(--btn-default-border);
}
.btn.btn-default:hover:not(.btn-text):not(:disabled):not(.disabled), 
.btn.btn-default:focus:not(.btn-text), 
.btn.btn-default.focus:not(.btn-text) {
    color: var(--btn-default-hover-text);
    background-color: var(--primary-btn);
    border-color: var(--btn-default-border);
}
#kt_login_signin_submit:hover,.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--shadow-dark-30);
}
/* Forms */
.form-control,select,textarea{
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
.form-control:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px var(--primary-alpha-12)!important;
}

/* Tables */
.table thead th{
  background:var(--bg-soft)!important;
  font-weight:700;
  border:none!important;
}
.table-hover tbody tr:hover{
  background:var(--bg-tint-primary-alt)!important;
}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{
  background:var(--secondary);
  border-radius:8px;
}

@media(max-width:768px){
  .card{margin-bottom:18px;}
}


/************************Dashboard**********************************/
/* ======================================================
   AIRADS ERP
   DASHBOARD.CSS
======================================================*/

.dashboard,
.dashboard-content,
.content,
.content-wrapper{

    padding:30px!important;

    background:var(--bg-main)!important;

}

/* ==========================================
   KPI CARDS
========================================== */

.kpi-card,
.card-dashboard,
.card-stat{

    position:relative;

    border-radius:14px!important;

    background:var(--bg-card)!important;

    overflow:hidden;

    border:none!important;

    transition:.3s;

    box-shadow:0 8px 25px var(--shadow-dark-06);

}

.kpi-card:hover,
.card-dashboard:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px var(--shadow-dark-12);

}

/* Colored top border */

.kpi-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

}

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

.kpi-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--bg-tint-primary);

    color:var(--primary);

    font-size:28px;

    margin-bottom:15px;

}

/* ==========================================
   TITLE
========================================== */

.kpi-title{

    font-size:13px;

    color:var(--text-muted-2);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* ==========================================
   VALUE
========================================== */

.kpi-value{

    font-size:36px;

    font-weight:700;

    color:var(--text-main);

    margin-top:5px;

}

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

.kpi-footer{

    margin-top:15px;

    font-size:13px;

    color:var(--success);

}

/* ==========================================
   DASHBOARD WIDGETS
========================================== */

.dashboard-widget{

    border-radius:14px;

    background:var(--bg-card);

    padding:20px;

    box-shadow:0 8px 20px var(--shadow-dark-05);

    transition:.3s;

}

.dashboard-widget:hover{

    transform:translateY(-3px);

}

/* ==========================================
   WIDGET TITLE
========================================== */

.dashboard-widget h3{

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;

}

/* ==========================================
   TIMETABLE
========================================== */

.timetable-item{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid var(--border-light-alt);

}

.timetable-item:last-child{

    border:none;

}

.timetable-time{

    color:var(--primary);

    font-weight:700;

}

/* ==========================================
   QUICK ACTIONS
========================================== */

.quick-action{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px;

    border-radius:12px;

    transition:.25s;

    cursor:pointer;

}

.quick-action:hover{

    background:var(--bg-tint-primary-alt);

    transform:translateX(5px);

}

.quick-action i{

    width:42px;

    height:42px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--bg-tint-primary);

    color:var(--primary);

}

/* ==========================================
   RECENT ACTIVITY
========================================== */

.activity-item{

    display:flex;

    gap:15px;

    padding:14px 0;

    border-bottom:1px solid var(--border-light-alt);

}

.activity-item:last-child{

    border:none;

}

.activity-icon{

    width:36px;

    height:36px;

    border-radius:50%;

    background:var(--bg-tint-success);

    color:var(--success);

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================
   CHART CONTAINER
========================================== */

.chart-card{

    padding:20px;

    background:var(--bg-card);

    border-radius:14px;

    box-shadow:0 8px 20px var(--shadow-dark-05);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

.kpi-card{

margin-bottom:20px;

}

.dashboard-content{

padding:15px!important;

}

}
/************************Sidebar**********************************/
/* =========================================================
   AIRADS ERP
   SIDEBAR.CSS
========================================================= */

/* -------------------------
   SIDEBAR
------------------------- */

#kt_aside,
.aside,
#kt_brand,
.brand{
    background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 45%,var(--primary-darkest) 100%) !important;
    border:none !important;
}

/* Brand */

#kt_brand{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--overlay-white-08);
}

#kt_brand img {
    max-height: 100%;
}
/* Menu */

#kt_aside_menu{
    background:transparent !important;
    padding:18px 10px;
}

/* Section headings */

#kt_aside_menu .menu-section,
#kt_aside_menu .menu-text-uppercase{

    color:var(--overlay-white-55);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin:18px 16px 8px;

    font-weight:700;
}

/* Menu Item */

#kt_aside_menu .menu-item{

    margin:4px 0;

}

/* Menu Link */

#kt_aside_menu .menu-link{

    position:relative;

    display:flex;

    align-items:center;

    min-height:46px;

    padding:12px 16px;

    border-radius:10px;

    color:var(--overlay-white-92) !important;

    transition:all .25s ease;

}

/* Icon */

#kt_aside_menu .menu-icon,
#kt_aside_menu i{

    width:22px;

    margin-right:12px;

    font-size:17px;

    color:var(--overlay-white-85);

    transition:.25s;

}

/* Text */

#kt_aside_menu .menu-text{

    font-size:14px;

    font-weight:500;

}

/* Hover */

#kt_aside_menu .menu-link:hover{

    background:var(--overlay-white-08);

    padding-left:22px;

}

#kt_aside_menu .menu-link:hover .menu-icon{

    transform:scale(1.08);

}

/* Active */

#kt_aside_menu .menu-item-active>.menu-link,
#kt_aside_menu .menu-item-open>.menu-link{

    background:var(--bg-card) !important;

    color:var(--primary) !important;

    box-shadow:0 8px 20px var(--shadow-dark-18);

}

/* Active Icon */

#kt_aside_menu .menu-item-active>.menu-link i,
#kt_aside_menu .menu-item-open>.menu-link i,

#kt_aside_menu .menu-item-active>.menu-link .menu-icon,
#kt_aside_menu .menu-item-open>.menu-link .menu-icon{

    color:var(--primary) !important;

}

/* Active Indicator */

#kt_aside_menu .menu-item-active>.menu-link::before,
#kt_aside_menu .menu-item-open>.menu-link::before{

    content:"";

    position:absolute;

    left:-10px;

    top:8px;

    bottom:8px;

    width:4px;

    border-radius:0 4px 4px 0;

    background:var(--accent);

}

/* Arrow */

#kt_aside_menu .menu-arrow{

    color:var(--overlay-white-70);

}

/* Submenu */

#kt_aside_menu .menu-subnav,
#kt_aside_menu .submenu{

    margin-left:18px;

    border-left:1px solid var(--overlay-white-12);

    padding-left:10px;

}

/* Submenu Item */

#kt_aside_menu .menu-subnav .menu-link{

    min-height:40px;

    padding:10px 14px;

    border-radius:8px;

    font-size:13px;

}

/* Scrollbar */

#kt_aside::-webkit-scrollbar{

    width:6px;

}

#kt_aside::-webkit-scrollbar-thumb{

    background:var(--overlay-white-22);

    border-radius:10px;

}

/* Collapse Button */

#kt_aside_toggle{

    border-radius:50%;

    transition:.25s;

}

#kt_aside_toggle:hover{

    transform:rotate(180deg);

}

/* Footer */

.sidebar-footer{

    margin-top:auto;

    padding:16px;

    text-align:center;

    color:var(--overlay-white-55);

    font-size:12px;

}

/* Responsive */

@media (max-width:991px){

    #kt_aside{

        box-shadow:0 10px 40px var(--shadow-dark-25);

    }

    #kt_aside_menu{

        padding:14px 8px;

    }

}

/************************Sidebar**********************************/

/************************header**********************************/
/* ===========================================================
   AIRADS ERP
   HEADER.CSS
   Professional Metronic Header
===========================================================*/

/* ===========================================================
   HEADER
===========================================================*/

#kt_header,
.header,
.header-fixed{

    background:var(--bg-card) !important;

    height:72px;

    border:none !important;

    box-shadow:0 2px 15px var(--shadow-slate-05);

    z-index:100;

}

/* ===========================================================
   HEADER CONTAINER
===========================================================*/

#kt_header .container,
#kt_header .container-fluid{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:72px;

}

/* ===========================================================
   PAGE TITLE
===========================================================*/

/*---------------- Content ----------------*/

#kt_content,
.content,
.content-wrapper,
.container-fluid{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
}

/*---------------- Subheader ----------------*/

#kt_subheader .container-fluid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    width:100%;
}

#kt_subheader .container-fluid > :first-child{
    flex:1 1 auto;
    min-width:260px;
    margin-bottom:0;
}

#kt_subheader .container-fluid > :last-child{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    flex:0 1 auto;
}

/* Toolbar */

#kt_subheader .btn-toolbar,
#kt_subheader .toolbar,
#kt_subheader .page-toolbar,
#kt_subheader .subheader-toolbar{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}
/* ===========================================================
   BREADCRUMB
===========================================================*/

.breadcrumb{

    background:transparent;

    padding:0;

    margin:0;

}

.breadcrumb-item{

    font-size:13px;

    color:var(--text-faint);

}

.breadcrumb-item a{

    color:var(--text-muted-2);

    transition:.2s;

}

.breadcrumb-item a:hover{

    color:var(--primary);

    text-decoration:none;

}

.breadcrumb-item.active{

    color:var(--text-main);

    font-weight:600;

}

/* ===========================================================
   SEARCH BOX
===========================================================*/

.header-search{

    position:relative;

    width:320px;

}

.header-search input{

    width:100%;

    height:44px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--bg-soft);

    padding-left:45px;

    transition:.25s;

}

.header-search input:focus{

    border-color:var(--primary);

    background:var(--bg-card);

    box-shadow:0 0 0 4px var(--primary-alpha-10);

}

.header-search i{

    position:absolute;

    left:16px;

    top:14px;

    color:var(--text-faint);

}

/* ===========================================================
   HEADER BUTTONS
===========================================================*/

.header-toolbar .btn,
.header-actions .btn{

    width:42px;

    height:42px;

    border-radius:12px;

    border:none;

    background:var(--bg-soft);

    color:var(--text-muted-2);

    transition:.25s;

    margin-left:8px;

}

.header-toolbar .btn:hover,
.header-actions .btn:hover{

    background:var(--bg-tint-primary);

    color:var(--primary);

    transform:translateY(-2px);

}

/* ===========================================================
   NOTIFICATION BADGE
===========================================================*/

.badge-circle{

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--danger-alert);

    color:var(--bg-card);

    font-size:11px;

    position:absolute;

    top:-4px;

    right:-4px;

}

/* ===========================================================
   USER PROFILE
===========================================================*/

.header-user{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 14px;

    border-radius:14px;

    transition:.25s;

    cursor:pointer;

}

.header-user:hover{

    background:var(--bg-soft);

}

.header-user img{

    width:42px;

    height:42px;

    border-radius:50%;

    border:2px solid var(--avatar-border);

}

.header-user .user-name{

    font-size:14px;

    font-weight:600;

    color:var(--text-main);

}

.header-user .user-role{

    font-size:12px;

    color:var(--text-muted-2);

}

/* ===========================================================
   DROPDOWN MENU
===========================================================*/

.dropdown-menu{

    border:none;

    border-radius:14px;

    box-shadow:0 15px 40px var(--shadow-slate-12);

    overflow:hidden;

    padding:10px;

}

.dropdown-item{

    border-radius:10px;

    padding:12px 14px;

    transition:.2s;

    font-size:14px;

}

.dropdown-item:hover{

    background:var(--bg-tint-primary-alt);

    color:var(--primary);

}

/* ===========================================================
   HEADER ICONS
===========================================================*/

.header-icon{

    width:44px;

    height:44px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--bg-soft);

    color:var(--text-muted-2);

    transition:.25s;

}

.header-icon:hover{

    background:var(--bg-tint-primary);

    color:var(--primary);

    transform:translateY(-2px);

}

/* ===========================================================
   QUICK ACTION BUTTON
===========================================================*/

.btn-header-primary{

    background:linear-gradient(135deg,var(--primary),var(--primary-gradient-end-alt));

    color:var(--bg-card);

    border:none;

    border-radius:12px;

    padding:10px 18px;

    font-weight:600;

    transition:.25s;

}

.btn-header-primary:hover{

    color:var(--bg-card);

    transform:translateY(-2px);

    box-shadow:0 10px 20px var(--primary-alpha-25);

}

/* ===========================================================
   RESPONSIVE
===========================================================*/

@media(max-width:992px){

.header-search{

display:none;

}

.page-title{

font-size:22px;

}

.header-user .user-role{

display:none;

}

}

@media(max-width:768px){

#kt_header{

height:64px;

}

.page-title{

font-size:20px;

}

.header-user span{

display:none;

}

}

/************************header**********************************/


/************************Cards**********************************/
/* ==========================================================
   AIRADS ERP
   CARDS.CSS
   Modern Card Components
==========================================================*/

/* ==========================================================
   BASE CARD
==========================================================*/

.card,
.card-custom,
.kt-portlet,
.kt-widget{

    background:var(--bg-card) !important;

    border:none !important;

    border-radius:14px !important;

    box-shadow:0 6px 18px var(--shadow-slate-06);

    overflow:hidden;

    transition:all .25s ease;

    margin-bottom:24px;

}

.card:hover,
.card-custom:hover,
.kt-portlet:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px var(--shadow-slate-12);

}

/* ==========================================================
   CARD HEADER
==========================================================*/

.card-header,
.card-custom>.card-header,
.kt-portlet__head{

    background:var(--bg-card) !important;

    border-bottom:1px solid var(--border-light) !important;

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 24px;

}

.card-header h3,
.card-title{

    font-size:18px;

    font-weight:700;

    color:var(--text-main);

    margin:0;

}
.card.card-custom > .card-header.card-header-tabs-line .nav .nav-link {
    padding: 1rem;
    /* padding-bottom: 2rem; */
}
/* ==========================================================
   CARD BODY
==========================================================*/

.card-body,
.kt-portlet__body{

    padding:24px;

}

/* ==========================================================
   KPI CARD
==========================================================*/

.kpi-card{

    position:relative;

    overflow:hidden;

}

.kpi-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

}

/* ==========================================================
   KPI ICON
==========================================================*/

.kpi-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:var(--primary);

    background:var(--bg-tint-primary);

    margin-bottom:20px;

}

/* ==========================================================
   KPI TITLE
==========================================================*/

.kpi-title{

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.7px;

    color:var(--text-muted-2);

}

/* ==========================================================
   KPI VALUE
==========================================================*/

.kpi-value{

    font-size:38px;

    font-weight:700;

    color:var(--text-main);

    line-height:1.2;

    margin-top:8px;

}

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

.kpi-footer{

    margin-top:18px;

    font-size:13px;

    color:var(--success);

}

/* ==========================================================
   STATUS BADGES
==========================================================*/

.badge-success{

    background:var(--bg-tint-success);

    color:var(--success-dark);

    border-radius:30px;

    padding:6px 12px;

}

.badge-warning{

    background:var(--bg-tint-warning);

    color:var(--warning-dark);

    border-radius:30px;

    padding:6px 12px;

}

.badge-danger{

    background:var(--bg-tint-danger);

    color:var(--danger);

    border-radius:30px;

    padding:6px 12px;

}

.badge-info{

    background:var(--bg-tint-info);

    color:var(--info-dark);

    border-radius:30px;

    padding:6px 12px;

}

/* ==========================================================
   ICON COLORS
==========================================================*/

.icon-primary{

    background:var(--bg-tint-primary);

    color:var(--primary);

}

.icon-success{

    background:var(--bg-tint-success);

    color:var(--success);

}

.icon-warning{

    background:var(--bg-tint-warning-alt);

    color:var(--warning);

}

.icon-info{

    background:var(--bg-tint-info);

    color:var(--info);

}

.icon-purple{

    background:var(--bg-tint-purple);

    color:var(--purple);

}

/* ==========================================================
   MINI STATISTICS
==========================================================*/

.stat-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid var(--border-lightest);

}

.stat-item:last-child{

    border-bottom:none;

}

.stat-title{

    color:var(--text-muted-2);

}

.stat-value{

    font-weight:700;

    color:var(--text-main);

}

/* ==========================================================
   ACTIVITY CARD
==========================================================*/

.activity-item{

    display:flex;

    gap:15px;

    padding:14px 0;

    border-bottom:1px solid var(--border-lightest);

}

.activity-item:last-child{

    border:none;

}

.activity-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--bg-tint-success);

    color:var(--success);

}

.activity-title{

    font-weight:600;

    color:var(--text-main);

}

.activity-time{

    color:var(--text-faint);

    font-size:12px;

}

/* ==========================================================
   QUICK ACTION CARD
==========================================================*/

.quick-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border-radius:12px;

    transition:.25s;

    cursor:pointer;

    border:1px solid var(--border-light);

}

.quick-card:hover{

    background:var(--bg-tint-primary-alt);

    border-color:var(--primary);

    transform:translateY(-2px);

}

.quick-card i{

    width:48px;

    height:48px;

    border-radius:14px;

    background:var(--bg-tint-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:22px;

}

/* ==========================================================
   CHART CARD
==========================================================*/

.chart-card{

    min-height:360px;

}

.chart-title{

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;

}

/* ==========================================================
   EMPTY STATE
==========================================================*/

.empty-card{

    text-align:center;

    padding:50px 20px;

}

.empty-card i{

    font-size:48px;

    color:var(--text-lightest);

    margin-bottom:15px;

}

.empty-card h4{

    color:var(--text-muted-2);

}

.empty-card p{

    color:var(--text-faint);

}

/* ==========================================================
   RESPONSIVE
==========================================================*/

@media(max-width:992px){

.card-body{

padding:18px;

}

.kpi-value{

font-size:30px;

}

.kpi-icon{

width:54px;

height:54px;

font-size:24px;

}

}

@media(max-width:768px){

.card-header{

padding:16px;

}

.card-body{

padding:16px;

}

.kpi-value{

font-size:26px;

}

.quick-card{

padding:14px;

}

}
/************************Cards**********************************/


/* =====================================================
   AIRADS ERP
   MOBILE RESPONSIVE
=====================================================*/

@media (max-width:991px){

/* Header */

#kt_header,
.header{
    height:60px!important;
    min-height:60px!important;
    padding:0 15px!important;
}

/* Hide Logo */

.brand .brand-logo img {
    display: block;
    max-width: 100%;
    max-height: 45px; /* Adjust to your navbar height */
    width: auto;
    height: 50px;
    object-fit: contain;
}
/* Sidebar */

#kt_aside{
    width:260px!important;
}

/* Page */

.content,
.content-wrapper,
.dashboard{
    padding:12px!important;
}

/* Breadcrumb */

.breadcrumb{
    display:none!important;
}

/* Page title */

.page-title{
    font-size:24px!important;
}

/* Dashboard tabs */

.nav-tabs{

    flex-wrap:nowrap!important;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

}

.nav-tabs::-webkit-scrollbar{

    display:none;

}

.nav-tabs .nav-link{

    flex:0 0 auto;

}

/* Cards */

.card{

    margin-bottom:15px!important;

}

.card-body{

    padding:16px!important;

}

/* Statistics */

.kpi-value{

    font-size:28px!important;

}

.kpi-icon{

    width:50px;

    height:50px;

}

/* Buttons */

.btn{

    width:100%;

    margin-bottom:10px;

}

/* Tables */

.table-responsive {
    overflow-x: auto;
    width: 100%;
}

table.dataTable {
    width: 100% !important;
}
/* Quick Access */

.quick-card{

    width:100%!important;

}
table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a {
  color:var(--text-main)!important;
}

/* Timetable */

.timetable-item{

    flex-direction:column;

    align-items:flex-start;

}

/* Charts */

.chart-card{

    min-height:250px;

}

}

/* Phones */

@media (max-width:576px){

.page-title{

font-size:20px!important;

}

.header-user span{

display:none;

}

.card-header{

padding:14px!important;

}

.card-body{

padding:14px!important;

}

.kpi-value{

font-size:24px!important;

}

}


/* ===== MOBILE FIX ===== */

@media (max-width:768px){

.row{

    margin-left:0 !important;

    margin-right:0 !important;

}

.col,
[class*="col-"]{

    width:100% !important;

    max-width:100% !important;

    flex:0 0 100% !important;

}


.btn-group{

    display:flex !important;

    flex-wrap:wrap !important;

    gap:10px;

}

.btn{

    margin-bottom:10px !important;

}

.table-responsive{

    overflow-x:auto;

}

.card{

    width:100% !important;

}

}

/************************TOOLBAR / HEADER OVERLAP FIX**********************************/
/* ======================================================
   AIRADS ERP
   Fix: subheader toolbar buttons clipped/overlapping the
   header, and overlapping page content (e.g. the "Student
   details" card) once the toolbar has enough buttons to
   wrap onto 2-3 lines.

   ROOT CAUSE: <body> has both "header-fixed" AND
   "subheader-fixed", so Metronic pins #kt_subheader with
   position:fixed right below the header. That only works
   when the toolbar is a single row tall. With many buttons
   (Export, Add/Remove Graduation, Add/Remove Attachment,
   Report Card, Transcript, Exam Card, Create New Detail,
   Messaging...) it wraps to multiple rows and grows taller
   than the fixed space reserved for it, so it overlaps the
   card underneath.

   FIX: take the subheader out of fixed positioning and let
   it sit in normal document flow, directly under the fixed
   header. Its height is then whatever it needs to be
   (1 row or 4 rows) and nothing below it can ever overlap.
====================================================== */

/* 1. Reserve space only for the fixed header (not the subheader —
   the subheader now flows normally, so it pushes content down by
   however tall it actually is). */
.header-fixed .wrapper{
    padding-top:72px !important;
}

@media (max-width:991px){
    .header-fixed .wrapper{
        padding-top:60px !important;
    }
}

#kt_header{
    z-index:110 !important;
}

/* 2. Un-fix the subheader — this is the actual fix for the overlap.
   subheader-fixed normally does position:fixed/top:72px; overriding
   it back to static/relative makes it flow after the header instead
   of floating over whatever comes next. */
.subheader-fixed #kt_subheader,
#kt_subheader{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    z-index:90;
    padding:16px 20px !important;
    height:auto !important;
    min-height:0 !important;
}

/* 3. Let the toolbar wrap onto as many rows as it needs, with buttons
   that keep their full label instead of clipping/truncating text. */
#kt_subheader .d-flex.align-items-center,
#kt_subheader .btn-toolbar,
#kt_subheader .toolbar,
#kt_subheader .page-toolbar,
#kt_subheader .subheader-toolbar{
    flex-wrap:wrap !important;
    align-items:center;
    row-gap:10px;
}

#kt_subheader .btn{
    height:auto !important;
    min-height:42px;
    padding:10px 16px !important;
    white-space:normal !important;
    line-height:1.2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:4px 0 4px 8px;
}

/* 4. Since the subheader is no longer fixed/floating, make sure the
   page content right after it has a little breathing room instead
   of butting straight up against the last row of buttons. */
.container-fluid{
    margin-top:8px;
}

/************************TOOLBAR / HEADER OVERLAP FIX**********************************/

/************************Login**********************************/
/* ===========================================================
   AIRADS ERP
   LOGIN.CSS
   Login page — matches theme tokens from the base stylesheet.

   NOTE: selectors below assume a wrapper class of `.login-card`
   and standard `.form-control` inputs. If your login markup
   uses different classes/IDs, swap the selectors — the rest
   (vars, spacing, states) will carry over unchanged.
===========================================================*/

/* ===========================================================
   PAGE BACKGROUND
===========================================================*/

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

/* ===========================================================
   LOGO
===========================================================*/

.login-logo{
    display:flex;
    justify-content:center;
    margin-bottom:12px;
}

.login-logo img{
    max-height:90px;
    width:auto;
}

/* ===========================================================
   CARD
===========================================================*/

.login-card{
    width:100%;
    max-width:420px;
    background:var(--bg-card);
    border-radius:16px;
    box-shadow:var(--shadow-xl);
    padding:40px 36px;
}

.login-card h1,
.login-card h2,
.login-card h3{
    font-size:24px;
    font-weight:700;
    color:#1E293B;
    margin-bottom:24px;
}

/* ===========================================================
   FORM FIELDS
===========================================================*/

.login-card .form-group{
    margin-bottom:16px;
}

.login-card .form-control{
    width:100%;
    height:52px;
    border-radius:12px !important;
    border:1px solid var(--border) !important;
    background:var(--bg-soft);
    padding:0 16px;
    font-size:14px;
    color:#1E293B;
    box-shadow:none !important;
    transition:.2s ease;
}

.login-card .form-control::placeholder{
    color:var(--text-faint);
}

.login-card .form-control:focus{
    border-color:var(--primary) !important;
    background:var(--bg-card);
    box-shadow:var(--focus-ring) !important;
}

/* ===========================================================
   REMEMBER ME / FORGOT PASSWORD ROW
===========================================================*/

.login-card .login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:8px 0 24px;
    font-size:13px;
}

.login-card .login-options label{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted-2);
    cursor:pointer;
}

.login-card .login-options a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.login-card .login-options a:hover{
    text-decoration:underline;
}

/* ===========================================================
   SUBMIT BUTTON
===========================================================*/

#kt_login_signin_submit,
.login-card .btn-login{
    width:100%;
    height:52px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--primary-gradient-end));
    color:var(--bg-card);
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    transition:.25s ease;
    box-shadow:var(--shadow-primary-glow);
}

#kt_login_signin_submit:hover,
.login-card .btn-login:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-btn-hover);
}

/* ===========================================================
   SIGN-UP / SECONDARY LINKS
===========================================================*/

.login-card .login-links{
    margin-top:20px;
    font-size:13px;
    line-height:1.8;
    text-align:left;
}

.login-card .login-links a{
    color:var(--info);
    font-weight:600;
    text-decoration:none;
}

.login-card .login-links a:hover{
    text-decoration:underline;
}

.login-card .login-links .not-registered{
    color:var(--danger-alert);
    font-weight:600;
    margin-right:6px;
}

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

.login-footer{
    text-align:center;
    margin-top:28px;
    font-size:12px;
    color:var(--text-faint);
}

.login-footer a{
    color:var(--text-muted-2);
    text-decoration:underline;
}

/* ===========================================================
   RESPONSIVE
===========================================================*/

@media(max-width:480px){
    .login-card{
        padding:28px 22px;
        border-radius:14px;
    }
    .login-card h1,
    .login-card h2,
    .login-card h3{
        font-size:20px;
    }
}
/************************Login**********************************/