/**
 * COPWATCHDOG MERCURY - Base Styles
 * Core styles for the Mercury plugin UI components
 * @package CopWatchdog_Mercury
 * @author Vic Stizzi <stizzi@yumyoda.com>
 * @version 2.5.0
 * 
 * SCOPE: Base elements only (excludes filters, tables, cards - see component files)
 * ARCHITECTURE: All colors/values use CSS variables from pseudo.css for theme swapping
 * DESIGN SYSTEM: Uses foundation tokens (--cwd-*) that themes override
 */

/* ================================================= */
/* CONTAINER & LAYOUT */
/* ================================================= */

.cwd-container {
    max-width: 1400px;
    margin: clamp(1rem, 0.643rem + 1.79vw, 2.5rem) auto; /* 16-40px fluid margin */
    font-family: var(--adp-ff, var(--cwd-t-ff-base));
    font-size: var(--adp-fs);
    line-height: var(--adp-lh, 1.6);
    color: var(--adp-t-01);
    background: transparent;
    position: relative;
    box-sizing: border-box;
}

/* Ensure all child elements inherit box-sizing */
.cwd-container *,
.cwd-container *::before,
.cwd-container *::after {
    box-sizing: border-box;
}

/* ================================================= */
/* CONTROLS SECTION */
/* ================================================= */

.cwd-controls {
    background: var(--adp-bg-01);
    padding: clamp(0.75rem, 0.643rem + 0.54vw, 1.25rem); /* 12-20px fluid */
    border-radius: var(--adp-bd-r);
    border: var(--adp-bd-w) solid var(--adp-bd-01);
    box-shadow: var(--adp-sh);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 0.643rem + 0.54vw, 1.25rem); /* 12-20px fluid */
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cwd-s-3);
    min-height: auto; /* Allow height to fit content */
    height: auto; /* Remove fixed height constraint */
}

/* Grid Controls (for card layout) */
.cwd-grid-controls {
    background: var(--adp-bg-01);
    padding: clamp(0.75rem, 0.643rem + 0.54vw, 1.25rem); /* 12-20px fluid */
    border-radius: var(--adp-bd-r);
    border: var(--adp-bd-w) solid var(--adp-bd-01);
    box-shadow: var(--adp-sh);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 0.643rem + 0.54vw, 1.25rem); /* 12-20px fluid */
    align-items: center;
    justify-content: space-between;
    min-height: auto; /* Allow height to fit content */
    height: auto; /* Remove fixed height constraint */
}

.cwd-controls-left,
.cwd-controls-right {
    display: flex !important;
    gap: var(--cwd-s-3);
    align-items: center;
}

.cwd-controls-left {
    flex: 1 1 300px;
    flex-wrap: wrap;
}

.cwd-controls-right {
    flex: 0 0 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}

.cwd-controls-right > * {
    flex-shrink: 0;
}

/* ================================================= */
/* BUTTONS */
/* ================================================= */

.cwd-button,
.cwd-search-btn,
.cwd-filter-toggle,
.cwd-btn-apply,
.cwd-btn-clear {
    padding: clamp(0.5rem, 0.464rem + 0.18vw, 0.625rem) clamp(0.875rem, 0.804rem + 0.36vw, 1.125rem); /* 8-10px × 14-18px */
    background: var(--adp-bg-01);
    border: var(--adp-bd-w) solid var(--adp-bd-01);
    border-radius: var(--adp-bd-r);
    font-family: var(--adp-ff);
    font-size: clamp(0.8125rem, 0.777rem + 0.18vw, 0.9375rem); /* 13-15px fluid */
    font-weight: var(--cwd-t-fw-md);
    color: var(--adp-t-01);
    cursor: pointer;
    transition: var(--cwd-m-t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--cwd-s-2);
    text-decoration: none;
    white-space: nowrap;
    outline: none;
}

/* Primary Button */
.cwd-button-primary,
.cwd-search-btn,
.cwd-btn-apply {
    background: var(--adp-ac-01);
    color: var(--cwd-c-n0);
    border-color: var(--adp-ac-01);
}

.cwd-button-primary:hover,
.cwd-search-btn:hover,
.cwd-btn-apply:hover {
    background: var(--adp-ac-02);
    border-color: var(--adp-ac-02);
    box-shadow: var(--adp-sh-md);
}

.cwd-button-primary:active,
.cwd-search-btn:active,
.cwd-btn-apply:active {
    transform: translateY(1px);
    box-shadow: var(--adp-sh);
}

/* Primary Button - Active/Has Profile State (explicit) */
.cwd-button-primary[data-has-profile="true"],
.cwd-button-primary[data-has-profile="true"]:hover {
    background: var(--adp-ac-01);
    color: var(--cwd-c-n0);
    border-color: var(--adp-ac-01);
    cursor: pointer;
}

.cwd-button-primary[data-has-profile="true"]:hover {
    background: var(--adp-ac-02);
    border-color: var(--adp-ac-02);
    box-shadow: var(--adp-sh-md);
}

/* Primary Button - Disabled/No Profile State */
.cwd-button-primary[data-has-profile="false"],
.cwd-button-primary[data-has-profile="false"]:hover {
    background: var(--adp-bg-01);
    color: transparent;
    border-color: var(--adp-bd-01);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.cwd-button-primary[data-has-profile="false"] .dashicons {
    color: var(--adp-t-03);
}

/* Secondary Button */
.cwd-button-secondary,
.cwd-filter-toggle,
.cwd-btn-clear {
    background: var(--adp-bg-01);
    color: var(--adp-t-01);
    border-color: var(--adp-bd-01);
}

.cwd-button-secondary:hover,
.cwd-filter-toggle:hover,
.cwd-btn-clear:hover {
    background: var(--adp-bg-hov);
    border-color: var(--adp-t-02);
}

.cwd-button-secondary:active,
.cwd-filter-toggle:active,
.cwd:btn-clear:active {
    transform: translateY(1px);
}

/* Active Button State */
.cwd-filter-toggle.active,
.cwd-view-btn.active {
    background: var(--cwd-c-n2);
    color: var(--cwd-ix-foc);
    border-color: var(--cwd-ix-foc);
    border-radius: 0px !important;
}

/* Filters Container */
.cwd-filters {
    flex: 0 0 auto;
}

/* View Toggle Buttons */
.cwd-view-toggle {
    display: flex;
    gap: var(--cwd-s-1);
    background: var(--cwd-sf-2);
    padding: clamp(0.25rem, 0.214rem + 0.18vw, 0.375rem); /* 4-6px fluid */
    border-radius: var(--cwd-border-radius-sm);
    border: var(--cwd-border-width) var(--cwd-border-style) var(--cwd-sf-3);
    min-height: auto;
    align-items: center;
}

.cwd-view-btn {
    padding: clamp(0.25rem, 0.214rem + 0.18vw, 0.375rem); /* 4-6px fluid */
    background: transparent;
    border: none;
    border-radius: var(--cwd-border-radius-sm);
    transition: all var(--cwd-m-d-rg) var(--cwd-m-e-io);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: auto;
    width: var(--cwd-s-12);
}

.cwd-view-btn:hover .cwd-view-icon {
    transform: scale(1.1);
}

.cwd-view-icon {
    width: var(--cwd-s-8);
    height: var(--cwd-s-8);
    display: block;
    transition: transform var(--cwd-m-d-rg) var(--cwd-m-e-io);
}

/* ================================================= */
/* SELECT DROPDOWNS */
/* ================================================= */

.cwd-select,
.cwd-controls-right .cwd-select,
.cwd-grid-controls .cwd-select {
    padding: var(--cwd-pads-sm) var(--cwd-pads-md) !important;
    background: var(--cwd-sf-3) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--cwd-border-width) var(--cwd-border-style) var(--cwd-sf-hov) !important;
    border-radius: var(--cwd-border-radius-sm) !important;
    font-size: var(--cwd-t-fs-sm) !important;
    font-family: inherit;
    color: var(--cwd-tx-1) !important;
    transition: var(--cwd-m-t-base);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right var(--cwd-s-3) center !important;
    padding-right: var(--cwd-s-8) !important;
    /* Defensive sizing to prevent theme conflicts */
    min-width: calc(var(--cwd-s-24) * 1.25) !important;
    max-width: var(--cwd-l-w-100) !important;
    width: var(--cwd-l-w-au) !important;
    height: var(--cwd-l-w-au) !important;
    min-height: calc(var(--cwd-s-8) + var(--cwd-s-4)) !important;
    max-height: calc(var(--cwd-s-10) + var(--cwd-s-2)) !important;
    line-height: var(--cwd-t-lh-tg) !important;
    box-sizing: border-box !important;
}

.cwd-select:hover {
    background: var(--cwd-sf-hov) !important;
    border-color: var(--cwd-ix-foc) !important;
}

.cwd-select:focus {
    background: var(--cwd-sf-hov) !important;
    border-color: var(--cwd-ix-foc) !important;
    box-shadow: 0 0 0 3px var(--cwd-ix-act) !important;
}

/* ================================================= */
/* RESULTS INFO */
/* ================================================= */

.cwd-results-info {
    flex: 0 0 auto;
    font-size: var(--cwd-t-fs-2xs);
    font-weight: var(--cwd-t-fw-sb);
    color: var(--cwd-c-n5);
    white-space: nowrap;
    padding: clamp(0.375rem, 0.339rem + 0.18vw, 0.5rem) clamp(0.5rem, 0.464rem + 0.18vw, 0.625rem); /* 6-8px × 8-10px fluid */
    min-height: auto;
    line-height: 1.4;
}

.cwd-results-count {
    font-weight: var(--cwd-t-fw-md);
}

/* ================================================= */
/* LOADING STATES */
/* ================================================= */

.cwd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--cwd-pads-3xl) var(--cwd-pads-lg);
    color: var(--cwd-tx-2);
}

.cwd-loading p {
    margin: 0;
    font-size: var(--cwd-t-fs-sm);
}

.cwd-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: var(--cwd-pads-lg);
    border: 3px solid var(--cwd-ix-hov);
    border-top: 3px solid var(--cwd-ix-foc);
    border-radius: var(--cwd-border-radius-full);
    animation: cwdSpin 0.8s linear infinite;
}

@keyframes cwdSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================================= */
/* ERROR MESSAGES */
/* ================================================= */

.cwd-error {
    background: var(--cwd-fb-err-bg);
    color: var(--cwd-fb-err-tx);
    padding: var(--cwd-pads-lg);
    border-radius: var(--cwd-border-radius-sm);
    border-left: var(--cwd-border-width-tk) var(--cwd-border-style) var(--cwd-fb-err-bd);
    text-align: center;
    margin: var(--cwd-pads-md) 0;
}

.cwd-error p {
    margin: 0;
    font-size: var(--cwd-t-fs-sm);
}

/* ================================================= */
/* DISCLAIMER */
/* ================================================= */

.cwd-disclaimer,
.cwd-warning-banner {
    margin: 0 0 var(--cwd-s-3);
    padding: var(--cwd-s-3) var(--cwd-s-4);
    background: var(--cwd-fb-warn-bg);
    border-left: var(--cwd-b-w-tk) solid var(--cwd-c-y1);
    border-radius: var(--adp-bd-r);
    font-family: var(--cwd-t-ff-in) !important;
    font-size: var(--cwd-t-fs-2xs);
    color: var(--adp-t-01);
    line-height: var(--cwd-t-lh-rx);
}

.cwd-disclaimer strong,
.cwd-warning-banner strong {
    color: var(--cwd-c-y2);
    font-weight: var(--cwd-t-fw-sb);
}

/* ================================================= */
/* NOTICE MESSAGES */
/* ================================================= */

.cwd-notice {
    padding: var(--cwd-pads-md) var(--cwd-pads-lg);
    border-radius: var(--cwd-border-radius-sm);
    border-left: var(--cwd-border-width-tk) var(--cwd-border-style);
    margin-bottom: var(--cwd-pads-lg);
    font-size: var(--cwd-t-fs-2xs);
    line-height: var(--cwd-lh-rg);
}

.cwd-notice p {
    margin: 0;
}

.cwd-notice-info {
    background: var(--cwd-fb-info-bg);
    color: var(--cwd-fb-info-tx);
    border-color: var(--cwd-fb-info-bd);
}

.cwd-notice-success {
    background: var(--cwd-fb-succ-bg);
    color: var(--cwd-fb-succ-tx);
    border-color: var(--cwd-fb-succ-bd);
}

.cwd-notice-warning {
    background: var(--cwd-fb-warn-bg);
    color: var(--cwd-fb-warn-tx);
    border-color: var(--cwd-fb-warn-bd);
}

.cwd-notice-error {
    background: var(--cwd-fb-err-bg);
    color: var(--cwd-fb-err-tx);
    border-color: var(--cwd-fb-err-bd);
}

/* ================================================= */
/* PAGINATION */
/* ================================================= */

.cwd-pagination {
    display: flex;
    gap: var(--cwd-s-1);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    background: var(--cwd-c-n0);
    padding: var(--cwd-pads-lg);
    margin-top: var(--cwd-s-0);
    border-radius: 0 0 var(--adp-bd-r) var(--adp-bd-r);
}

.cwd-pagination-controls {
    display: flex;
    gap: var(--cwd-s-2);
    align-items: center;
    order: 2;
}

.cwd-pagination button {
    padding: var(--cwd-pads-xs) var(--cwd-pads-sm);
    background: var(--cwd-sf-3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--cwd-border-width) var(--cwd-border-style) var(--cwd-sf-hov);
    border-radius: var(--cwd-border-radius-sm);
    font-size: var(--cwd-t-fs-xs);
    font-family: inherit;
    color: var(--cwd-tx-1);
    transition: var(--cwd-m-t-base);
    min-width: 32px;
    /* Desktop uniform pagination button height and centered content */
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pagination-specific: ensure buttons size to content (no flex growth from other contexts) */
/* Pagination overrides intentionally removed — button sizing will be handled by scoping
   the filter-area flex rules so pagination buttons size to content naturally. */

@media (max-width: 768px) {
    .cwd-pagination button {
        padding: 0 8px;
        font-size: 12px;
        min-width: auto;
        white-space: nowrap;
        line-height: 1;
        border-width: 1px;
        height: 36px; /* uniform button height on mobile */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .cwd-pagination-controls {
        gap: 2px;
    }
    
    .cwd-pagination-ellipsis {
        font-size: 9px;
        padding: 0 1px;
    }
}

.cwd-pagination button:hover:not(:disabled) {
    background: var(--cwd-ix-hov);
    border-color: var(--cwd-ix-foc);
}

.cwd-pagination button.active {
    background: var(--cwd-ix-foc);
    color: var(--cwd-tx-inv);
    border-color: var(--cwd-ix-foc);
}

.cwd-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cwd-pagination-ellipsis {
    color: var(--cwd-c-n8);
}

/* ================================================= */
/* MODAL */
/* ================================================= */

.cwd-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cwd-pads-lg);
}

.cwd-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cwd-sf-ovr);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cwd-modal-content {
    position: relative;
    background: var(--cwd-sf-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--cwd-border-radius);
    box-shadow: var(--cwd-shadow-xl);
    max-width: var(--cwd-width-modal);
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cwd-modal-close {
    position: absolute;
    top: var(--cwd-pads-md);
    right: var(--cwd-pads-md);
    padding: var(--cwd-pads-xs);
    background: var(--cwd-sf-2);
    border: none;
    border-radius: var(--cwd-border-radius-sm);
    transition: var(--cwd-m-t-base);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwd-modal-close:hover {
    background: var(--cwd-ix-hov);
}

.cwd-modal-body {
    padding: var(--cwd-pads-xl);
    overflow-y: auto;
    flex: 1;
}

/* ================================================= */
/* SEPARATORS & UTILITIES */
/* ================================================= */

.cwd-separator {
    color: var(--cwd-tx-3);
    margin: 0 var(--cwd-s-1);
}

/* Dashicons compatibility */
.dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: var(--cwd-t-lh-tg);
}

/* ================================================= */
/* RESPONSIVE DESIGN */
/* ================================================= */

@media (max-width: 768px) {
    /* Structural layout changes only - spacing is now fluid via clamp() */
    .cwd-controls,
    .cwd-grid-controls {
        flex-direction: column;
        align-items: stretch;
        background: var(--cwd-sf-2);
        min-height: auto !important; /* Prevent excessive height */
    }
    
    /* Ensure all direct children have minimal height */
    .cwd-controls > *,
    .cwd-grid-controls > * {
        min-height: auto !important;
        flex-shrink: 0;
    }
    
    .cwd-search-box,
    .cwd-filters,
    .cwd-results-info {
        min-height: auto !important;
        height: auto !important;
    }
    
    .cwd-controls-left,
    .cwd-controls-right {
        width: var(--cwd-l-w-100);
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    
    /* Reset left controls to full width */
    .cwd-controls-left {
        flex: 1 1 auto;
    }
    
    /* Minimal gap for stacked controls-right items */
    .cwd-controls-right {
        gap: clamp(0.5rem, 0.429rem + 0.36vw, 0.75rem) !important; /* 8-12px minimal gap */
        flex: 1 1 auto;
    }
    
    /* Make ALL children of controls-right full width */
    .cwd-controls-right > * {
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    
    /* Make select dropdowns match parent container width (which matches search/view-toggle) */
    .cwd-select,
    #cwd-cards-per-page,
    #cwd-card-sort {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Remove any min-width constraints */
    }
    
    /* Ensure view toggle stays natural width but distributes buttons evenly */
    .cwd-view-toggle {
        justify-content: space-evenly;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Search wrapper inside controls-left */
    .cwd-controls-left .cwd-search-wrapper,
    .cwd-search-box {
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 auto;
    }
    
    .cwd-filters,
    .cwd-results-info {
        flex: 1 1 auto;
        text-align: center;
    }
    
    .cwd-modal-content {
        max-width: 100%;
        margin: var(--cwd-pads-sm);
    }
    
    .cwd-modal-body {
        padding: var(--cwd-pads-lg);
    }
}

/* ================================================= */
/* WARNING BANNERS */
/* ================================================= */

/* ================================================= */
/* SMALL MOBILE - Structural adjustments only */
/* ================================================= */

.cwd-pagination button {
    padding: clamp(0.375rem, 0.339rem + 0.18vw, 0.5rem) clamp(0.5rem, 0.429rem + 0.36vw, 0.75rem); /* 6-8px × 8-12px */
    min-width: clamp(32px, 30.857px + 0.57vw, 36px); /* 32-36px fluid */
    font-size: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem); /* 12-14px fluid */
}