/* Duratray - Refined Clean Theme CSS */

/* =================================
   BRAND TYPOGRAPHY - FONT DECLARATIONS
   ================================= */

/* Sansation Font Family */
/* Sansation Font Family (TTF) */
@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Helvetica Neue Font Family (OTF) */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/helvetica-neue/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/helvetica-neue/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/helvetica-neue/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =================================
   CSS VARIABLES FOR CLEAN THEME
   ================================= */
:root {
    /* Primary Brand Colors - Clean approach with strategic gold accent */
    --primary-color: #FDB913;  /* Updated to requested gold */
    --primary-gradient: linear-gradient(135deg, #FDB913 0%, #FDB913 100%);
    --primary-gradient-hover: linear-gradient(135deg, #FDB913 0%, #FDB913 100%);
    --primary-dark: #CC8400;
    --primary-light: rgba(245, 168, 0, 0.1);
    
    /* Clean, minimal color palette */
    --white: #ffffff;
    --off-white: #fefefe;
    --light-gray: #7f7f7f;
    --border-gray: #c9c6c6;
    --text-gray: #000000;
    --text-dark: #000000;
    --black: #000000;
    --green:#157423;
    
    /* Status Colors - Muted for cleaner look */
    --success-color: #FDB913;
    --danger-color: #FDB913;
    --warning-color: #FDB913;
    --info-color: #FDB913;
    
    /* Subtle backgrounds for status */
    --success-bg: #fdbb130a;
    --danger-bg: #fdbb130a;
    --warning-bg: #fdbb130a;
    --info-bg: #fdbb130a;
    
    /* Clean shadows - very subtle */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    
    /* Border Radius - Clean, modern */
    --border-radius: 8px;
    --border-radius-small: 4px;
    --border-radius-large: 12px;
    
    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-medium: all 0.25s ease;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
}

/* =================================
   GLOBAL STYLES - CLEAN BASE WITH BRAND TYPOGRAPHY
   ================================= */
body {
    font-family: 'Sansation', 'Helvetica Neue'   !important;
    background: var(--white);
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 16px;
}

/* Clean page backgrounds */
.auth-page, .admin-page {
    background: var(--white);
    min-height: 100vh;
}

/* =================================
   BRAND TYPOGRAPHY - DURATRAY HIERARCHY
   ================================= */

/* Primary Headings - Sansation Bold */
h1, .page-title, .primary-heading {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--primary-color);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

/* Secondary Headings - Helvetica Neue Bold */
h2, .secondary-heading {
    font-family: 'Helvetica Neue', 'Sansation'  ;
    color: var(--text-dark);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

/* Standard Headings - Mixed hierarchy */
h3, h4 {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--text-dark);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
}

h5, h6 {
    font-family: 'Helvetica Neue', 'Sansation'  ;
    color: var(--text-dark);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
}

/* Primary Body Copy - Sansation Regular */
p, .body-primary {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Secondary Body Copy - Sansation Light & Helvetica variants */
.body-secondary, .text-light {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    font-weight: 300;
    color: var(--text-gray);
    line-height: 1.6;
}

.body-helvetica {
    font-family: 'Helvetica Neue', 'Sansation'  ;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.6;
}

.body-helvetica-light {
    font-family: 'Helvetica Neue', 'Sansation'  ;
    font-weight: 300;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Form elements and labels - Sansation */
div, label, span {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--text-dark);
}

/* Utility text classes */
.text-muted {
    color: var(--text-gray) !important;
    font-weight: 300;
}

/* =================================
   CLEAN CARD COMPONENTS
   ================================= */
.auth-card {
    background: var(--white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-gray);
    overflow: hidden;
    max-width: 800px; /* Increased for better form layout */
    margin: 2rem auto; /* Changed from absolute positioning */
    position: relative; /* Changed from absolute */
    top: auto; /* Reset absolute positioning */
    left: auto; /* Reset absolute positioning */
    transform: none; /* Reset transform */
    width: 100%; /* Full width within container */
}
body.auth-page {
    background: var(--white);
    min-height: 100vh;
    padding: 1rem 0; /* Reduced padding for mobile */
    overflow-x: hidden; /* Prevent horizontal scroll */
}
.auth-header {
    background: var(--white);
    color: var(--text-dark);
    padding: var(--spacing-xl);
    text-align: center;
    border-bottom: 2px solid var(--border-gray);
}

.auth-header h3 {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-weight: 400;
}

.auth-header p {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--text-gray);
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 300;
}

/* Clean Stats Cards */
.stats-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius);
    transition: var(--transition-medium);
    box-shadow: var(--shadow-subtle);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--primary-color);
    transition: var(--transition-fast);
}

.stats-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.stats-card:hover::before {
    width: 4px;
}

/* Status variants with subtle colors */
.stats-card.success::before { background: var(--success-color); }
.stats-card.info::before { background: var(--info-color); }
.stats-card.warning::before { background: var(--warning-color); }
.stats-card.danger::before { background: var(--danger-color); }

/* =================================
   CLEAN BUTTON STYLES - BRAND TYPOGRAPHY
   ================================= */
.btn {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    border-radius: var(--border-radius-small);
    font-weight: 500;
    transition: var(--transition-fast);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--black);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
    color: var(--black);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--success-color);
    color: var(--white);
}

.btn-success:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    color: var(--white);
}

.btn-danger {
    background: var(--danger-color);
    color: var(--white);
}

.btn-danger:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    color: var(--white);
}

/* Clean secondary buttons */
.btn-secondary, .btn-light {
    background: var(--light-gray);
    color: var(--text-dark);
    border: 1px solid var(--border-gray);
}

.btn-secondary:hover, .btn-light:hover {
    background: var(--border-gray);
    color: var(--text-dark);
    transform: translateY(-1px);
}

/* =================================
   CLEAN FORM ELEMENTS - BRAND TYPOGRAPHY
   ================================= */
.form-control {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--border-gray);
    transition: var(--transition-fast);
    background: var(--white);
    color: var(--text-dark);
    padding: 0.5rem 0.75rem;
    font-weight: 400;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(245, 168, 0, 0.15);
    outline: none;
}

.form-label {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* =================================
   CLEAN ALERTS - BRAND TYPOGRAPHY
   ================================= */
.alert {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    border-radius: var(--border-radius);
    border: 1px solid;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
    font-weight: 400;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-color);
    border-color: rgba(25, 135, 84, 0.2);
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger-color);
    border-color: rgba(220, 53, 69, 0.2);
}

.alert-warning {
    background: #ffb81227;
    color: #000000;
    border-color: rgba(253, 126, 20, 0.2);
}

.alert-info {
    background: var(--info-bg);
    color: #fdbb13;
    border-color: rgba(13, 202, 240, 0.2);
}

/* =================================
   CLEAN SIDEBAR - WHITE BACKGROUND
   ================================= */


.sidebar-header {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-gray);
    flex-shrink: 0;
    background: var(s);
}

.sidebar-header h4 {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    font-size: 1.25rem;
}

.sidebar-header p {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--text-gray);
    font-size: 0.85rem;
    margin: 0;
    font-weight: 300;
}

/* Clean navigation */
.sidebar .nav-link {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--text-dark);
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius-small);
    margin: 0.125rem 0.75rem;
    transition: var(--transition-fast);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.sidebar .nav-link:hover {
    background: rgba(245, 168, 0, 0.08);
    color: var(--primary-color);
    transform: translateX(3px);
}

.sidebar .nav-link.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 18px;
    margin-right: var(--spacing-sm);
    font-size: 0.9rem;
}

/* Navigation list */
.sidebar .nav.flex-column.mb-auto {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) 0;
}

/* Clean sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-gray);
    flex-shrink: 0;
}

.sidebar-footer .nav-link {
    color: var(--text-dark) !important;
    text-align: center;
    font-weight: 500;
    padding: var(--spacing-md);
    margin: 0;
    border-radius: var(--border-radius);
    background: var(--white);
    border: 1px solid var(--border-gray);
}

.sidebar-footer .nav-link:hover {
    background: var(--primary-color);
    color: var(--white) !important;
    transform: none;
}

.sidebar footer {
    padding: var(--spacing-md);
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-gray);
    background: var(--white);
}

/* =================================
   CLEAN TABLES - BRAND TYPOGRAPHY
   ================================= */
.table {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-gray);
}

.table thead th {
    font-family: 'Helvetica Neue', 'Sansation'  ;
    background: #e8e8ea;
    color: black;
    font-weight: 600;
    font-size: 0.9rem;
    padding: var(--spacing-md);
}

.table tbody td {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    padding: var(--spacing-md);
    border-color: var(--border-gray);
    color: var(--text-dark);
    font-weight: 400;
}

.table tbody tr:hover {
    background-color: rgba(245, 168, 0, 0.05);
}

/* =================================
   CLEAN BADGES & STATUS INDICATORS - BRAND TYPOGRAPHY
   ================================= */
.badge {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    border-radius: var(--border-radius-small);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
}
.badge.bg-green {
    background: var(--green) !important;
    color: var(--white);
}
.badge.bg-primary {
    background: var(--primary-color) !important;
    color: var(--white);
}

.badge.bg-success {
    background: var(--success-color) !important;
    color: var(--white);
}

.badge.bg-danger {
    background: var(--danger-color) !important;
    color: var(--white);
}

.badge.bg-warning {
    background: var(--warning-color) !important;
    color: var(--white);
}
.badge.bg-info,
.status-badge {
    color: rgb(13 110 253) !important; /* Bootstrap info color */
    background:transparent !important;
}

/* =================================
   CLEAN MODAL COMPONENTS - BRAND TYPOGRAPHY
   ================================= */
.modal-content {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-medium);
}

.modal-header {
    background: var(--white);
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-gray);
    padding: var(--spacing-lg);
}

.modal-header h5 {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--primary-color);
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid var(--border-gray);
    background: var(--light-gray);
    padding: var(--spacing-md);
}

/* =================================
   NAVIGATION LINKS - BRAND TYPOGRAPHY
   ================================= */
.text-white-link, .auth-back-link {
    font-family: 'Sansation', 'Helvetica Neue'  ;
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500;
}

.text-white-link:hover, .auth-back-link:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline;
}

/* =================================
   UTILITY CLASSES
   ================================= */
.shadow-custom {
    box-shadow: var(--shadow-medium) !important;
}

.shadow-hover {
    transition: var(--transition-medium);
}

.shadow-hover:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-1px);
}

.bg-light-custom {
    background: var(--light-gray) !important;
}

.border-custom {
    border-color: var(--border-gray) !important;
}

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

/* Clean spacing utilities */
.p-clean { padding: var(--spacing-md) !important; }
.py-clean { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.px-clean { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.m-clean { margin: var(--spacing-md) !important; }
.my-clean { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }

/* =================================
   RESPONSIVE DESIGN - CLEAN
   ================================= */
@media (max-width: 768px) {
    .auth-card {
        margin: var(--spacing-md);
        border-radius: var(--border-radius);
    }
    
    .sidebar {
        width: 100%;
        position: relative;
        min-height: auto;
    }
    
    .sidebar-header {
        padding: var(--spacing-lg);
    }
}

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

.fade-in-clean {
    animation: fadeInClean 0.4s ease-out;
}

/* =================================
   LOADING STATES - CLEAN
   ================================= */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
a {
    color: black;

}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}@media (max-width: 768px) {
    body.auth-page {
        padding: 0.5rem 0;
    }
    
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .auth-card {
        margin: 1rem auto;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-light);
    }
    
    .auth-card .card-body {
        padding: 1.5rem;
    }
    
    .auth-header {
        padding: 1.5rem;
    }
    
    /* Stack form fields on mobile */
    .row .col-md-6 {
        margin-bottom: 1rem;
    }
    
    /* Adjust button size */
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Modal adjustments */
    .modal-lg {
        max-width: 95vw;
        margin: 1rem auto;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    body.auth-page {
        padding: 0.25rem 0;
    }
    
    .auth-card {
        margin: 0.5rem auto;
        border-radius: 0; /* Remove border radius on very small screens */
    }
    
    .auth-card .card-body {
        padding: 1rem;
    }
    
    .auth-header {
        padding: 1rem;
    }
    
    .auth-header h3 img.logo {
        max-width: 120px; /* Smaller logo on mobile */
    }
    
    /* Smaller form controls */
    .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Better spacing for checkboxes */
    .form-check {
        padding-left: 1.8rem;
    }
    
    .form-check-input {
        margin-left: -1.8rem;
    }
}