/* ======================================================
   Find OS - Main Stylesheet
   ======================================================
   
   Table of Contents:
   1. Global Variables
   2. Typography & Base Styles
   3. Layout
   4. Navbar
   5. Cards
   6. Forms
   7. Buttons
   8. Alerts & Flash Messages
   9. Badge Styling
   10. Animations
   11. Auth Pages
   12. Dashboard Elements
   13. App Grid
   14. Profile Page
   15. Iframe Styles
   16. Responsive Adjustments
   17. Utility Classes
   18. Admin Pages
   19. Video Styles
   ====================================================== */

/* ====== 1. Global Variables ====== */
:root {
    --primary-color: #00aa99;
    --primary-hover: #008877;
    --secondary-color: #ffffff;
    --text-color: #333333;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --bg-light: #f8f9fa;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --transition-normal: all 0.3s ease;
}

/* ====== 2. Typography & Base Styles ====== */
body {
    font-family: 'Ubuntu', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Righteous', cursive;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

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

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

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

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-normal);
}

a:hover {
    color: var(--primary-hover);
}

/* ====== 3. Layout ====== */
.main-content {
    flex: 1;
    padding-top: 80px; /* Account for fixed navbar */
}

.container {
    position: relative;
}

.footer {
    margin-top: auto;
    padding: 1rem 0;
    background-color: var(--bg-light);
}

/* Flash messages container */
.flash-messages-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    max-width: 600px;
}

/* ====== 4. Navbar ====== */
/* ====== 4. Navbar ====== */
.navbar {
    background-color: transparent;
    transition: var(--transition-normal);
    padding: 1rem 0;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-family: 'Righteous', cursive;
    color: var(--primary-color) !important;
    font-size: 1.5rem;
}

.navbar-logo {
    height: 40px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.navbar-logo:hover {
    transform: scale(1.05);
}

/* Navbar dropdown styling */
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle:focus-visible,
.navbar .dropdown-toggle:active:focus,
.navbar .dropdown-toggle.show,
.navbar .nav-link.dropdown-toggle.show {
    background-color: #f0f0f0 !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* Navbar dropdown menu item styling */
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: #f0f0f0 !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* Dropdown menu styling */
.dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* ====== 7. Buttons ====== */
.btn {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: var(--transition-normal);
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
}

/* Fix for blue focus/active state on buttons */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.active:focus,
.btn-primary:visited,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary, 
.btn-primary.dropdown-toggle.show {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 170, 153, 0.25) !important;
}

/* Reset button appearance when focus is lost */
.btn-primary:focus-visible {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
}

/* Fix for button after clicking (fixes the persistent blue state) */
.btn-primary.focus, 
.btn-primary:focus {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
}

/* When button is disabled */
.btn-primary:disabled, 
.btn-primary.disabled {
    background-color: rgba(0, 170, 153, 0.5);
    border-color: rgba(0, 170, 153, 0.3);
    color: white;
}

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

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

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

.btn-link:hover {
    color: var(--primary-hover);
}

.btn-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Button loading state */
.btn-primary.loading {
    position: relative;
    color: transparent;
}

.btn-primary.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 0.75s linear infinite;
}

/* ====== 5. Cards ====== */
.card {
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem;
}

.card-title {
    color: var(--primary-color);
}

/* ====== 6. Forms ====== */
.form-control {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    transition: var(--transition-normal);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 170, 153, 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

.form-text ul {
    padding-left: 1.2rem;
    margin-top: 0.5rem;
}

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

/* ====== 7. Buttons ====== */
.btn {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: var(--transition-normal);
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
}

/* Fix for blue focus/active state on buttons */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.active:focus,
.btn-primary:visited,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary, 
.btn-primary.dropdown-toggle.show {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 170, 153, 0.25) !important;
}

/* Reset button appearance when focus is lost */
.btn-primary:focus-visible {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
}

/* Fix for button after clicking (fixes the persistent blue state) */
.btn-primary.focus, 
.btn-primary:focus {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: var(--primary-color) !important;
}

/* When button is disabled */
.btn-primary:disabled, 
.btn-primary.disabled {
    background-color: rgba(0, 170, 153, 0.5);
    border-color: rgba(0, 170, 153, 0.3);
    color: white;
}

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

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

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

.btn-link:hover {
    color: var(--primary-hover);
}

.btn-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Button loading state */
.btn-primary.loading {
    position: relative;
    color: transparent;
}

.btn-primary.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 0.75s linear infinite;
}

/* ====== 8. Alerts & Flash Messages ====== */
.alert {
    margin-top: 1rem;
    transition: opacity 0.5s ease-out;
}

/* Fade-out animation for alerts */
.fade-out {
    opacity: 0 !important;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-error, .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

/* ====== 9. Badge Styling ====== */
.badge {
    padding: 0.5em 1em;
    font-weight: 500;
    border-radius: 50rem;
}

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

/* ====== 10. Animations ====== */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ====== 11. Auth Pages ====== */
/* Login & Forgot Password */
.auth-card {
    max-width: 30rem;
    margin: 0 auto;
}

/* Verification Code Input */
.code-input-container .form-control {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    text-align: center;
}

/* ====== 12. Dashboard Elements ====== */
.stats-card .card-title {
    font-size: 1rem;
    font-weight: 500;
}

.stats-card h2 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}

/* ====== 13. App Grid ====== */
.app-icon {
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.hover-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 170, 153, 0.15) !important;
}

/* ====== 14. Profile Page ====== */
.profile-card h6 {
    color: var(--text-muted);
    font-weight: 500;
}

/* ====== 15. Iframe Styles ====== */
.iframe-container {
    width: 100%;
    height: calc(100vh - 160px); /* Account for navbar and footer */
    overflow: hidden;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    transform: scale(1.05);
    transform-origin: 0 0;
}

/* ====== 16. Responsive Adjustments ====== */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-logo {
        height: 32px;
    }

    .card {
        margin-bottom: 1rem;
    }

    .main-content {
        padding-top: 60px;
    }
    
    /* Make buttons full width on mobile */
    .d-grid .btn {
        width: 100%;
    }

    /* Adjust padding for small screens */
    .card-body {
        padding: 1rem;
    }
}

/* ====== 17. Utility Classes ====== */
.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ====== 18. Admin Pages ====== */
/* Admin user management styles */
.admin-table th {
    font-weight: 600;
    color: #495057;
}

.admin-actions .btn {
    padding: 0.25rem 0.5rem;
    margin: 0 0.125rem;
}

.profile-badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 50rem;
}

.profile-badge.superadmin {
    background-color: #dc3545;
    color: white;
}

.profile-badge.admin {
    background-color: #fd7e14;
    color: white;
}

.profile-badge.superuser {
    background-color: #17a2b8;
    color: white;
}

.profile-badge.gestor {
    background-color: #28a745;
    color: white;
}

.profile-badge.ti {
    background-color: #007bff;
    color: white;
}

/* User management filters */
.user-filters {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Toggle switch for status */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ====== 19. Video Styles ====== */
.video-container {
    margin-bottom: 2rem;
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background-color: #f8f9fa;
}

.video-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .video-wrapper {
        aspect-ratio: 4/3;
    }
}