@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Brand colors from the Daerat theme image */
:root {
    --primary-green: #004d34;
    --dark-green: #002b1d;
    --accent-gold: #d5b887;
    --light-beige: #ddcca3; /* Page background color from the image */
}

/* Global Font Override */
body, .pcoded-navbar, .pcoded-header, .card, .table, button, input, select, textarea, label, span, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
}

/* Page Background */
body, .pcoded-main-container {
    background-color: var(--light-beige) !important;
}

/* Header Navbar Overrides */
.pcoded-header, .pcoded-header.header-dark, .pcoded-header.navbar-light {
    background: var(--primary-green) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pcoded-header a, .pcoded-header span, .pcoded-header i {
    color: #ffffff !important;
}

.pcoded-header .b-brand .b-title {
    color: #ffffff !important;
}

/* Sidebar Navigation Overrides */
.pcoded-navbar {
    background: var(--primary-green) !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar Logo/Brand section */
.pcoded-navbar .navbar-brand {
    background: var(--primary-green) !important;
}

.pcoded-navbar .main-menu-header {
    background: #3f4d67 !important; /* User details panel background from image */
    padding: 15px !important;
}

.pcoded-navbar .main-menu-header .user-details span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.pcoded-navbar .main-menu-header .user-details #more-details {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Navigation label ("Navigation") */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption label {
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Navigation items */
.pcoded-navbar .pcoded-inner-navbar li a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Navigation item hover */
.pcoded-navbar .pcoded-inner-navbar li:hover > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Navigation active item */
.pcoded-navbar .pcoded-inner-navbar li.active {
    background: var(--accent-gold) !important;
    border-radius: 4px !important;
    margin: 2px 10px !important;
}

.pcoded-navbar .pcoded-inner-navbar li.active > a {
    background: transparent !important;
    color: #1a202c !important; /* Dark text on active gold item */
    font-weight: 700 !important;
}

/* In active items inside active menu item, set their icons to dark text too */
.pcoded-navbar .pcoded-inner-navbar li.active > a .pcoded-micon i {
    color: #1a202c !important;
}

/* Card layout overrides for Flat Able template */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    margin-bottom: 25px !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 25px !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.card-header h3, 
.card-header h4, 
.card-header h5,
.card-header .card-title {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    display: flex !important;
    align-items: center !important;
}

.card-header h3 i,
.card-header h4 i,
.card-header h5 i,
.card-header .card-title i {
    margin-right: 8px !important;
}

.card-tools {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Table styling updates */
.table {
    width: 100% !important;
    margin-bottom: 1rem !important;
    color: #2d3748 !important;
}

.table thead th,
.table th {
    background-color: #f8fafc !important;
    color: #4a5568 !important;
    border-bottom: 2px solid #edf2f7 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.82rem !important;
    padding: 14px 16px !important;
    letter-spacing: 0.5px !important;
}

.table td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid #edf2f7 !important;
    font-size: 0.92rem !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(40, 167, 69, 0.02) !important;
}

/* General Buttons */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
}

.btn i {
    margin-right: 0 !important; /* Managed by gap */
    font-size: 0.95em !important;
}

/* Button Gradients & Shadows */
.btn-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(78, 115, 223, 0.18) !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(78, 115, 223, 0.28) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(28, 200, 138, 0.18) !important;
}

.btn-success:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(28, 200, 138, 0.28) !important;
    color: #fff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(231, 74, 59, 0.18) !important;
}

.btn-danger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(231, 74, 59, 0.28) !important;
    color: #fff !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(246, 194, 62, 0.18) !important;
}

.btn-warning:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(246, 194, 62, 0.28) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #e2e8f0 !important;
    border: none !important;
    color: #4a5568 !important;
}

.btn-secondary:hover {
    background-color: #cbd5e1 !important;
    color: #1a202c !important;
}

/* Small-box (AdminLTE widget cards) mapping to modern gradient widgets */
.small-box {
    border-radius: 12px !important;
    position: relative !important;
    display: block !important;
    margin-bottom: 25px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    color: #fff !important;
    padding: 25px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.small-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.small-box .inner {
    padding: 0 !important;
}

.small-box .inner h3 {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    white-space: nowrap !important;
    color: #fff !important;
}

.small-box .inner p {
    font-size: 0.95rem !important;
    margin: 0 !important;
    opacity: 0.9 !important;
}

.small-box .icon {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 0 !important;
    font-size: 65px !important;
    color: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.small-box:hover .icon {
    transform: scale(1.1) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Small box colors mapped to modern dashboard gradients */
.small-box.bg-info {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%) !important;
}

.small-box.bg-danger {
    background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%) !important;
}

/* Report stats cards layout styling */
.card.bg-success,
.card.bg-danger,
.card.bg-primary {
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

.card.bg-success .card-body,
.card.bg-danger .card-body,
.card.bg-primary .card-body {
    padding: 25px !important;
}

.card.bg-success h5,
.card.bg-danger h5,
.card.bg-primary h5 {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.card.bg-success h3,
.card.bg-danger h3,
.card.bg-primary h3 {
    color: #fff !important;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Badges Capsule Look */
.badge {
    border-radius: 30px !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.badge.bg-success {
    background-color: #1cc88a !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: #e74a3b !important;
    color: #fff !important;
}

.badge.bg-warning {
    background-color: #f6c23e !important;
    color: #212529 !important;
}

.badge.bg-info {
    background-color: #36b9cc !important;
    color: #fff !important;
}

/* Input group alignment fixes */
.form-group label {
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

.form-control {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    height: auto !important;
    font-size: 0.95rem !important;
    background-color: #f8fafc !important;
    transition: all 0.2s ease-in-out !important;
}

.form-control:focus {
    background-color: #fff !important;
    border-color: #4e73df !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15) !important;
}

/* Sticky footer styling */
.pcoded-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 56px) !important;
}

/* Global Table Responsiveness */
.card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Profile Dropdown UI & Color Fixes */

/* 1. Global Reset for header dropdown menu contents (overrides the white color force) */
.pcoded-header .dropdown-menu a,
.pcoded-header .dropdown-menu span,
.pcoded-header .dropdown-menu i {
    color: #4a5568 !important; /* Set text and icons to dark gray */
}

/* 2. Dropdown Container Styling */
.pcoded-header .dropdown-menu.profile-notification {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    min-width: 280px !important;
    margin-top: 8px !important;
}

/* 3. Dropdown Header (User Info) */
.pcoded-header .dropdown-menu.profile-notification .pro-head {
    background: var(--primary-green) !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-head img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    margin-right: 12px !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-head span {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

/* 4. Dropdown Header Logout Icon */
.pcoded-header .dropdown-menu.profile-notification .pro-head .dud-logout {
    color: #ffffff !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1rem !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-head .dud-logout:hover {
    opacity: 1 !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-head .dud-logout i {
    color: #ffffff !important;
}

/* 5. Dropdown Body (Links list) */
.pcoded-header .dropdown-menu.profile-notification .pro-body {
    padding: 8px 0 !important;
    background-color: #ffffff !important;
    list-style: none !important;
    margin: 0 !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-body li {
    margin: 0 !important;
    padding: 0 !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-body li a {
    color: #4a5568 !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    background-color: transparent !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-body li a i {
    color: #718096 !important;
    margin-right: 12px !important;
    font-size: 1rem !important;
    transition: color 0.2s ease !important;
}

/* 6. Hover State for Body Links */
.pcoded-header .dropdown-menu.profile-notification .pro-body li a:hover {
    background-color: rgba(0, 77, 52, 0.05) !important; /* Soft brand-green background */
    color: var(--primary-green) !important;
}

.pcoded-header .dropdown-menu.profile-notification .pro-body li a:hover i {
    color: var(--primary-green) !important;
}