/**
 * Permission-Based UI Styles
 *
 * CSS patterns for the "gray out, don't hide" approach to permission-based visibility.
 * These styles ensure users can see what features exist but understand why they can't use them.
 *
 * Usage:
 *   - Add .permission-disabled to buttons/links that user cannot access
 *   - Add .permission-disabled-container to wrapper divs for entire sections
 *   - Use data-permission-message attribute for custom tooltip text
 */

/* ========================================
   DISABLED BUTTONS AND LINKS
   ======================================== */

/**
 * Primary disabled button state
 * Shows grayed out appearance with subtle visual feedback
 */
.btn.permission-disabled,
.permission-disabled.btn {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    pointer-events: auto; /* Allow hover for tooltips */
    position: relative;
}

.btn.permission-disabled:hover,
.permission-disabled.btn:hover {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    opacity: 0.7; /* Slightly less faded on hover to show it's interactive (for tooltip) */
}

/* Prevent click events while allowing hover */
.btn.permission-disabled:active,
.permission-disabled.btn:active {
    pointer-events: none;
}

/**
 * Icon-only disabled buttons
 * Common in toolbars and action menus
 */
button.permission-disabled i,
.btn.permission-disabled i {
    opacity: 0.5;
}

/**
 * Disabled links
 * Used in navigation and text links
 */
a.permission-disabled {
    color: #6c757d !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
    opacity: 0.6;
    pointer-events: auto; /* Allow hover for tooltips */
}

a.permission-disabled:hover {
    color: #6c757d !important;
    text-decoration: none !important;
    opacity: 0.7;
}

/* ========================================
   DISABLED FORM CONTROLS
   ======================================== */

/**
 * Disabled form inputs with permission context
 * More visually distinct than standard :disabled
 */
input.permission-disabled,
select.permission-disabled,
textarea.permission-disabled {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* ========================================
   DISABLED CONTAINERS
   ======================================== */

/**
 * Disabled container - grays out entire sections
 * Useful for workflow sections that aren't accessible
 */
.permission-disabled-container {
    position: relative;
    opacity: 0.6;
    pointer-events: none; /* Block all interaction */
}

/* Add subtle overlay to indicate disabled state */
.permission-disabled-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(248, 249, 250, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* Ensure child elements are visible through overlay */
.permission-disabled-container > * {
    position: relative;
    z-index: 0;
}

/* ========================================
   PERMISSION BADGES
   ======================================== */

/**
 * Small badge showing required permission level
 * Displays next to disabled features
 */
.permission-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #6c757d;
    color: white;
    margin-left: 0.5rem;
}

.permission-badge-admin {
    background-color: #0d6efd;
}

.permission-badge-manager {
    background-color: #6610f2;
}

.permission-badge-owner {
    background-color: #d63384;
}

/* ========================================
   TOOLTIPS FOR DISABLED ELEMENTS
   ======================================== */

/**
 * Custom tooltip styling for permission messages
 * Works with Bootstrap tooltips or custom implementation
 */
.permission-tooltip {
    position: relative;
}

/* Tooltip text - hidden by default */
.permission-tooltip .permission-tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #343a40;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tooltip arrow */
.permission-tooltip .permission-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #343a40 transparent transparent transparent;
}

/* Show tooltip on hover */
.permission-tooltip:hover .permission-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ========================================
   WORKFLOW-SPECIFIC STYLES
   ======================================== */

/**
 * Disabled workflow buttons
 * Used in QAQC, Elevation, Validation workflows
 */
.workflow-action.permission-disabled {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    border: 2px dashed #adb5bd !important;
    color: #6c757d !important;
}

.workflow-action.permission-disabled:hover {
    background: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%) !important;
}

/**
 * Disabled workflow step indicator
 * Shows unavailable steps in stepped workflows
 */
.workflow-step.permission-disabled {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #adb5bd;
}

.workflow-step.permission-disabled .step-number {
    background-color: #dee2e6;
    color: #6c757d;
}

/* ========================================
   PUBLISHING-SPECIFIC STYLES
   ======================================== */

/**
 * Publish button (disabled state)
 * Shown to adders who can create but not publish
 */
.btn-publish.permission-disabled {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

.btn-publish.permission-disabled:hover {
    background-color: #fff3cd !important;
}

.btn-publish.permission-disabled::before {
    content: "\f023"; /* Font Awesome lock icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
}

/**
 * Published indicator
 * Shows when content is published to data room
 */
.published-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.published-badge::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
}

/* ========================================
   DATA ROOM VIEWER STYLES
   ======================================== */

/**
 * Watermark overlay for data room viewers
 * Shows unique identifier on all published content
 */
.dataroom-watermark {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Courier New', monospace;
    user-select: none;
    pointer-events: none;
    z-index: 9999;
}

/**
 * Read-only mode indicator
 * Shows viewers they are in data room mode
 */
.dataroom-mode-indicator {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #cfe2ff;
    border-bottom: 2px solid #9ec5fe;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 500;
    color: #084298;
}

.dataroom-mode-indicator::before {
    content: "\f06e"; /* Font Awesome eye icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    margin-right: 0.5rem;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .permission-tooltip .permission-tooltip-text {
        width: 180px;
        margin-left: -90px;
    }

    .dataroom-watermark {
        bottom: 10px;
        right: 10px;
        font-size: 0.65rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/**
 * Screen reader only text for disabled elements
 * Provides context to assistive technology users
 */
.sr-permission-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus indicators for keyboard navigation */
.permission-disabled:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/**
 * Permission level indicators
 * Visual cues for required access levels
 */
.requires-admin::after {
    content: " (Admin)";
    font-size: 0.75em;
    color: #6c757d;
    font-weight: normal;
}

.requires-manager::after {
    content: " (Manager)";
    font-size: 0.75em;
    color: #6c757d;
    font-weight: normal;
}

.requires-owner::after {
    content: " (Owner)";
    font-size: 0.75em;
    color: #6c757d;
    font-weight: normal;
}

/* Hide these suffixes on small screens */
@media (max-width: 576px) {
    .requires-admin::after,
    .requires-manager::after,
    .requires-owner::after {
        display: none;
    }
}
