/* ============================================================
   SOPICO Petroleum — Custom Brand Theme
   Gold #E9B60F | Burgundy #C0525B | Amber #F2B81E
   ============================================================ */

:root {
    --sopico-gold: #E9B60F;
    --sopico-gold-dark: #C99A0A;
    --sopico-gold-light: #FFF8E1;
    --sopico-burgundy: #C0525B;
    --sopico-burgundy-dark: #A03E47;
    --sopico-amber: #F2B81E;
    --sopico-dark: #2D2D2D;
    --sopico-muted: #6B6B6B;
    --sopico-card-shadow: 0 4px 20px rgba(45, 45, 45, 0.08);
    --sopico-radius: 12px;

    --primary: #E9B60F;
    --primary-hover: #C99A0A;
    --primary-dark: #A67C08;
    --rgba-primary-1: rgba(233, 182, 15, 0.1);
    --rgba-primary-2: rgba(233, 182, 15, 0.2);
    --rgba-primary-3: rgba(233, 182, 15, 0.3);
    --rgba-primary-4: rgba(233, 182, 15, 0.4);
    --rgba-primary-5: rgba(233, 182, 15, 0.5);
}

/* ---- Buttons & Primary Actions ---- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--sopico-burgundy) !important;
    border-color: var(--sopico-burgundy) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--sopico-burgundy-dark) !important;
    border-color: var(--sopico-burgundy-dark) !important;
}

.btn-success {
    background-color: var(--sopico-gold) !important;
    border-color: var(--sopico-gold) !important;
    color: var(--sopico-dark) !important;
}

.btn-success:hover {
    background-color: var(--sopico-gold-dark) !important;
    border-color: var(--sopico-gold-dark) !important;
    color: #fff !important;
}

.bg-primary {
    background-color: var(--sopico-gold) !important;
}

.text-primary {
    color: var(--sopico-burgundy) !important;
}

.badge.bg-primary {
    background-color: var(--sopico-burgundy) !important;
}

/* ---- Preloader ---- */
#preloader .sk-child {
    background-color: var(--sopico-gold) !important;
}

/* ---- Sidebar ---- */
.deznav .metismenu > li > a:hover,
.deznav .metismenu > li > a:focus,
.deznav .metismenu > li.mm-active > a {
    background: var(--rgba-primary-2) !important;
    color: var(--sopico-gold-dark) !important;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus,
.deznav .metismenu ul a.mm-active {
    color: var(--sopico-burgundy) !important;
}

.deznav .metismenu > li > a .nav-text {
    font-weight: 500;
}

/* ---- Header ---- */
.header .header-info span strong {
    color: var(--sopico-burgundy);
}

.header .notification_dropdown .nav-link svg path {
    fill: var(--sopico-gold) !important;
}

/* ---- Login Page ---- */
.sopico-login-bg {
    background: linear-gradient(135deg, #E9B60F 0%, #D4A50E 50%, #C99A0A 100%);
    position: relative;
    overflow: hidden;
}

.sopico-login-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(192, 82, 91, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
    pointer-events: none;
}

.sopico-login-card {
    background: #fff;
    border-radius: var(--sopico-radius);
    box-shadow: 0 20px 60px rgba(45, 45, 45, 0.15);
    border: none;
    overflow: hidden;
}

.sopico-login-card .auth-form {
    padding: 2.5rem 2rem;
}

.sopico-login-card .form-control {
    border-radius: 8px;
    border: 1.5px solid #e8e8e8;
    padding: 0.65rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sopico-login-card .form-control:focus {
    border-color: var(--sopico-gold);
    box-shadow: 0 0 0 3px var(--rgba-primary-2);
}

.sopico-btn-login {
    background: var(--sopico-burgundy) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.15s;
}

.sopico-btn-login:hover {
    background: var(--sopico-burgundy-dark) !important;
    transform: translateY(-1px);
}

.sopico-credit-link {
    color: var(--sopico-burgundy) !important;
    font-weight: 500;
    text-decoration: none;
}

.sopico-credit-link:hover {
    color: var(--sopico-burgundy-dark) !important;
    text-decoration: underline;
}

/* ---- Dashboard Welcome Banner ---- */
.sopico-welcome {
    background: linear-gradient(135deg, var(--sopico-burgundy) 0%, #8B3A42 100%);
    border-radius: var(--sopico-radius);
    padding: 1.5rem 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: var(--sopico-card-shadow);
}

.sopico-welcome h4 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sopico-welcome:not(.sopico-welcome--compact) p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    font-size: 0.9rem;
}

.sopico-welcome .welcome-icon {
    font-size: 2.5rem;
    opacity: 0.9;
}

/* ---- Quick Actions Panel ---- */
.sopico-actions {
    background: #fff;
    border-radius: var(--sopico-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sopico-card-shadow);
    border: 1px solid rgba(233, 182, 15, 0.15);
}

.sopico-actions-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sopico-muted);
    margin-bottom: 1rem;
}

.sopico-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.2s;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.sopico-action-btn:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.sopico-action-btn i {
    font-size: 1rem;
}

.sopico-action-sales    { background: var(--sopico-burgundy); }
.sopico-action-sales:hover    { background: var(--sopico-burgundy-dark); }

.sopico-action-purchase { background: #2E86AB; }
.sopico-action-purchase:hover { background: #236B8A; }

.sopico-action-boono    { background: var(--sopico-gold-dark); color: var(--sopico-dark) !important; }
.sopico-action-boono:hover    { background: var(--sopico-gold); color: var(--sopico-dark) !important; }

.sopico-action-service  { background: #5C4B8A; }
.sopico-action-service:hover  { background: #4A3C70; }

.sopico-action-btn.active {
    box-shadow: inset 0 0 0 2px var(--rgba-primary-3);
    transform: none !important;
}

/* ---- Tank Balance Cards ---- */
.sopico-tank-card {
    border-radius: var(--sopico-radius) !important;
    border: none !important;
    box-shadow: var(--sopico-card-shadow) !important;
    overflow: hidden;
    transition: box-shadow 0.2s;
    margin-bottom: 0;
}

.sopico-tank-card:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(45, 45, 45, 0.1) !important;
}

.sopico-tank-card .card-header {
    background: linear-gradient(135deg, var(--sopico-gold) 0%, var(--sopico-amber) 100%);
    border: none;
    padding: 1rem 1.25rem;
}

.sopico-tank-card .card-title {
    color: var(--sopico-dark) !important;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sopico-tank-card .card-title::before {
    content: '\f52f';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1rem;
    opacity: 0.7;
}

.sopico-tank-card .list-group-item {
    border-color: #f0f0f0 !important;
    padding: 0.75rem 0 !important;
    font-size: 0.9rem;
}

.sopico-tank-card .list-group-item strong {
    color: var(--sopico-muted);
    font-weight: 500;
}

.sopico-tank-card .list-group-item span {
    color: var(--sopico-dark);
    font-weight: 700;
}

.sopico-tank-card .list-group-item:last-child {
    background: var(--sopico-gold-light);
    border-radius: 8px;
    padding: 0.75rem 0.75rem !important;
    margin-top: 0.25rem;
}

.sopico-tank-card .list-group-item:last-child strong {
    color: var(--sopico-burgundy);
    font-weight: 700;
}

.sopico-tank-card .list-group-item:last-child span {
    color: var(--sopico-burgundy);
    font-size: 1.25rem;
}

/* ---- Stat Widget Cards ---- */
.sopico-stat-card {
    border-radius: var(--sopico-radius) !important;
    border: none !important;
    box-shadow: var(--sopico-card-shadow) !important;
}

/* ---- Form Cards (loaded via AJAX) ---- */
.form_place .card {
    border-radius: var(--sopico-radius);
    border: none;
    box-shadow: var(--sopico-card-shadow);
}

.form_place .card-header {
    background: var(--sopico-gold-light);
    border-bottom: 2px solid var(--sopico-gold);
    font-weight: 700;
    color: var(--sopico-dark);
    border-radius: var(--sopico-radius) var(--sopico-radius) 0 0 !important;
}

/* ---- Shared Data Table Style ---- */
.ggg th,
table.sopico-table th {
    border: 1px solid var(--sopico-burgundy) !important;
    padding: 8px 10px !important;
    color: #fff !important;
    font-weight: 600 !important;
    background: var(--sopico-burgundy) !important;
    font-size: 0.85rem;
}

.ggg td,
table.sopico-table td {
    border: 1px solid #e8d5d7 !important;
    padding: 10px !important;
    color: var(--sopico-dark) !important;
    font-size: 0.875rem;
}

.ggg tbody tr:hover td,
table.sopico-table tbody tr:hover td {
    background: var(--sopico-gold-light);
}

/* ---- Form Loading Overlay ---- */
.sopico-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    flex-direction: column;
    gap: 1rem;
    color: var(--sopico-muted);
}

.sopico-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--rgba-primary-2);
    border-top-color: var(--sopico-gold);
    border-radius: 50%;
    animation: sopico-spin 0.8s linear infinite;
}

@keyframes sopico-spin {
    to { transform: rotate(360deg); }
}

/* ---- Footer ---- */
.footer {
    border-top: 1px solid #f0f0f0;
}

.footer .copyright p {
    color: var(--sopico-muted);
    font-size: 0.85rem;
}

/* ---- Save / Print buttons in forms ---- */
.btn[style*="F2B81E"],
.btn[style*="f2b81e"] {
    background: var(--sopico-amber) !important;
    border: none !important;
    color: var(--sopico-dark) !important;
    font-weight: 600;
    border-radius: 8px !important;
}

/* ---- Notification dropdown cleanup ---- */
.sopico-notif-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--sopico-muted);
}

.sopico-notif-empty i {
    font-size: 2rem;
    color: var(--sopico-gold);
    margin-bottom: 0.75rem;
    display: block;
}

.sopico-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.sopico-notif-item:last-child {
    border-bottom: none;
}

.sopico-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.sopico-notif-icon.gold   { background: var(--rgba-primary-2); color: var(--sopico-gold-dark); }
.sopico-notif-icon.burgundy { background: rgba(192, 82, 91, 0.15); color: var(--sopico-burgundy); }

/* ---- Content body spacing ---- */
.content-body > .container-fluid,
.content-body .form_place {
    padding-top: 0;
}

/* ---- Nav header logo area ---- */
.nav-header {
    border-bottom: 2px solid var(--sopico-gold);
}