/**
 * XDRIP BMS - Custom Theme
 * Glassmorphism + Brand Colors Override for AdminLTE
 *
 * @package XDRIP BMS
 * @version 1.0
 */

/* ========================================
   CSS Variables
======================================== */
:root {
    --xdrip-primary: #0271FC;
    --xdrip-primary-dark: #0258c7;
    --xdrip-navy: #012551;
    --xdrip-dark: #141414;
    --xdrip-darker: #0a0a0a;
    --xdrip-light: #f8f9fa;
    --xdrip-text: #e9ecef;
    --xdrip-text-muted: rgba(255, 255, 255, 0.6);
    --xdrip-border: rgba(255, 255, 255, 0.1);
    --xdrip-card-bg: rgba(20, 20, 20, 0.8);
    --xdrip-glass-bg: rgba(255, 255, 255, 0.05);
    --xdrip-glass-border: rgba(255, 255, 255, 0.1);
    --xdrip-success: #28a745;
    --xdrip-warning: #ffc107;
    --xdrip-danger: #dc3545;
    --xdrip-info: #17a2b8;
}

/* ========================================
   Typography
======================================== */
body {
    font-family: var(--xdrip-font-body, 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif);
    background-color: var(--xdrip-darker);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--xdrip-font-heading, 'Saira', sans-serif);
    font-weight: 600;
}

/* ========================================
   Dark Mode Base
======================================== */
.dark-mode {
    background-color: var(--xdrip-darker);
}

.dark-mode .content-wrapper {
    background: linear-gradient(180deg, var(--xdrip-dark) 0%, var(--xdrip-darker) 100%);
}

.dark-mode .main-footer {
    background-color: var(--xdrip-dark);
    border-top: 1px solid var(--xdrip-border);
    color: var(--xdrip-text-muted);
}

.dark-mode .main-footer a {
    color: var(--xdrip-primary);
}

/* ========================================
   Navbar
======================================== */
.dark-mode .main-header {
    background: var(--xdrip-dark);
    border-bottom: 1px solid var(--xdrip-border);
}

.dark-mode .main-header .nav-link {
    color: var(--xdrip-text);
}

.dark-mode .main-header .nav-link:hover {
    color: var(--xdrip-primary);
}

/* ========================================
   Sidebar
======================================== */
.dark-mode .main-sidebar {
    background: linear-gradient(180deg, var(--xdrip-navy) 0%, var(--xdrip-dark) 100%);
}

.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, var(--xdrip-primary), var(--xdrip-primary-dark));
    box-shadow: 0 4px 15px rgba(2, 113, 252, 0.4);
    border-radius: 8px;
    margin: 0 8px;
}

.dark-mode .sidebar-dark-primary .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    margin: 2px 8px;
    transition: all 0.3s ease;
}

.dark-mode .sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background: var(--xdrip-glass-bg);
    color: #fff;
}

.dark-mode .nav-header {
    color: var(--xdrip-primary);
    font-family: 'Saira', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px 15px 5px;
}

.brand-link {
    border-bottom: 1px solid var(--xdrip-border) !important;
    padding: 15px !important;
}

.brand-text {
    font-family: 'Saira', sans-serif !important;
    font-size: 1.5rem !important;
}

/* User Panel */
.user-panel {
    border-bottom: 1px solid var(--xdrip-border) !important;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-family: 'Saira', sans-serif;
}

/* ========================================
   Cards - Glassmorphism
======================================== */
.dark-mode .card {
    background: var(--xdrip-card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--xdrip-glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark-mode .card-header {
    background: transparent;
    border-bottom: 1px solid var(--xdrip-border);
}

.dark-mode .card-title {
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    color: var(--xdrip-text);
}

.dark-mode .card-footer {
    background: transparent;
    border-top: 1px solid var(--xdrip-border);
}

/* Small Box Widgets */
.dark-mode .small-box {
    background: var(--xdrip-card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--xdrip-glass-border);
    border-radius: 12px;
    overflow: hidden;
}

.dark-mode .small-box.bg-primary {
    background: linear-gradient(135deg, var(--xdrip-primary), var(--xdrip-navy)) !important;
}

.dark-mode .small-box.bg-success {
    background: linear-gradient(135deg, var(--xdrip-success), #1e7e34) !important;
}

.dark-mode .small-box.bg-warning {
    background: linear-gradient(135deg, var(--xdrip-warning), #d39e00) !important;
}

.dark-mode .small-box.bg-danger {
    background: linear-gradient(135deg, var(--xdrip-danger), #bd2130) !important;
}

.dark-mode .small-box.bg-info {
    background: linear-gradient(135deg, var(--xdrip-info), #117a8b) !important;
}

.dark-mode .small-box .icon {
    color: rgba(255, 255, 255, 0.2);
}

.dark-mode .small-box .small-box-footer {
    background: rgba(0, 0, 0, 0.2);
}

/* ========================================
   Forms
======================================== */
.dark-mode .form-control {
    background-color: var(--xdrip-glass-bg);
    border: 1px solid var(--xdrip-glass-border);
    color: var(--xdrip-text);
    border-radius: 8px;
}

.dark-mode .form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--xdrip-primary);
    box-shadow: 0 0 0 3px rgba(2, 113, 252, 0.2);
    color: #fff;
}

.dark-mode .form-control::placeholder {
    color: var(--xdrip-text-muted);
}

.dark-mode .input-group-text {
    background-color: var(--xdrip-glass-bg);
    border: 1px solid var(--xdrip-glass-border);
    color: var(--xdrip-text-muted);
}

.dark-mode .custom-select {
    background-color: var(--xdrip-glass-bg);
    border: 1px solid var(--xdrip-glass-border);
    color: var(--xdrip-text);
}

.dark-mode label {
    color: var(--xdrip-text);
}

/* ========================================
   Buttons
======================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--xdrip-primary), var(--xdrip-primary-dark));
    border: none;
    border-radius: 8px;
    font-family: 'Saira', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--xdrip-primary-dark), var(--xdrip-primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2, 113, 252, 0.4);
}

.btn-outline-primary {
    border-color: var(--xdrip-primary);
    color: var(--xdrip-primary);
}

.btn-outline-primary:hover {
    background: var(--xdrip-primary);
    border-color: var(--xdrip-primary);
}

/* ========================================
   Tables
======================================== */
.dark-mode .table {
    color: var(--xdrip-text);
}

.dark-mode .table thead th {
    border-bottom: 2px solid var(--xdrip-border);
    color: var(--xdrip-text-muted);
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.dark-mode .table td,
.dark-mode .table th {
    border-top: 1px solid var(--xdrip-border);
}

.dark-mode .table-hover tbody tr:hover {
    background-color: var(--xdrip-glass-bg);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ========================================
   Badges & Labels
======================================== */
.badge {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border-radius: 6px;
    padding: 5px 10px;
}

.badge-primary {
    background: var(--xdrip-primary);
}

.badge-success {
    background: var(--xdrip-success);
}

.badge-warning {
    background: var(--xdrip-warning);
    color: #000;
}

.badge-danger {
    background: var(--xdrip-danger);
}

.badge-info {
    background: var(--xdrip-info);
}

/* Priority Badges */
.priority-low { background: var(--xdrip-success); }
.priority-medium { background: var(--xdrip-info); }
.priority-high { background: var(--xdrip-warning); color: #000; }
.priority-urgent { background: var(--xdrip-danger); }

/* ========================================
   Alerts
======================================== */
.dark-mode .alert {
    border: none;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.dark-mode .alert-success {
    background: rgba(40, 167, 69, 0.2);
    color: #5dd879;
}

.dark-mode .alert-danger {
    background: rgba(220, 53, 69, 0.2);
    color: #ff6b7a;
}

.dark-mode .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd557;
}

.dark-mode .alert-info {
    background: rgba(23, 162, 184, 0.2);
    color: #5dd8eb;
}

/* ========================================
   Dropdowns
======================================== */
.dark-mode .dropdown-menu {
    background: var(--xdrip-dark);
    border: 1px solid var(--xdrip-border);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .dropdown-item {
    color: var(--xdrip-text);
}

.dark-mode .dropdown-item:hover {
    background: var(--xdrip-glass-bg);
    color: var(--xdrip-primary);
}

.dark-mode .dropdown-divider {
    border-color: var(--xdrip-border);
}

.dark-mode .dropdown-header {
    color: var(--xdrip-text-muted);
    font-family: 'Saira', sans-serif;
}

/* ========================================
   Modals
======================================== */
.dark-mode .modal-content {
    background: var(--xdrip-dark);
    border: 1px solid var(--xdrip-border);
    border-radius: 16px;
}

.dark-mode .modal-header {
    border-bottom: 1px solid var(--xdrip-border);
}

.dark-mode .modal-footer {
    border-top: 1px solid var(--xdrip-border);
}

.dark-mode .modal-title {
    font-family: 'Saira', sans-serif;
}

.dark-mode .close {
    color: var(--xdrip-text);
}

/* ========================================
   Content Header
======================================== */
.dark-mode .content-header h1 {
    font-family: 'Saira', sans-serif;
    color: var(--xdrip-text);
}

.dark-mode .breadcrumb {
    background: transparent;
}

.dark-mode .breadcrumb-item a {
    color: var(--xdrip-primary);
}

.dark-mode .breadcrumb-item.active {
    color: var(--xdrip-text-muted);
}

/* ========================================
   Notes Specific
======================================== */
.note-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.note-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.note-card.completed {
    opacity: 0.6;
}

.note-card.completed .card-title {
    text-decoration: line-through;
}

.note-priority-indicator {
    width: 4px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 12px 0 0 12px;
}

.deadline-badge {
    font-size: 0.75rem;
}

.deadline-overdue {
    color: var(--xdrip-danger);
}

.deadline-soon {
    color: var(--xdrip-warning);
}

/* ========================================
   Utilities
======================================== */
.text-primary { color: var(--xdrip-primary) !important; }
.bg-primary { background-color: var(--xdrip-primary) !important; }
.border-primary { border-color: var(--xdrip-primary) !important; }

.glass-card {
    background: var(--xdrip-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--xdrip-glass-border);
    border-radius: 12px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--xdrip-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--xdrip-glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--xdrip-primary);
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
    .brand-text {
        font-size: 1.2rem !important;
    }

    .small-box {
        margin-bottom: 15px;
    }

    .card {
        margin-bottom: 15px;
    }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

/* Flash message animation */
.flash-message .alert {
    animation: fadeIn 0.3s ease;
}