/* ===== VARIABLES ===== */
:root {
    --main-accent: #FD4719;
    --dark-blue: #0C1B4D;
    --white: #FFFFFF;
    --hover-accent: #FF6A3C;
    --success-green: #00B67A;
}

/* ===== BODY ===== */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--white);
    color: var(--dark-blue);
}

/* ===== NAVBAR ===== */
.navbar, .top-nav {
    background: var(--dark-blue) !important;
}
.navbar a, .top-nav a {
    color: var(--white);
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s;
}
.navbar a:hover, .top-nav a:hover {
    color: var(--main-accent) !important;
    background-color: var(--dark-blue) !important;
}

/* ===== DASHBOARD SECTIONS ===== */
.section, .panel, .card {
    background-color: var(--dark-blue) !important;
    color: var(--white) !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: 0.3s;
}
.panel:hover, .card:hover {
    transform: translateY(-3px);
    border-top: 4px solid var(--main-accent);
}

/* ===== TABLES ===== */
.table thead {
    background: var(--main-accent) !important;
    color: var(--white) !important;
    font-weight: bold;
}
.table tbody tr:hover {
    background-color: var(--dark-blue) !important;
    color: var(--white) !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background-color: var(--main-accent) !important;
    border-color: var(--main-accent) !important;
    border-radius: 8px;
}
.btn-primary:hover {
    background-color: var(--hover-accent) !important;
    border-color: var(--hover-accent) !important;
}

/* ===== FORMS ===== */
.logincontainer, .login-box {
    background-color: var(--white);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 30px;
    max-width: 400px;
    margin: 80px auto;
    text-align: center;
}

/* ===== LINKS ===== */
a {
    color: var(--main-accent);
    transition: 0.3s;
}
a:hover {
    color: var(--hover-accent);
    text-decoration: none;
}

/* ===== FOOTER ===== */
footer, .footer {
    background-color: var(--dark-blue) !important;
    color: var(--white) !important;
    text-align: center;
    padding: 25px 0;
}
footer a, .footer a {
    color: var(--main-accent) !important;
}
footer a:hover, .footer a:hover {
    color: var(--hover-accent) !important;
}
footer p, .footer p, footer span, .footer span {
    color: var(--white) !important;
}

/* ===== BADGES ===== */
.badge-success { background-color: var(--success-green); color: var(--white); }
.badge-info { background-color: var(--main-accent); color: var(--white); }

/* ===== RESPONSIVE ===== */
@media only screen and (max-width:640px){
    h1,h2,h3,h4{line-height:100%!important}
    #templateContainer{max-width:600px!important;width:100%!important}
    #templateContainer,body{width:100%!important}
    a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:none!important}
    body{min-width:100%!important}
    #bodyCell{padding:10px!important}
    h1{font-size:24px!important}
    h2{font-size:20px!important}
    h3{font-size:18px!important}
    h4{font-size:16px!important}
}