/*
 * Final project-wide visual layer.
 * Loaded after every page stylesheet so legacy module rules cannot split the UI
 * into different themes. Layout and module-specific geometry stay in their own
 * files; this file owns the common palette, surfaces, borders and interactions.
 */

body.app-shell {
    --ui-bg: #10171b;
    --ui-bg-deep: #080d10;
    --ui-surface: rgba(31, 40, 45, .94);
    --ui-surface-soft: rgba(43, 53, 59, .82);
    --ui-surface-raised: rgba(55, 65, 71, .74);
    --ui-panel-border: rgba(209, 216, 222, .25);
    --ui-control-border: rgba(209, 216, 222, .20);
    --ui-input-border: rgba(209, 216, 222, .28);
    --ui-divider: rgba(204, 213, 219, .14);
    --ui-text: #f1f4f5;
    --ui-muted: #a9b5bc;
    --ui-muted-strong: #c5ced3;
    --ui-gold: #e3bd63;
    --ui-gold-border: rgba(232, 190, 94, .60);
    --ui-gold-soft: rgba(227, 189, 99, .13);
    --ui-focus: rgba(232, 196, 105, .72);
    --ui-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, .40), rgba(96, 174, 255, .26), transparent);
    --ui-success: #68dfac;
    --ui-danger: #ff8c8c;
    --ui-info: #9ed6ef;
    --border: var(--ui-panel-border);
    --border-strong: rgba(229, 235, 239, .48);
    --card: var(--ui-surface);
    --card-strong: var(--ui-surface-raised);
    --text: var(--ui-text);
    --muted: var(--ui-muted);
    color: var(--ui-text);
    color-scheme: dark;
    background:
        radial-gradient(circle at 18% 10%, rgba(134, 156, 168, .16), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(79, 102, 113, .10), transparent 30%),
        linear-gradient(145deg, #1b252a 0%, #10171b 48%, #080d10 100%) fixed !important;
}

body.app-shell .app-header,
body.app-shell .app-footer {
    border-color: rgba(141, 158, 167, .32) !important;
    background:
        linear-gradient(180deg, rgba(55, 65, 71, .97), rgba(29, 37, 42, .98) 58%, rgba(21, 28, 32, .99)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 8px 22px rgba(0, 0, 0, .22) !important;
}

body.app-shell .app-footer {
    border-top-color: rgba(141, 158, 167, .25) !important;
    border-bottom: 0 !important;
}

body.app-shell :is(
    .console-panel,
    .hero-panel,
    .auth-panel,
    .admin-panel,
    .tool-panel,
    .module-section,
    .content-panel,
    .shop-panel,
    .maintenance-card
) {
    border-color: var(--ui-panel-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 31%),
        linear-gradient(180deg, rgba(48, 58, 64, .92), rgba(19, 26, 30, .94)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .10), 0 16px 36px rgba(0, 0, 0, .30) !important;
}

body.app-shell :is(
    .console-panel,
    .hero-panel,
    .auth-panel,
    .admin-panel,
    .tool-panel,
    .module-section,
    .content-panel,
    .shop-panel,
    .maintenance-card
)::before {
    background: var(--ui-line) !important;
    box-shadow: 0 0 11px rgba(186, 226, 255, .24) !important;
    opacity: .94 !important;
}

body.app-shell :is(
    .console-panel,
    .hero-panel,
    .auth-panel,
    .admin-panel,
    .tool-panel,
    .module-section,
    .content-panel,
    .shop-panel,
    .maintenance-card
)::after {
    opacity: .10 !important;
    background: repeating-linear-gradient(135deg, #dbe4e9 0 7px, transparent 7px 13px) !important;
}

body.app-shell :is(.page-title, .section-title, .hero-panel h1)::after {
    height: 1px !important;
    border: 0 !important;
    background: var(--ui-line) !important;
    box-shadow: 0 0 11px rgba(186, 226, 255, .24) !important;
    opacity: .92 !important;
}

body.app-shell :is(h1, h2, h3, h4, legend, .page-title, .section-title) {
    color: var(--ui-text);
}

body.app-shell :is(.eyebrow, .helper-text, .page-subtitle, .section-copy, .muted, small) {
    color: var(--ui-muted);
}

/* Common cards and work areas */
body.app-shell :is(
    .mini-card,
    .info-card,
    .stat,
    .module-card,
    .login-form-card,
    .bcm2-eeprom-card,
    .bcm2-eeprom-ident-card,
    .bcm2-clone-extract,
    .bcm2-clone-side,
    .vag-medc17-card,
    .medc17-card,
    .med9-card,
    .med9pc-card,
    .ezs-card,
    .elv-section,
    .elv-editor-card,
    .vdo-card,
    .cp-learn-card,
    .general-immo-off-card,
    .porsche-bcm-card,
    .simos1x-upload-card,
    .simos1x-workspace,
    .frf-main-card,
    .frf-result-card,
    .status-card,
    .security-center-card,
    .decrypt-action-card,
    .imcalc-form-log
) {
    border-color: var(--ui-control-border) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 36%),
        linear-gradient(180deg, rgba(31, 40, 45, .92), rgba(11, 17, 20, .90)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 8px 20px rgba(0, 0, 0, .16) !important;
}

body.app-shell :is(fieldset, .upload-tile, .drop-zone, .file-drop, .input-card, .data-card, .result-card) {
    border-color: var(--ui-control-border) !important;
    background: rgba(7, 12, 15, .42) !important;
}

body.app-shell :is(.upload-tile, .drop-zone, .file-drop):hover,
body.app-shell :is(.upload-tile, .drop-zone, .file-drop):focus-within {
    border-color: var(--ui-gold-border) !important;
    background: linear-gradient(180deg, rgba(227, 189, 99, .09), rgba(7, 12, 15, .54)) !important;
}

/* Consistent form controls */
body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
body.app-shell select,
body.app-shell textarea {
    border-color: var(--ui-input-border) !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(10, 16, 19, .97), rgba(5, 10, 12, .98)) !important;
    color: var(--ui-text) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .42), 0 1px rgba(255, 255, 255, .025) !important;
}

body.app-shell input::placeholder,
body.app-shell textarea::placeholder {
    color: #73828a !important;
    opacity: 1;
}

body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: var(--ui-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(227, 189, 99, .12), inset 0 1px 2px rgba(0, 0, 0, .40) !important;
}

body.app-shell input[type="checkbox"],
body.app-shell input[type="radio"],
body.app-shell input[type="range"] {
    accent-color: var(--ui-gold);
}

body.app-shell input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 1px solid var(--ui-input-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--ui-text);
    background: linear-gradient(180deg, rgba(75, 87, 94, .92), rgba(34, 43, 48, .98));
    cursor: pointer;
}

body.app-shell input[type="file"]::file-selector-button:hover {
    border-color: var(--ui-gold-border);
    color: #fff4d7;
    background: linear-gradient(180deg, rgba(96, 82, 49, .92), rgba(46, 40, 28, .98));
}

/* All standard action controls share one steel resting state. */
body.app-shell :is(
    .app-btn,
    .mini-action,
    .btn-submit,
    .mini-auth-btn,
    .cookie-btn,
    .bcm2-file-button,
    .bcm2-eeprom-button,
    .medc17-button,
    .med9-button,
    .med9pc-button,
    .ezs-button,
    .elv-button,
    .vdo-button,
    .imcalc-form-button
):not(.danger) {
    border-color: rgba(151, 169, 178, .42) !important;
    color: #edf2f4 !important;
    background: linear-gradient(180deg, rgba(75, 87, 94, .90), rgba(34, 43, 48, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .10), 0 3px 8px rgba(0, 0, 0, .16) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

body.app-shell :is(
    .app-btn,
    .mini-action,
    .btn-submit,
    .mini-auth-btn,
    .cookie-btn,
    .bcm2-file-button,
    .bcm2-eeprom-button,
    .medc17-button,
    .med9-button,
    .med9pc-button,
    .ezs-button,
    .elv-button,
    .vdo-button,
    .imcalc-form-button
):not(.danger):hover,
body.app-shell :is(
    .app-btn,
    .mini-action,
    .btn-submit,
    .mini-auth-btn,
    .cookie-btn,
    .bcm2-file-button,
    .bcm2-eeprom-button,
    .medc17-button,
    .med9-button,
    .med9pc-button,
    .ezs-button,
    .elv-button,
    .vdo-button,
    .imcalc-form-button
):not(.danger):focus-visible {
    border-color: var(--ui-gold-border) !important;
    color: #fff5dc !important;
    background: linear-gradient(180deg, rgba(103, 87, 51, .96), rgba(46, 40, 28, .99)) !important;
    box-shadow: 0 0 0 2px rgba(227, 189, 99, .11), inset 0 1px rgba(255, 255, 255, .12) !important;
}

body.app-shell :is(.app-btn, .mini-action, button).danger {
    border-color: rgba(255, 118, 118, .62) !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(174, 45, 45, .96), rgba(116, 25, 25, .98)) !important;
}

body.app-shell :is(.app-btn, .mini-action, button):disabled,
body.app-shell :is(.app-btn, .mini-action, button)[aria-disabled="true"] {
    opacity: .48;
    filter: saturate(.55);
    cursor: not-allowed;
}

/* Tables, logs, tabs and status feedback */
body.app-shell :is(table, .table-wrap, .admin-table-wrap) {
    border-color: var(--ui-control-border) !important;
}

body.app-shell :is(th, .table-head, .imcalc-form-log-head) {
    border-color: var(--ui-divider) !important;
    background: rgba(53, 64, 70, .68) !important;
    color: var(--ui-muted-strong) !important;
}

body.app-shell td {
    border-color: var(--ui-divider) !important;
}

body.app-shell tbody tr:hover {
    background: rgba(132, 164, 178, .075);
}

body.app-shell :is(.log-box, .console-output, .imcalc-form-log-body, pre, code) {
    border-color: var(--ui-control-border) !important;
    background: rgba(4, 9, 11, .86) !important;
    color: #c5d5dc !important;
}

body.app-shell :is(.tabs, .tab-list, .segmented-control) {
    border-color: var(--ui-control-border) !important;
    background: rgba(7, 12, 15, .55) !important;
}

body.app-shell :is(.tab, .tab-button, .segment):hover,
body.app-shell :is(.tab, .tab-button, .segment).active,
body.app-shell :is(.tab, .tab-button, .segment)[aria-selected="true"] {
    border-color: var(--ui-gold-border) !important;
    color: #fff2ce !important;
    background: var(--ui-gold-soft) !important;
}

body.app-shell :is(.alert, .notice, .message, .status-message) {
    border-color: var(--ui-control-border) !important;
    background: rgba(15, 23, 27, .90) !important;
}

body.app-shell :is(.alert.success, .notice.success, .message.success, .status-message.success) {
    border-color: rgba(81, 205, 152, .50) !important;
    color: #b7f6d9 !important;
    background: rgba(21, 74, 57, .31) !important;
}

body.app-shell :is(.alert.danger, .alert.error, .notice.danger, .notice.error, .message.error, .status-message.error) {
    border-color: rgba(255, 118, 118, .58) !important;
    color: #ffd0d0 !important;
    background: rgba(98, 28, 31, .38) !important;
}

body.app-shell :is(.alert.info, .notice.info, .message.info, .status-message.info) {
    border-color: rgba(113, 181, 211, .45) !important;
    color: #cbeaf7 !important;
    background: rgba(26, 65, 82, .34) !important;
}

body.app-shell a:not(.app-btn):not(.mini-action) {
    text-decoration-color: rgba(227, 189, 99, .42);
}

body.app-shell a:not(.app-btn):not(.mini-action):hover {
    color: #f2ce7b;
    text-decoration-color: currentColor;
}

body.app-shell ::selection {
    color: #fff9e9;
    background: rgba(164, 125, 42, .72);
}

@media (max-width: 760px) {
    body.app-shell :is(
        .console-panel,
        .hero-panel,
        .auth-panel,
        .admin-panel,
        .tool-panel,
        .module-section,
        .content-panel,
        .shop-panel,
        .maintenance-card
    ) {
        border-radius: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}