/* ==========================================================================
   Utility & Common Styles
   Extracted from shared patterns across multiple pages
   ========================================================================== */

/* ==========================================================================
   Bootstrap Utility Overrides
   Neutralize bg-dark/text-light when used with our design system components.
   Our modern-cards.css and modern-grid.css already handle backgrounds/colors
   through CSS variables and glassmorphism - Bootstrap utilities are redundant.
   ========================================================================== */

/* Grids: modern-glass-grid handles its own background via modern-grid.css */
.modern-glass-grid.bg-dark,
.modern-glass-grid.text-light {
    background-color: transparent !important;
    color: inherit !important;
}

/* Cards: modern-cards.css provides glass backgrounds */
.card.bg-dark,
.card .card-body.bg-dark,
.card .card-body.text-light {
    background-color: transparent !important;
    color: inherit !important;
}

/* Compact grid popups */
.compact-grid-popup.bg-dark,
.compact-grid-popup.text-light {
    background-color: transparent !important;
    color: inherit !important;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

/* Full-width left-aligned container (used in Index.razor) */
.left-aligned {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

/* Legacy alias - prefer .left-aligned */
.left_aligned {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

/* ==========================================================================
   Focus Ring Utilities
   Consistent focus states for accessibility (WCAG 2.1 compliance)
   ========================================================================== */

/* Standard focus ring - use on interactive elements */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* Inset focus ring - use when outline-offset would overflow container */
.focus-ring-inset:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: -2px;
}

/* Focus ring with background highlight */
.focus-ring-highlight:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
    background-color: rgba(59, 130, 246, 0.08);
}

/* Remove default focus for elements using custom focus styles */
.focus-ring-none:focus {
    outline: none;
}

/* Global focus-visible enhancement for interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible:not([tabindex="-1"]) {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* ==========================================================================
   Fixed Width Container
   Used in: AddManager, ManagerOverview, ManagerDetails
   ========================================================================== */
.fixwidth-container {
    max-width: 800px;
    margin: 0; /* Align to the left */
}

/* ==========================================================================
   Username/Credential Styling
   Used in: AddManager, ManagerDetails (success popup)
   ========================================================================== */
.username-highlight {
    background-color: #f0f8ff;
    color: #0056b3;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #0d6efd;
}

/* Input version with !important for form fields */
input.username-highlight {
    background-color: #e8f4ff !important;
    color: #0056b3 !important;
    font-weight: bold !important;
    border: 2px solid #0d6efd !important;
}

/* Fixed width for eye toggle button to prevent size changes */
.eye-button {
    min-width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   UPN Domain Label
   Used in: AddManager, ManagerDetails (edit mode)
   ========================================================================== */
.upn-domain-label {
    background-color: #f0f8ff;
    color: #0056b3;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #0d6efd;
    font-size: 1rem;
}

/* ==========================================================================
   Clickable Links
   Used in: ManagerActivityReport, and other grids with clickable items
   ========================================================================== */
.clickable-link {
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6ea8fe !important;
    text-decoration: none !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

.clickable-link:hover {
    color: #8bb9fe !important;
    text-decoration: underline !important;
}

.clickable-link:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Badge Styles for Time/Status
   Used in: ManagerActivityReport
   ========================================================================== */
.days-ago-badge {
    min-width: 110px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
}

.auth-time-badge {
    min-width: 60px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
}

/* ==========================================================================
   Progress Bar Enhancements
   Used in: ManagerActivityReport
   ========================================================================== */
.progress-bar-animated {
    transition: width 0.6s ease;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
}

/* ==========================================================================
   Page Title Styling
   Used in: ManagerActivityReport
   ========================================================================== */
.page-title {
    color: #0d6efd;
    font-weight: 600;
}

/* ==========================================================================
   Inactive Entity Styling
   Used in: ManagerDetails, LocationDetails (for inactive items)
   ========================================================================== */
.inactive-body {
    opacity: 0.6;
    background-color: #f8f9fa;
    position: relative;
}

.inactive-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(108, 117, 125, 0.05) 10px,
        rgba(108, 117, 125, 0.05) 20px
    );
    pointer-events: none;
}

.inactive-header {
    opacity: 0.6;
    filter: grayscale(40%);
}

/* ==========================================================================
   Info List (Key-Value Display)
   Used in: ManagerOverview, ManagerDetails
   ========================================================================== */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2, 0.5rem) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list .label {
    color: #6c757d;
    font-weight: 500;
}

.info-list .value {
    font-weight: 600;
    text-align: right;
}

/* ==========================================================================
   Tab Title (DevExpress Tabs)
   Used in: ManagerOverview
   ========================================================================== */
.tab-title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

/* ==========================================================================
   Edit Icon Link
   Used in: ManagerOverview, ManagerDetails
   ========================================================================== */
.edit-icon-link {
    color: #0d6efd;
    cursor: pointer;
    transition: color 0.2s;
}

.edit-icon-link:hover {
    color: #0a58ca;
}

/* ==========================================================================
   Button Action (Small)
   Used in: AdministratorPoliceReportTemplates
   ========================================================================== */
.btn-action {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.75rem !important;
}

/* ==========================================================================
   Button Separator
   Used in: ClientOverview
   ========================================================================== */
.button-separator {
    border-left: 2px solid #dee2e6;
    height: 24px;
    margin: 0 0.5rem;
}

/* ==========================================================================
   Map Container
   Used in: LocationDetails, AdministratorLocationDetails
   ========================================================================== */
.map-container {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}