/*
=========================================================
EXAM-GATE ENTERPRISE
---------------------------------------------------------
File:
assets/css/examgate.css

Version:
3.0.0

Description:
Global Enterprise Stylesheet

Compatible:
JSON Edition
MySQL Edition

Author:
Zamex Link Limited

=========================================================
*/

/*=======================================================
ROOT COLORS
=======================================================*/

:root{

--primary:#0B5D3B;

--secondary:#008751;

--accent:#A52A2A;

--background:#F4F6F9;

--white:#FFFFFF;

--black:#222222;

--grey:#666666;

--border:#DDDDDD;

--success:#0A8F4D;

--danger:#C62828;

--warning:#FF9800;

--info:#1565C0;

--shadow:0 10px 25px rgba(0,0,0,.12);

--radius:18px;

}

/*=======================================================
RESET
=======================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/*=======================================================
BODY
=======================================================*/

body{

background:var(--background);

font-family:

Arial,
Helvetica,
sans-serif;

font-size:16px;

color:var(--black);

line-height:1.6;

}

/*=======================================================
LINKS
=======================================================*/

a{

text-decoration:none;

transition:.30s;

}

/*=======================================================
IMAGES
=======================================================*/

img{

max-width:100%;

height:auto;

display:block;

}

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

.container{

width:95%;

max-width:1500px;

margin:auto;

padding:25px;

}

/*=======================================================
PAGE WRAPPER
=======================================================*/

.wrapper{

width:100%;

min-height:100vh;

}

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

.header{

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

padding:30px;

color:white;

text-align:center;

box-shadow:var(--shadow);

border-radius:

0 0 30px 30px;

}

.header h1{

font-size:34px;

letter-spacing:1px;

}

.header p{

margin-top:8px;

font-size:18px;

}

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

.page-title{

font-size:30px;

font-weight:bold;

color:var(--primary);

margin-bottom:20px;

}

/*=======================================================
SUBTITLE
=======================================================*/

.subtitle{

color:var(--grey);

margin-top:8px;

}

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

.card{

background:white;

border-radius:var(--radius);

padding:25px;

box-shadow:var(--shadow);

border-left:

8px solid

var(--accent);

margin-bottom:25px;

transition:.30s;

}

.card:hover{

transform:

translateY(-3px);

}

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

.card-title{

font-size:22px;

font-weight:bold;

color:var(--primary);

margin-bottom:15px;

}

/*=======================================================
GRID
=======================================================*/

.grid{

display:grid;

gap:20px;

}

.grid-2{

grid-template-columns:

repeat(

auto-fit,

minmax(350px,1fr)

);

}

.grid-3{

grid-template-columns:

repeat(

auto-fit,

minmax(280px,1fr)

);

}

.grid-4{

grid-template-columns:

repeat(

auto-fit,

minmax(220px,1fr)

);

}






/*=======================================================
ENTERPRISE BUTTONS
=======================================================*/

.btn{

display:inline-block;

padding:14px 28px;

border:none;

border-radius:12px;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.30s;

text-align:center;

text-decoration:none;

box-shadow:var(--shadow);

}

.btn:hover{

transform:translateY(-3px);

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:#09482f;

}

.btn-success{

background:var(--success);

color:white;

}

.btn-success:hover{

background:#08753f;

}

.btn-danger{

background:var(--danger);

color:white;

}

.btn-danger:hover{

background:#b71c1c;

}

.btn-warning{

background:var(--warning);

color:white;

}

.btn-warning:hover{

background:#ef6c00;

}

.btn-info{

background:var(--info);

color:white;

}

.btn-info:hover{

background:#0d47a1;

}

.btn-secondary{

background:#555;

color:white;

}

.btn-secondary:hover{

background:#333;

}

/*=======================================================
FORM ELEMENTS
=======================================================*/

.form-group{

margin-bottom:22px;

}

label{

display:block;

margin-bottom:8px;

font-weight:bold;

color:var(--primary);

}

input,
select,
textarea{

width:100%;

padding:14px;

font-size:16px;

border:2px solid #cccccc;

border-radius:12px;

background:white;

transition:.30s;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--secondary);

outline:none;

box-shadow:

0 0 10px

rgba(0,135,81,.20);

}

textarea{

resize:vertical;

min-height:140px;

}

/*=======================================================
CHECKBOX
=======================================================*/

.checkbox{

display:flex;

align-items:center;

gap:10px;

margin-top:10px;

}

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

.table{

width:100%;

border-collapse:collapse;

background:white;

box-shadow:var(--shadow);

border-radius:var(--radius);

overflow:hidden;

}

.table thead{

background:var(--primary);

color:white;

}

.table th{

padding:18px;

text-align:left;

}

.table td{

padding:16px;

border-bottom:1px solid #eeeeee;

}

.table tr:hover{

background:#f8f8f8;

}

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

.badge{

display:inline-block;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:bold;

color:white;

}

.badge-success{

background:var(--success);

}

.badge-warning{

background:var(--warning);

}

.badge-danger{

background:var(--danger);

}

.badge-info{

background:var(--info);

}

.badge-secondary{

background:#666666;

}

/*=======================================================
STATISTICS CARDS
=======================================================*/

.stat-card{

background:white;

padding:25px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

border-top:

8px solid

var(--primary);

transition:.30s;

}

.stat-card:hover{

transform:translateY(-5px);

}

.stat-number{

font-size:42px;

font-weight:bold;

color:var(--primary);

margin-top:10px;

}

.stat-title{

font-size:18px;

margin-top:12px;

font-weight:bold;

}

/*=======================================================
PROGRESS BAR
=======================================================*/

.progress{

height:28px;

background:#dddddd;

border-radius:30px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:

linear-gradient(

90deg,

var(--secondary),

var(--primary)

);

width:0%;

transition:width .60s;

}

/*=======================================================
COUNTDOWN TIMER
=======================================================*/

.countdown-box{

background:#ffffff;

text-align:center;

font-size:30px;

font-weight:bold;

padding:12px;

color:green;

border-color:#A52A2A;

border-style:solid;

border-width:7px;

border-radius:30px;

width:40%;

max-width:220px;

margin:auto;

box-shadow:var(--shadow);

}

.countdown-title{

font-size:18px;

margin-bottom:8px;

color:var(--primary);

}

/*=======================================================
SUCCESS MESSAGE
=======================================================*/

.message-success{

background:#e8fff2;

border-left:8px solid var(--success);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

.message-success h2{

color:var(--success);

margin-bottom:15px;

}

/*=======================================================
ERROR MESSAGE
=======================================================*/

.message-error{

background:#fff1f1;

border-left:8px solid var(--danger);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

.message-error h2{

color:var(--danger);

margin-bottom:15px;

}

/*=======================================================
WARNING MESSAGE
=======================================================*/

.message-warning{

background:#fff9eb;

border-left:8px solid var(--warning);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

/*=======================================================
INFO MESSAGE
=======================================================*/

.message-info{

background:#eef6ff;

border-left:8px solid var(--info);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}










/*=======================================================
DASHBOARD TILES
=======================================================*/

.dashboard-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;

margin:25px 0;

}

.dashboard-tile{

background:#ffffff;

border-radius:20px;

padding:25px;

box-shadow:var(--shadow);

border-top:8px solid var(--secondary);

transition:.30s;

cursor:pointer;

}

.dashboard-tile:hover{

transform:translateY(-6px);

}

.dashboard-icon{

font-size:42px;

margin-bottom:12px;

}

.dashboard-value{

font-size:38px;

font-weight:bold;

color:var(--primary);

}

.dashboard-title{

font-size:18px;

margin-top:8px;

font-weight:bold;

color:#444;

}

/*=======================================================
QUICK ACTION CARDS
=======================================================*/

.action-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:30px;

}

.action-card{

background:#fff;

border-radius:18px;

padding:22px;

text-align:center;

border:3px solid var(--accent);

box-shadow:var(--shadow);

transition:.30s;

cursor:pointer;

}

.action-card:hover{

background:var(--primary);

color:#fff;

transform:scale(1.03);

}

/*=======================================================
QUESTION BUILDER LAYOUT
=======================================================*/

.builder-layout{

display:grid;

grid-template-columns:
260px 1fr 260px;

gap:25px;

margin-top:25px;

}

.left-panel,
.center-panel,
.right-panel{

background:#fff;

border-radius:20px;

padding:20px;

box-shadow:var(--shadow);

}

/*=======================================================
QUESTION NAVIGATOR
=======================================================*/

.question-list{

max-height:650px;

overflow-y:auto;

}

.question-item{

padding:12px;

margin-bottom:8px;

border-radius:10px;

font-weight:bold;

cursor:pointer;

transition:.25s;

border:2px solid transparent;

}

.question-item:hover{

background:#eef7f2;

border-color:var(--secondary);

}

.question-complete{

background:#e8fff2;

color:#0b5d3b;

}

.question-draft{

background:#fff8e5;

color:#b36b00;

}

.question-empty{

background:#f5f5f5;

color:#666;

}

/*=======================================================
STICKY ACTION PANEL
=======================================================*/

.sticky{

position:sticky;

top:20px;

}

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

.login-wrapper{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:20px;

}

.login-card{

width:100%;

max-width:500px;

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

border-top:10px solid var(--primary);

}

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

.footer{

margin-top:40px;

padding:25px;

text-align:center;

color:#fff;

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

border-radius:20px 20px 0 0;

box-shadow:var(--shadow);

}

.footer p{

margin:8px 0;

}

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

@media(max-width:1100px){

.builder-layout{

grid-template-columns:1fr;

}

.left-panel,
.center-panel,
.right-panel{

width:100%;

}

}

@media(max-width:768px){

.container{

width:98%;

padding:15px;

}

.header h1{

font-size:26px;

}

.page-title{

font-size:24px;

}

.dashboard-value{

font-size:30px;

}

.stat-number{

font-size:30px;

}

.countdown-box{

width:90%;

max-width:320px;

font-size:24px;

}

.btn{

display:block;

width:100%;

margin-bottom:12px;

}

.table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

@media(max-width:480px){

.header{

padding:20px;

}

.card{

padding:18px;

}

.login-card{

padding:25px;

}

}

/*=======================================================
PRINT STYLES
=======================================================*/

@media print{

body{

background:#fff;

}

.header,
.footer,
.btn{

display:none;

}

.card{

box-shadow:none;

border:1px solid #000;

}

.table{

box-shadow:none;

}

}