/* EXTREME DEPTH EFFECTS - Windows 95/98 Inspired */
/* Heavy shadows, pronounced bevels, tactile 3D interface */
/* Toggle this file in app.html to enable/disable */

:root {
    /* Refined shadow system - balanced depth with subtlety */
    --shadow-inset-deep:
        inset 2px 2px 4px rgba(0, 0, 0, 0.6),
        inset -1px -1px 2px rgba(255, 255, 255, 0.06);

    --shadow-inset-shallow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.5),
        inset -1px -1px 1px rgba(255, 255, 255, 0.04);

    --shadow-raised-strong:
        -1px -1px 0 rgba(255, 255, 255, 0.12), 1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 0 rgba(0, 0, 0, 0.5), 3px 3px 6px rgba(0, 0, 0, 0.4),
        inset -1px -1px 0 rgba(0, 0, 0, 0.3),
        inset 1px 1px 0 rgba(255, 255, 255, 0.1);

    --shadow-raised-medium:
        -1px -1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.35), inset -1px -1px 0 rgba(0, 0, 0, 0.25),
        inset 1px 1px 0 rgba(255, 255, 255, 0.08);

    --shadow-pressed:
        inset 1px 1px 3px rgba(0, 0, 0, 0.7),
        inset -1px -1px 1px rgba(0, 0, 0, 0.5),
        inset -1px -1px 0 rgba(255, 255, 255, 0.04);

    --shadow-panel-deep:
        -1px -1px 0 rgba(255, 255, 255, 0.08), 2px 2px 0 rgba(0, 0, 0, 0.5),
        3px 3px 0 rgba(0, 0, 0, 0.4), 4px 4px 0 rgba(0, 0, 0, 0.3),
        5px 5px 10px rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.06),
        inset -1px -1px 0 rgba(0, 0, 0, 0.3);

    --shadow-panel-medium:
        -1px -1px 0 rgba(255, 255, 255, 0.06), 1px 1px 0 rgba(0, 0, 0, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.35),
        inset 1px 1px 0 rgba(255, 255, 255, 0.04),
        inset -1px -1px 0 rgba(0, 0, 0, 0.25);

    --shadow-floating:
        -1px -1px 0 rgba(255, 255, 255, 0.12), 3px 3px 0 rgba(0, 0, 0, 0.5),
        4px 4px 0 rgba(0, 0, 0, 0.4), 6px 6px 0 rgba(0, 0, 0, 0.3),
        8px 8px 16px rgba(0, 0, 0, 0.5), inset -1px -1px 0 rgba(0, 0, 0, 0.3),
        inset 1px 1px 0 rgba(255, 255, 255, 0.1);

    --bevel-raised:
        inset -1px -1px 0 rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.15),
        inset -1px -1px 0 rgba(0, 0, 0, 0.25),
        inset 1px 1px 0 rgba(255, 255, 255, 0.08);

    --bevel-inset:
        inset 1px 1px 0 rgba(0, 0, 0, 0.5),
        inset -1px -1px 0 rgba(255, 255, 255, 0.12),
        inset 1px 1px 0 rgba(0, 0, 0, 0.3),
        inset -1px -1px 0 rgba(255, 255, 255, 0.06);
}

/* =================================================================
   BUTTONS - All variations get chunky raised look
   ================================================================= */

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-action,
.btn-add,
.top-btn,
.btn-send,
.quick-add-btn {
    box-shadow: var(--shadow-raised-strong) !important;
    border-width: 1px !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-action:hover,
.btn-add:hover,
.top-btn:hover,
.btn-send:hover {
    box-shadow:
        -2px -2px 0 rgba(255, 255, 255, 0.2),
        3px 3px 0 rgba(0, 0, 0, 0.8),
        4px 4px 0 rgba(0, 0, 0, 0.7),
        5px 5px 0 rgba(0, 0, 0, 0.6),
        6px 6px 12px rgba(0, 0, 0, 0.6),
        inset -1px -1px 0 rgba(0, 0, 0, 0.5),
        inset 1px 1px 0 rgba(255, 255, 255, 0.25),
        0 0 16px currentColor !important;
    transform: translate(-1px, -1px);
}

button:active,
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-action:active,
.btn-add:active,
.top-btn:active,
.btn-send:active {
    box-shadow: var(--shadow-pressed) !important;
    transform: translate(2px, 2px);
}

/* Disabled buttons - sunken but muted */
button:disabled,
.btn:disabled {
    box-shadow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(255, 255, 255, 0.05) !important;
    opacity: 0.5;
}

/* =================================================================
   INPUTS - Deep inset look like they're carved into the surface
   ================================================================= */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.autocomplete-input,
.custom-select {
    box-shadow: var(--shadow-inset-deep) !important;
    border-width: 1px !important;
}

input:focus,
textarea:focus,
select:focus,
.autocomplete-input:focus,
.custom-select:focus {
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.9),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1),
        0 0 0 3px var(--accent-green),
        0 0 20px rgba(0, 255, 136, 0.4) !important;
}

/* Exception: inputs inside top-search don't get depth */
.top-search input[type="text"] {
    box-shadow: none !important;
    border: none !important;
}

.top-search input:focus {
    box-shadow: none !important;
    border: none !important;
}

/* Search bars - extra deep (container only, input is transparent inside) */
.top-search,
.search-box-large {
    box-shadow:
        var(--shadow-inset-deep),
        inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
    border-width: 1px !important;
}

.top-search:focus-within,
.search-box-large:focus-within {
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.9),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1),
        inset 0 3px 8px rgba(0, 0, 0, 0.5),
        0 0 0 3px var(--accent-green),
        0 0 20px rgba(0, 255, 136, 0.4) !important;
}

/* =================================================================
   PANELS & SURFACES - Layered depth
   ================================================================= */

.top-bar {
    box-shadow:
        var(--shadow-panel-deep),
        0 4px 16px rgba(0, 0, 0, 0.6) !important;
    border-width: 1px !important;
    border-bottom-width: 4px !important;
}

.surface,
.panel,
.modal-content,
.manager-modal,
.insights-panel,
.chat-panel,
.dashboard-widget,
.widget,
.template-card,
.results-section {
    box-shadow: var(--shadow-panel-medium) !important;
    border-width: 1px !important;
}

/* Extra elevated panels */
.modal-content,
.manager-modal {
    box-shadow: var(--shadow-panel-deep) !important;
    border-width: 1px !important;
}

/* =================================================================
   LIST ROWS - Cards that raise on hover
   ================================================================= */

.list-row,
.template-row,
.inspection-row {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.06),
        2px 2px 0 rgba(0, 0, 0, 0.4),
        3px 3px 6px rgba(0, 0, 0, 0.3),
        inset 1px 1px 0 rgba(255, 255, 255, 0.04),
        inset -1px -1px 0 rgba(0, 0, 0, 0.2) !important;
    border-width: 1px !important;
}

.list-row:hover,
.template-row:hover,
.inspection-row:hover {
    box-shadow:
        -2px -2px 0 rgba(255, 255, 255, 0.1),
        4px 4px 0 rgba(0, 0, 0, 0.6),
        5px 5px 0 rgba(0, 0, 0, 0.5),
        6px 6px 12px rgba(0, 0, 0, 0.5),
        inset 1px 1px 0 rgba(255, 255, 255, 0.08),
        inset -1px -1px 0 rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 255, 136, 0.2) !important;
    transform: translate(-2px, -2px);
}

/* =================================================================
   ICONS & BADGES - Embossed and beveled
   ================================================================= */

.icon,
.row-main .icon,
.stat-icon {
    box-shadow:
        var(--bevel-inset),
        2px 2px 4px rgba(0, 0, 0, 0.4) !important;
    border-width: 1px !important;
}

.status,
.badge,
.tag {
    box-shadow:
        var(--bevel-raised),
        2px 2px 0 rgba(0, 0, 0, 0.5),
        3px 3px 6px rgba(0, 0, 0, 0.4) !important;
    border-width: 1px !important;
}

/* =================================================================
   STAT BOXES & WIDGETS - Recessed panels
   ================================================================= */

.stat-box,
.dashboard-card,
.info-panel {
    box-shadow:
        var(--shadow-inset-shallow),
        2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-width: 1px !important;
}

.stat-box:hover,
.dashboard-card:hover {
    box-shadow:
        var(--shadow-inset-shallow),
        2px 2px 4px rgba(0, 0, 0, 0.4),
        0 0 12px currentColor !important;
}

/* =================================================================
   ALERTS & NOTIFICATIONS - Prominent raised blocks
   ================================================================= */

.alert,
.alerts-list li,
.notification,
.toast {
    box-shadow:
        var(--shadow-raised-medium),
        inset 1px 1px 0 rgba(255, 214, 10, 0.15) !important;
    border-width: 1px !important;
}

/* =================================================================
   CHAT BUBBLES - Message depth
   ================================================================= */

.message .bubble,
.chat-bubble {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.08),
        2px 2px 0 rgba(0, 0, 0, 0.5),
        3px 3px 0 rgba(0, 0, 0, 0.4),
        4px 4px 8px rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.06),
        inset -1px -1px 0 rgba(0, 0, 0, 0.3) !important;
    border-width: 1px !important;
}

.message.user .bubble {
    box-shadow:
        var(--bevel-inset),
        3px 3px 0 rgba(0, 0, 0, 0.5),
        4px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.message.ai .bubble {
    box-shadow:
        var(--bevel-raised),
        2px 2px 0 rgba(0, 0, 0, 0.5),
        3px 3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* =================================================================
   NAVIGATION & TABS - Classic raised tab look
   ================================================================= */

nav,
.tabs,
.manager-tabs {
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-width: 1px !important;
}

nav button,
.tab,
.manager-tabs button {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.1),
        1px 0 0 rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.3),
        inset 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-width: 1px !important;
}

nav button:hover,
.tab:hover,
.manager-tabs button:hover {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.15),
        1px 0 0 rgba(0, 0, 0, 0.5),
        2px 2px 6px rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

nav button.active,
.tab.active,
.manager-tabs button.active {
    box-shadow:
        var(--shadow-inset-shallow),
        inset 0 3px 8px rgba(0, 255, 136, 0.15),
        0 -2px 0 var(--surface) !important;
    border-bottom-color: transparent !important;
}

/* =================================================================
   MODALS & OVERLAYS - Floating windows
   ================================================================= */

.modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(3px);
}

.modal,
.popup,
.dropdown-menu {
    box-shadow: var(--shadow-floating) !important;
    border-width: 1px !important;
}

/* =================================================================
   SPECIAL ELEMENTS
   ================================================================= */

/* Help hint - Strong floating button */
.help-hint {
    box-shadow: var(--shadow-floating) !important;
    border-width: 1px !important;
}

.help-hint:hover {
    box-shadow:
        -3px -3px 0 rgba(255, 255, 255, 0.2),
        5px 5px 0 rgba(0, 0, 0, 0.7),
        7px 7px 0 rgba(0, 0, 0, 0.6),
        9px 9px 0 rgba(0, 0, 0, 0.5),
        12px 12px 24px rgba(0, 0, 0, 0.7),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        inset 2px 2px 0 rgba(255, 255, 255, 0.15),
        0 0 24px var(--accent-green) !important;
    transform: translate(-2px, -2px);
}

/* Brand text - Deeply embossed */
.brand h1,
.logo {
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.1),
        2px 2px 0 rgba(0, 0, 0, 0.8),
        3px 3px 0 rgba(0, 0, 0, 0.6),
        4px 4px 8px rgba(0, 0, 0, 0.5),
        0 0 20px currentColor !important;
}

/* =================================================================
   SCROLLBARS - 3D chunky scrollbars
   ================================================================= */

::-webkit-scrollbar {
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.7),
        inset -1px -1px 2px rgba(255, 255, 255, 0.05) !important;
    border-width: 1px !important;
}

::-webkit-scrollbar-thumb {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.15),
        2px 2px 0 rgba(0, 0, 0, 0.6),
        3px 3px 6px rgba(0, 0, 0, 0.5),
        inset -1px -1px 0 rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-width: 1px !important;
}

::-webkit-scrollbar-thumb:hover {
    box-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.2),
        3px 3px 0 rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.6),
        inset -1px -1px 0 rgba(0, 0, 0, 0.5),
        inset 1px 1px 0 rgba(255, 255, 255, 0.2),
        0 0 12px var(--accent-green) !important;
}

::-webkit-scrollbar-thumb:active {
    box-shadow:
        var(--shadow-pressed),
        inset 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

/* =================================================================
   FORM SECTIONS & GROUPS
   ================================================================= */

.form-section,
.form-group,
.field-group,
fieldset {
    box-shadow:
        var(--shadow-inset-shallow),
        2px 2px 0 rgba(255, 255, 255, 0.03) !important;
    border-width: 1px !important;
}

/* Form labels - subtle raise */
label,
.form-label {
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        -1px -1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* =================================================================
   DROPDOWNS & SELECTS
   ================================================================= */

.dropdown,
.select-dropdown,
.autocomplete-dropdown,
.menu {
    box-shadow:
        var(--shadow-panel-deep),
        inset 1px 1px 0 rgba(255, 255, 255, 0.06) !important;
    border-width: 1px !important;
}

.dropdown-item,
.menu-item,
.option {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.03),
        inset -1px -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.dropdown-item:hover,
.menu-item:hover,
.option:hover {
    box-shadow:
        var(--shadow-pressed),
        inset 0 0 8px rgba(0, 255, 136, 0.2) !important;
}

/* =================================================================
   CHECKBOXES & RADIO BUTTONS
   ================================================================= */

input[type="checkbox"],
input[type="radio"] {
    box-shadow:
        var(--shadow-inset-deep),
        1px 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-width: 1px !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    box-shadow:
        var(--shadow-inset-deep),
        inset 0 0 8px var(--accent-green),
        1px 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* =================================================================
   PROGRESS BARS & METERS
   ================================================================= */

progress,
.progress-bar,
meter {
    box-shadow:
        var(--shadow-inset-deep),
        2px 2px 4px rgba(0, 0, 0, 0.4) !important;
    border-width: 1px !important;
}

/* =================================================================
   TABLES
   ================================================================= */

table,
.data-table {
    box-shadow:
        var(--shadow-panel-medium),
        inset 0 0 0 2px rgba(0, 0, 0, 0.3) !important;
    border-width: 1px !important;
}

th,
.table-header {
    box-shadow:
        var(--bevel-raised),
        0 2px 4px rgba(0, 0, 0, 0.4) !important;
    border-width: 1px !important;
}

td,
.table-cell {
    box-shadow:
        inset 1px 0 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* =================================================================
   TOOLTIPS & POPOVERS
   ================================================================= */

.tooltip,
.popover,
.hint {
    box-shadow:
        var(--shadow-floating),
        0 0 20px rgba(0, 0, 0, 0.7) !important;
    border-width: 1px !important;
}

/* =================================================================
   LOADING & SKELETON STATES
   ================================================================= */

.loading,
.skeleton,
.spinner-container {
    box-shadow:
        var(--shadow-inset-shallow),
        1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* =================================================================
   DIVIDERS & SEPARATORS
   ================================================================= */

hr,
.divider,
.separator {
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.08) !important;
    height: 2px !important;
    border: none !important;
}

/* =================================================================
   SMOOTH TRANSITIONS
   ================================================================= */

* {
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease !important;
}

/* Disable transitions on buttons being clicked for immediate feedback */
button:active,
.btn:active {
    transition: none !important;
}

/* =================================================================
   SUBTLE HINTS - Remove depth from non-interactive hint elements
   ================================================================= */

/* Help hint button - make it subtle, not prominent */
.help-hint {
    box-shadow: none !important;
    border-width: 1px !important;
    opacity: 0.6 !important;
}

.help-hint:hover {
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Keyboard hints in forms - completely flat and subtle */
.keyboard-hints,
.keyboard-hints .hint {
    box-shadow: none !important;
    border: none !important;
    opacity: 0.5 !important;
}

/* General hint elements - no depth */
.hint,
.tip,
.tips-section kbd {
    box-shadow: none !important;
    border-width: 1px !important;
    opacity: 0.7 !important;
}