/*
© 2025 Sharon Aicler (saichler@gmail.com)

Layer 8 Ecosystem is licensed under the Apache License, Version 2.0.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/**
 * Layer 8 Shared Theme
 * CSS variables and base styles for consistent look & feel
 */

/* ============================================ */
/* FIGTREE FONT FACES */
/* ============================================ */

@font-face {
    font-family: 'Figtree';
    src: url('../font/static/Figtree-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('../font/static/Figtree-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('../font/static/Figtree-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('../font/static/Figtree-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================ */
/* UNIVERSAL RESET */
/* ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================ */
/* CSS VARIABLES                                */
/* Token definitions are in layer8d-theme-tokens.css */
/* This file defines bridge aliases + shared classes */
/* ============================================ */

:root {
    /* ============================================ */
    /* BRIDGE ALIASES                               */
    /* Old variable names → canonical tokens.       */
    /* Dark mode works automatically via aliases.   */
    /* Do NOT remove — consumed by l8ui mobile CSS, */
    /* login, register, and project-specific files. */
    /* ============================================ */

    /* View component aliases */
    --accent-color: var(--layer8d-primary);
    --accent-bg: rgba(0, 0, 0, 0.05);
    --border-color: var(--layer8d-border);

    /* --noc-* aliases (login, register, scrollbar) */
    --noc-cyan: var(--layer8d-primary);
    --noc-cyan-dark: var(--layer8d-primary-dark);
    --noc-green: var(--layer8d-success);
    --noc-charcoal: var(--layer8d-bg-input);

    /* --text-* aliases (login, register, mobile, portal) */
    --text-primary: var(--layer8d-text-dark);
    --text-secondary: var(--layer8d-text-medium);
    --text-muted: var(--layer8d-text-muted);
    --text-light: var(--layer8d-text-light);
    --text-tertiary: var(--layer8d-text-light);
    --text-dim: var(--layer8d-text-light);

    /* --bg-* aliases (login, register, mobile) */
    --bg-primary: var(--layer8d-bg-white);
    --bg-secondary: var(--layer8d-bg-light);
    --bg-tertiary: var(--layer8d-bg-input);
    --bg-card: var(--layer8d-bg-card);
    --bg-elevated: var(--layer8d-bg-card);
    --bg-input: var(--layer8d-bg-input);

    /* --border-* aliases (login, register, mobile, popup) */
    --border: var(--layer8d-border);
    --border-subtle: var(--layer8d-border);
    --border-default: var(--layer8d-border-dark);
    --border-emphasis: var(--layer8d-border-dark);
    --border-light: var(--layer8d-border);
    --popup-border: var(--layer8d-border-dark);

    /* --shadow-* aliases */
    --shadow-sm: var(--layer8d-shadow-sm);
    --shadow-md: var(--layer8d-shadow-md);
    --shadow-lg: var(--layer8d-shadow-lg);

    /* --primary aliases (mobile datepicker, reference picker) */
    --primary: var(--layer8d-primary);
    --primary-dark: var(--layer8d-primary-dark);

    /* --surface-* aliases (mobile datepicker, reference picker) */
    --surface-elevated: var(--layer8d-bg-card);

    /* --status-* aliases (mobile components) */
    --status-active: var(--layer8d-success);
    --status-active-bg: var(--layer8d-success-bg);
    --status-pending: var(--layer8d-warning);
    --status-pending-bg: var(--layer8d-warning-bg);
    --status-terminated: var(--layer8d-error);
    --status-terminated-bg: var(--layer8d-error-bg);
    --status-info: var(--layer8d-info);
    --status-info-bg: var(--layer8d-info-bg);
    --status-inactive: var(--layer8d-text-muted);
    --status-inactive-bg: var(--layer8d-gray-light-bg);
}

/* Dark mode bridge override (non-token aliases) */
[data-theme="dark"] {
    --accent-bg: rgba(0, 0, 0, 0.07);
}

/* ============================================ */
/* STATUS BADGES */
/* ============================================ */

.layer8d-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--layer8d-radius-sm);
    font-size: var(--layer8d-font-xs);
    font-weight: 600;
    font-family: var(--layer8d-font-family);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.layer8d-status-active {
    background: var(--layer8d-success-bg);
    color: var(--layer8d-success);
}

.layer8d-status-pending {
    background: var(--layer8d-warning-bg);
    color: var(--layer8d-warning);
}

.layer8d-status-inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.layer8d-status-terminated {
    background: var(--layer8d-error-bg);
    color: var(--layer8d-error);
}

.layer8d-status-info {
    background: var(--layer8d-info-bg);
    color: var(--layer8d-info);
}

/* ============================================ */
/* TAGS */
/* ============================================ */

.layer8d-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--layer8d-radius-sm);
    font-size: var(--layer8d-font-xs);
    font-weight: 500;
    background: var(--layer8d-bg-input);
    color: var(--layer8d-text-medium);
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */

.layer8d-empty {
    color: var(--layer8d-text-light);
    font-style: italic;
}

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

.layer8d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--layer8d-space-sm);
    padding: 12px 24px;
    border: none;
    border-radius: var(--layer8d-radius-md);
    font-size: 13px;
    font-weight: var(--layer8d-font-weight-semibold);
    font-family: var(--layer8d-font-family);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.layer8d-btn-primary {
    background: var(--layer8d-primary);
    color: white;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}

.layer8d-btn-primary:hover {
    background: var(--layer8d-primary-dark);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.25);
    transform: translateY(-1px);
}

.layer8d-btn-secondary {
    background: var(--layer8d-bg-white);
    color: var(--layer8d-text-medium);
    border: 1px solid var(--layer8d-border);
}

.layer8d-btn-secondary:hover {
    background: var(--layer8d-bg-light);
    border-color: var(--layer8d-border-dark);
    color: var(--layer8d-text-dark);
}

.layer8d-btn-danger {
    background: var(--layer8d-error);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.layer8d-btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.layer8d-btn-small {
    padding: 8px 16px;
    font-size: var(--layer8d-font-sm);
}

/* ============================================ */
/* FORM ELEMENTS */
/* ============================================ */

.layer8d-form-group {
    margin-bottom: var(--layer8d-space-lg);
}

.layer8d-form-group:last-child {
    margin-bottom: 0;
}

.layer8d-form-label {
    display: block;
    margin-bottom: var(--layer8d-space-sm);
    font-weight: var(--layer8d-font-weight-medium);
    font-size: 13px;
    color: var(--layer8d-text-label);
    font-family: var(--layer8d-font-family);
}

.layer8d-form-input,
.layer8d-form-select,
.layer8d-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--layer8d-border);
    border-radius: var(--layer8d-radius-md);
    font-size: var(--layer8d-font-base);
    font-family: var(--layer8d-font-family);
    color: var(--layer8d-text-dark);
    background: var(--layer8d-bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.layer8d-form-input:focus,
.layer8d-form-select:focus,
.layer8d-form-textarea:focus {
    outline: none;
    border-color: var(--layer8d-primary);
    box-shadow: var(--layer8d-focus-ring);
}

.layer8d-form-input:disabled,
.layer8d-form-select:disabled,
.layer8d-form-textarea:disabled {
    background: var(--layer8d-bg-input);
    color: var(--layer8d-text-muted);
    cursor: not-allowed;
}

.layer8d-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--layer8d-space-lg);
}

/* ============================================ */
/* CARDS */
/* ============================================ */

.layer8d-card {
    background: var(--layer8d-bg-white);
    border: 1px solid var(--layer8d-border);
    border-radius: var(--layer8d-radius-lg);
    padding: var(--layer8d-space-lg);
}

.layer8d-card-header {
    font-size: var(--layer8d-font-lg);
    font-weight: var(--layer8d-font-weight-semibold);
    font-family: var(--layer8d-font-family);
    color: var(--layer8d-primary);
    margin-bottom: var(--layer8d-space-md);
    padding-bottom: var(--layer8d-space-sm);
    border-bottom: 1px solid var(--layer8d-border);
}

/* ============================================ */
/* THEME PICKER DROPDOWN                        */
/* ============================================ */

.layer8d-theme-picker {
    position: relative;
    display: inline-block;
}

.layer8d-theme-btn {
    background: none;
    border: 1px solid var(--layer8d-border);
    border-radius: var(--layer8d-radius-md);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--layer8d-text-medium);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.layer8d-theme-btn:hover {
    color: var(--layer8d-primary);
    border-color: var(--layer8d-primary);
}

.layer8d-theme-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--layer8d-bg-white);
    border: 1px solid var(--layer8d-border);
    border-radius: var(--layer8d-radius-md);
    box-shadow: var(--layer8d-shadow-lg);
    z-index: 9999;
    min-width: 170px;
    padding: 6px;
}

.layer8d-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--layer8d-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    color: var(--layer8d-text-dark);
    font-size: 13px;
    font-family: var(--layer8d-font-family);
}

.layer8d-theme-option:hover {
    background: var(--layer8d-bg-hover);
}

.layer8d-theme-option.active {
    background: var(--layer8d-bg-light);
    font-weight: 600;
}

.layer8d-theme-swatches {
    display: flex;
    gap: 3px;
}

.layer8d-theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.layer8d-theme-label {
    flex: 1;
}

.layer8d-theme-check {
    color: var(--layer8d-primary);
    font-size: 14px;
    font-weight: 700;
}

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

@media (max-width: 768px) {
    .layer8d-form-row {
        grid-template-columns: 1fr;
    }
}