/**
 * ========================================================================
 * RB UI Styles (Unique & Themeable)
 * ========================================================================
 * File:        rb_ui_styles.css
 * Path:        \u04\ice\interfaces\ics1\resources\skin\v1\IC\css\rb_ui_styles.css
 *
 * Purpose:     Styles for reusable UI components: modals, checkbox grids, card panels.
 *              Used by: standardModalBox(), buildCheckboxSearchPopupBody(), buildPanelCardGrid()
 *              Also supports: Toolbox Apps, selection popups, and any future RB UI components.
 *
 * Author:      RB Fernando
 * Created:     2026-05-26
 * Modified:    2026-05-29 (OS Dark Mode uses pastel palette)
 *
 * Dependencies: Font Awesome 6 (or 5), Bootstrap (optional grid/modal)
 *
 * THEMING:     Change CSS custom properties below to rebrand entire component.
 * ========================================================================
 */

/* ============================================
   THEME VARIABLES (Root / Light theme – original)
   ============================================ */
:root {
    --rb-ui-primary: #ff8400;          /* Primary color (checkmarks, search icon, hover borders) */
    --rb-ui-primary-dark: #e67300;     /* Darker primary for hover states */
    --rb-ui-primary-light: #fef9e6;    /* Very light primary for card hover background */
    --rb-ui-secondary: #ffc107;        /* Secondary accent (yellow) for card hover border */
    --rb-ui-success: #28a745;          /* Success green for copy icon */
    
    --rb-ui-border-light: #e4e9f0;     /* Card borders */
    --rb-ui-border-search: #d5d5d5;    /* Search input border */
    --rb-ui-border-separator: #e8ecef; /* Section separators */
    
    --rb-ui-text-muted: #6c7a89;       /* Instruction text, empty messages */
    --rb-ui-text-secondary: #9aa6b5;   /* Copy icon default colour */
    
    --rb-ui-bg-card: #ffffff;          /* Card background */
    --rb-ui-bg-search: #ffffff;        /* Search bar background */
    --rb-ui-icon-empty: #cbd5e1;       /* Empty state folder/search icon colour */
    
    --rb-ui-border-radius-sm: 4px;     /* Small border radius */
    --rb-ui-border-radius-md: 6px;     /* Medium border radius */
    --rb-ui-transition: all 0.2s ease;
    --rb-ui-font-size-xs: 10px;
    --rb-ui-font-size-sm: 11px;
    --rb-ui-font-size-md: 12px;
    --rb-ui-font-size-lg: 14px;
    --rb-ui-font-weight-value: 400;
    --rb-ui-font-weight-topic: 600;
}

/* ============================================
   OS DARK MODE – Pastel Palette (light & elegant)
   Respects system preference, but uses soft pastel colors – not dark.
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --rb-ui-primary: #b6c9a8;          /* Sage pastel */
        --rb-ui-primary-dark: #a2b894;
        --rb-ui-primary-light: #eef3e9;
        --rb-ui-secondary: #cbd8c4;
        --rb-ui-success: #aac8a7;
        
        --rb-ui-border-light: #dce5d4;
        --rb-ui-border-search: #ced9c6;
        --rb-ui-border-separator: #e4ece0;
        
        --rb-ui-text-muted: #7d8f72;
        --rb-ui-text-secondary: #9aae8e;
        
        --rb-ui-bg-card: #fefef7;
        --rb-ui-bg-search: #fefef7;
        --rb-ui-icon-empty: #c2d1b8;
        
        --rb-ui-border-radius-sm: 4px;
        --rb-ui-border-radius-md: 6px;
        --rb-ui-transition: all 0.2s ease;
    }
}

/* ============================================
   MANUAL PASTEL THEME (same as OS Dark Mode)
   Apply via: document.body.classList.add('rb-ui-pastel')
   ============================================ */
.rb-ui-pastel {
    --rb-ui-primary: #b6c9a8;
    --rb-ui-primary-dark: #a2b894;
    --rb-ui-primary-light: #eef3e9;
    --rb-ui-secondary: #cbd8c4;
    --rb-ui-success: #aac8a7;
    
    --rb-ui-border-light: #dce5d4;
    --rb-ui-border-search: #ced9c6;
    --rb-ui-border-separator: #e4ece0;
    
    --rb-ui-text-muted: #7d8f72;
    --rb-ui-text-secondary: #9aae8e;
    
    --rb-ui-bg-card: #fefef7;
    --rb-ui-bg-search: #fefef7;
    --rb-ui-icon-empty: #c2d1b8;
    
    --rb-ui-border-radius-sm: 4px;
    --rb-ui-border-radius-md: 6px;
    --rb-ui-transition: all 0.2s ease;
}

/* ============================================
   FANCY THEME (Purple/Gold – original)
   ============================================ */
.rb-ui-fancy {
    --rb-ui-primary: #9b59b6;
    --rb-ui-primary-dark: #8e44ad;
    --rb-ui-primary-light: #f3e8ff;
    --rb-ui-secondary: #f1c40f;
    --rb-ui-success: #2ecc71;
    
    --rb-ui-border-light: #e2d5f0;
    --rb-ui-border-search: #d5c8e8;
    --rb-ui-border-separator: #ede5f7;
    
    --rb-ui-text-muted: #7f8c8d;
    --rb-ui-text-secondary: #bdc3c7;
    
    --rb-ui-bg-card: #ffffff;
    --rb-ui-bg-search: #ffffff;
    --rb-ui-icon-empty: #d5c8e8;
    
    --rb-ui-border-radius-sm: 6px;
    --rb-ui-border-radius-md: 10px;
    --rb-ui-transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}


/* 
// Immediately add the fancy theme class to body when the page loads
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('rb-ui-fancy');
});

-----------------------------------------------
On console
document.body.classList.add('rb-ui-fancy');

*/




/* Optional: Extra polish for fancy theme (gradients, shadows) */
.rb-ui-fancy .rb-ui-panel-card,
.rb-ui-fancy .rb-ui-item-card {
    background: linear-gradient(135deg, #ffffff 0%, #fef9ff 100%);
}

.rb-ui-fancy .rb-ui-panel-card:hover,
.rb-ui-fancy .rb-ui-item-card:hover {
    background: linear-gradient(135deg, var(--rb-ui-primary-light) 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.15);
}

.rb-ui-fancy .rb-ui-search-wrapper:focus-within i.fa-search {
    transform: rotate(45deg) scale(1.05);
}

/* 
// How to use the fancy theme:
// document.body.classList.add('rb-ui-fancy');
*/

/* ============================================
   FUTURE THEMES (easy to add more)
   Example: .rb-ui-high-contrast, .rb-ui-spring, etc.
   Just override the variables above.
   ============================================ */

/* ============================================
   PANEL CARD GRID (Toolbox Apps)
   ============================================ */
.rb-ui-panel-grid {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.rb-ui-panel-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--rb-ui-bg-card);
    border: 1px solid var(--rb-ui-border-light);
    border-radius: var(--rb-ui-border-radius-md);
    transition: var(--rb-ui-transition);
    cursor: default;
}

.rb-ui-panel-card:hover {
    background-color: var(--rb-ui-primary-light);
    border-color: var(--rb-ui-secondary);
    transform: translateY(-1px);
}

.rb-ui-panel-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    font-size: var(--rb-ui-font-size-sm);
    font-weight: 300;
}

.rb-ui-panel-card i:first-child {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--rb-ui-primary);
}

/* Copy icon (panel) */
.rb-ui-panel-copy-icon {
    font-size: var(--rb-ui-font-size-sm);
    /* color: var(--rb-ui-text-secondary); */
    color: var(--rb-ui-primary);
    cursor: pointer;
    opacity: 0.6;
    transition: var(--rb-ui-transition);
    margin-left: auto;
    flex-shrink: 0;
}

.rb-ui-panel-copy-icon:hover {
    opacity: 1;
    color: var(--rb-ui-primary);
}

/* Success state after copy */
.rb-ui-panel-copy-icon.fa-check,
.rb-ui-panel-copy-icon.copy-success {
    /* color: var(--rb-ui-success) !important; */
    color:var(--rb-ui-primary) !important;
    opacity: 1 !important;
}

/* ============================================
   CHECKBOX SEARCH POPUP MODAL
   (buildCheckboxSearchPopupBody)
   ============================================ */

/* Outer flex container – height is set inline dynamically */
.rb-ui-popup-container {
    display: flex;
    flex-direction: column;
    /* No default height – set via inline style in PHP */
}

/* Search bar section (when visible) */
.rb-ui-search-section {
    padding: 8px 16px 12px 16px;
    border-bottom: 1px solid var(--rb-ui-border-separator);
}

.rb-ui-search-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--rb-ui-border-search);
    border-radius: var(--rb-ui-border-radius-sm);
    background: var(--rb-ui-bg-search);
}

.rb-ui-search-input {
    flex: 1;
    border: none;
    padding: 8px 6px;
    font-size: var(--rb-ui-font-size-md);
    outline: none;
    background: transparent;
}

.rb-ui-search-icon {
    padding: 0 8px;
    color: var(--rb-ui-primary);
}

.rb-ui-clear-icon {
    padding-right: 8px;
    cursor: pointer;
}

.rb-ui-clear-icon i {
    cursor: pointer;
}

.rb-ui-instruction {
    margin-top: 8px;
    font-size: var(--rb-ui-font-size-xs);
    color: var(--rb-ui-text-muted);
}

.rb-ui-instruction i {
    margin-right: 4px;
}

/* Instruction only (no search bar) */
.rb-ui-instruction-only {
    padding: 12px 16px 8px 16px;
    border-bottom: 1px solid var(--rb-ui-border-separator);
    text-align: center;
    font-size: var(--rb-ui-font-size-xs);
    color: var(--rb-ui-text-muted);
}

.rb-ui-instruction-only i {
    margin-right: 4px;
}

/* Scrollable container for items */
.rb-ui-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* Empty state (when $items is empty) */
.rb-ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
}

.rb-ui-empty-icon {
    color: var(--rb-ui-icon-empty);
    margin-bottom: 16px;
}

.rb-ui-empty-message {
    font-size: var(--rb-ui-font-size-lg);
    color: var(--rb-ui-text-muted);
}

.rb-ui-empty-submessage {
    font-size: var(--rb-ui-font-size-md);
    margin-top: 8px;
}

/* No results placeholder (when search yields 0 results) */
.rb-ui-no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
}

/* Items grid (cards with checkboxes) */
.rb-ui-items-grid {
    display: grid;
    grid-template-columns: 1fr;  /* single column – can be overridden if needed */
    gap: 12px;
}

.rb-ui-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--rb-ui-bg-card);
    border: 1px solid var(--rb-ui-border-light);
    border-radius: var(--rb-ui-border-radius-md);
    transition: var(--rb-ui-transition);
}

.rb-ui-item-card:hover {
    background-color: var(--rb-ui-primary-light);
    border-color: var(--rb-ui-secondary);
    transform: translateY(-1px);
}

.rb-ui-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--rb-ui-font-size-sm);
    font-weight: 300;
    line-height: 1.4;
    min-width: 0;
}

.rb-ui-item-name-devops {
    color: red !important;
}

/* Item icon colour */
.rb-ui-item-card i {
    color: var(--rb-ui-primary);
}

/* Custom checkbox wrapper */
.rb-ui-checkbox-wrapper {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rb-ui-checkbox-wrapper input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.rb-ui-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--rb-ui-bg-card);
    border: 1px solid var(--rb-ui-border-search);
    border-radius: 3px;
    cursor: pointer;
}

.rb-ui-checkbox-wrapper input:checked ~ .rb-ui-checkmark {
    background-color: var(--rb-ui-primary);
    border-color: var(--rb-ui-primary);
}

.rb-ui-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.rb-ui-checkbox-wrapper input:checked ~ .rb-ui-checkmark:after {
    display: block;
}

.rb-ui-checkmark:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Search icon animation */
.rb-ui-search-wrapper i.fa-search {
    transition: transform 0.25s ease-in-out;
    transform-origin: center;
}

.rb-ui-search-wrapper:focus-within i.fa-search {
    transform: rotate(45deg);
}

/* Select / Deselect links */
.rb-ui-instruction a,
.rb-ui-instruction-only a {
    color: var(--rb-ui-primary);
    text-decoration: none;
    cursor: pointer;
}

.rb-ui-instruction a:hover,
.rb-ui-instruction-only a:hover {
    text-decoration: underline;
    color: var(--rb-ui-primary-dark);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS (optional)
   ============================================ */
@media (max-width: 768px) {
    .rb-ui-items-grid {
        gap: 8px;
    }
    .rb-ui-item-card {
        padding: 6px 10px;
    }
}

/* ============================================
   END OF RB UI STYLES
   ============================================ */


   /* RB UI table styling (for privileges, etc.) */
/* .rb-ui-card-body .table {
    border-color: var(--rb-ui-border-light);
}
.rb-ui-card-body .table th,
.rb-ui-card-body .table td {
    border-color: var(--rb-ui-border-light);
}
.rb-ui-card-body .table thead th {
    background-color: var(--rb-ui-primary-light);
    color: var(--rb-ui-text-primary);
} */




/* Testing */
/* Replace the existing .rb-ui-item-card.profile-field-card rules with these */

.rb-ui-item-card.profile-field-card {
    align-items: center;           /* vertically center icon and content */
}

.rb-ui-item-card.profile-field-card .rb-ui-item-name {
    display: flex;
    flex-wrap: nowrap;             /* force label + value + copy icon on one line */
    align-items: baseline;
    gap: 8px;
    width: 100%;
}

.field-label {
    flex: 0 0 140px;              /* fixed width – adjust as needed */
    font-weight: 600;
    color: var(--rb-ui-primary-dark, #e67300);
}

.field-value {
    flex: 1;                      /* takes remaining space */
    font-weight: 500;
    color: #1e2f3f;
    word-break: break-word;
}

.inline-copy-icon {
    flex: 0 0 auto;
    margin-left: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--rb-ui-text-secondary, #9aa6b5);
}

.empty-value {
    color: var(--rb-ui-text-muted, #6c7a89);
    font-style: italic;
    font-weight: normal;
}

.rb-ui-section-title{
    font-size: var(--rb-ui-font-size-sm);
    font-weight:var(--rb-ui-font-weight-value);
}

/* Optional: on very small screens, allow wrapping with a different layout */
@media (max-width: 576px) {
    .rb-ui-item-card.profile-field-card .rb-ui-item-name {
        flex-wrap: wrap;
    }
    .field-label {
        flex-basis: 100%;
        margin-bottom: 4px;
    }
}