body{font-family:Segoe UI,sans-serif;background:#eef2f7;}header{background:#0f172a;color:#fff;padding:20px;}
/*==================================================
OCR Dashboard V3
==================================================*/

:root{

--primary:#2563eb;
--success:#16a34a;
--warning:#f59e0b;
--danger:#dc2626;
--dark:#0f172a;
--light:#f4f7fb;

}

body{

background:var(--light);
font-family:Segoe UI,Tahoma,sans-serif;
font-size:14px;

}

/*=========================
Top Bar
==========================*/

.topbar{

background:linear-gradient(90deg,#0f172a,#1e293b);

color:#fff;

padding:20px 35px;

box-shadow:0 5px 18px rgba(0,0,0,.20);

margin-bottom:25px;

}

.logo{

font-size:30px;

font-weight:bold;

letter-spacing:1px;

}

.subtitle{

opacity:.75;

}

/*=========================
Cards
==========================*/

.dashboard-card{

border:none;

border-radius:18px;

box-shadow:0 10px 28px rgba(0,0,0,.08);

transition:.30s;

overflow:hidden;

}

.dashboard-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.dashboard-card .card-header{

font-weight:bold;

font-size:18px;

}

.dashboard-card .card-body{

padding:28px;

}

/*=========================
Summary Cards
==========================*/

.bg-total{

background:#2563eb;

color:white;

}

.bg-freeze{

background:#16a34a;

color:white;

}

.bg-fix{

background:#f59e0b;

color:white;

}

.bg-build{

background:#dc2626;

color:white;

}

.bg-accuracy{

background:#7c3aed;

color:white;

}

.dashboard-card h2{

font-size:38px;

font-weight:bold;

}

/*=========================
Progress
==========================*/

.progress{

height:24px;

border-radius:15px;

overflow:hidden;

background:#e5e7eb;

}

.progress-bar{

font-weight:bold;

transition:width .8s;

}

/*=========================
Tables
==========================*/

.table{

font-size:12px;

}

.table thead{

background:#0f172a;

color:white;

}

.table-hover tbody tr:hover{

background:#edf7ff;

}

/*=========================
Sticky Header
==========================*/

.table-responsive{

max-height:700px;

overflow:auto;

}

thead.sticky-top th{

position:sticky;

top:0;

z-index:100;

}

/*=========================
Badges
==========================*/

.badge{

font-size:12px;

padding:7px 12px;

border-radius:8px;

}

/*=========================
Search
==========================*/

#fieldSearch{

border-radius:10px;

padding:12px;

}

/*=========================
Footer
==========================*/

footer{

margin-top:40px;

color:#777;

font-size:13px;

}

/*=========================
Dark Mode
==========================*/

.dark-mode{

background:#111827;

color:white;

}

.dark-mode .dashboard-card{

background:#1f2937;

color:white;

}

.dark-mode .table{

color:white;

}

.dark-mode .table-hover tbody tr:hover{

background:#334155;

}

/*=========================
Animations
==========================*/

.dashboard-card{

animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.progress-bar{

animation:growBar 1.5s;

}

@keyframes growBar{

from{

width:0;

}

}

/*=========================
Print
==========================*/

@media print{

.topbar,

button,

input,

select{

display:none;

}

.dashboard-card{

box-shadow:none;

border:1px solid #ddd;

}

}