/*
© 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.
*/
/**
 * Mobile Probler - Base Styles
 * CSS Variables, resets, and utilities
 */

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

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

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

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

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

:root {
    /* Safe area insets */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);

    /* Probler Theme Colors — aligned with desktop */
    --layer8d-primary: #0ea5e9;
    --layer8d-primary-dark: #0284c7;
    --layer8d-primary-light: #38bdf8;
    --layer8d-secondary: #06b6d4;

    /* Text Colors — aligned with desktop warm neutrals */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-dim: #94a3b8;
    --text-light: #ffffff;

    /* Background Colors — warm neutrals from desktop */
    --bg-primary: #fcfbf8;
    --bg-secondary: #f7f6f2;
    --bg-tertiary: #f1eee8;
    --bg-elevated: #fdfcf9;
    --bg-card: #ffffff;

    /* Border Colors — warm tones from desktop */
    --border-light: #ddd7ce;
    --border-default: #c8c0b4;
    --border-emphasis: #94a3b8;

    /* Status Colors — aligned with desktop */
    --status-active: #00c853;
    --status-active-bg: #dcfce7;
    --status-pending: #ffc107;
    --status-pending-bg: #fef3c7;
    --status-inactive: #757575;
    --status-inactive-bg: #f1f5f9;
    --status-terminated: #ff3d00;
    --status-terminated-bg: #fee2e2;
    --status-info: #2196f3;
    --status-info-bg: #dbeafe;

    /* Spacing (8px baseline) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Touch targets */
    --touch-target: 48px;
    --header-height: 56px;
    --bottom-nav-height: 64px;

    /* Typography */
    --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;

    /* Font Weights */
    --font-weight-normal: 400;   /* Regular - for input text, body content */
    --font-weight-medium: 500;   /* Medium - for labels */
    --font-weight-semibold: 600; /* SemiBold - for headers, buttons */

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-secondary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-bottom: var(--sab);
}

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main Content Area */
.main-content {
    flex: 1;
    padding-top: calc(var(--header-height) + var(--sat));
    padding-bottom: var(--sab);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#content-area {
    min-height: calc(100vh - var(--header-height) - var(--sat) - var(--sab));
    padding: var(--spacing-md);
}

/* Utility Classes */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

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

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

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

/* Buttons */
button, .btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    height: var(--touch-target);
    padding: 0 var(--spacing-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border: none;
    transition: all var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-primary {
    background: var(--layer8d-primary);
    color: var(--text-light);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--status-terminated);
    color: var(--text-light);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

.btn-full {
    width: 100%;
}

/* Focus states */
a:focus, button:focus {
    outline: 2px solid var(--layer8d-primary);
    outline-offset: 2px;
}

/* Loading spinner */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    gap: var(--spacing-sm);
}

.loading::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-light);
    border-top-color: var(--layer8d-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Loading overlay */
.mobile-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    z-index: 100;
}

.mobile-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--layer8d-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.mobile-loading-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Toast notifications */
.mobile-toast {
    position: fixed;
    bottom: calc(var(--sab) + var(--spacing-lg));
    left: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
    z-index: 2000;
    transform: translateY(100px);
    opacity: 0;
    transition: all var(--transition-normal);
}

.mobile-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.mobile-toast-success {
    background: var(--status-active);
    color: white;
}

.mobile-toast-error {
    background: var(--status-terminated);
    color: white;
}

.mobile-toast-info {
    background: var(--status-info);
    color: white;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.empty-state-message {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Section container */
.section-container {
    background: var(--bg-secondary);
    min-height: 100%;
}

/* Card */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.card-body {
    padding: var(--spacing-md);
}

.card-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
}

/* Safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}