/**
 * Reusable Framework CSS
 * Can be used in any project - uses CSS custom properties for theming
 */

/* CSS Variables — Adobe XD design system (source) + legacy aliases */
:root {
    /* Brand */
    --color-primary: #65BDC6;
    --color-navy: #22295C;
    --color-white: #FFFFFF;
    --color-bg-page: #EEF2F7;
    --color-bg-card: #FFFFFF;
    --color-bg-sidebar: #FFFFFF;
    --color-bg-active: #22295C;
    --color-text-main: #22295C;
    --color-text-on-primary: #FFFFFF;
    --color-text-muted: #22295C;
    --color-border: #E0E8F0;
    --color-icon-idle: #65BDC6;
    --color-icon-active: #FFFFFF;

    /* Semantic states (variables only; not page chrome colors) */
    --color-danger: #991b1b;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-success: #065f46;
    --color-success-bg: #d1fae5;
    --color-success-border: #6ee7b7;
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    --color-warning-border: #fcd34d;
    --color-info: #1e40af;
    --color-info-bg: #dbeafe;
    --color-info-border: #93c5fd;

    /* Typography */
    --font-main: 'Roboto', sans-serif;
    --font-size-page-title: 16px;
    --font-size-nav: 14px;
    --font-size-body: 14px;
    --font-size-small: 14px;
    --font-size-sidebar-section: 12px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Spacing & radius */
    --radius-card: 12px;
    --radius-btn: 6px;
    --radius-pill: 20px;
    --radius-icon-btn: 8px;
    --sidebar-width-expanded: 210px;
    --sidebar-width-collapsed: 60px;
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.1);

    /* Legacy framework aliases → design tokens */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary);
    --secondary-color: var(--color-border);
    --secondary-hover: var(--color-bg-page);
    --success-color: var(--color-success);
    --error-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);

    --text-primary: var(--color-text-main);
    --text-secondary: var(--color-text-muted);
    --text-muted: var(--color-text-muted);
    --label-color: var(--color-text-main);

    --bg-primary: var(--color-bg-card);
    --bg-secondary: var(--color-bg-page);
    --bg-hover: var(--color-bg-page);

    --border-color: var(--color-border);
    --input-border-color: var(--color-border);
    --input-focus-border-color: var(--color-primary);
    --border-subtle: var(--color-border);

    --table-header-bg: var(--color-bg-page);
    --table-header-color: var(--color-text-main);
    --table-border-color: var(--color-border);
    --table-row-hover-bg: var(--color-bg-page);
    --table-font-size: var(--font-size-small);
    --table-cell-padding: 0.35rem;
    --table-max-height: calc(100vh - 235px);

    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover-bg: var(--color-navy);
    --btn-primary-color: var(--color-text-on-primary);
    --btn-secondary-bg: var(--color-bg-card);
    --btn-secondary-hover-bg: var(--color-bg-page);
    --btn-secondary-color: var(--color-text-main);

    --input-disabled-bg: var(--color-bg-page);
    --input-disabled-color: #7A8599;

    --toast-success-bg: var(--color-success);
    --toast-success-color: var(--color-white);
    --toast-error-bg: var(--color-danger);
    --toast-error-color: var(--color-white);
    --toast-warning-bg: var(--color-warning);
    --toast-warning-color: var(--color-white);
    --toast-info-bg: var(--color-primary);
    --toast-info-color: var(--color-white);

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --border-radius-sm: var(--radius-btn);
    --border-radius-md: 8px;
    --border-radius-lg: var(--radius-card);
    --border-radius-full: 50%;

    --shadow-sm: var(--shadow-card);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-dropdown);

    --transition-fast: 0.15s;
    --transition-medium: 0.25s;
    --transition-slow: 0.5s;

    --font-size-xs: 12px;
    --font-size-sm: var(--font-size-small);
    --font-size-base: var(--font-size-body);
    --font-size-md: var(--font-size-body);
    --font-size-lg: var(--font-size-nav);

    --radius-md: var(--radius-btn);
}

@supports (color: color-mix(in srgb, white, black)) {
    :root {
        --primary-hover: color-mix(in srgb, var(--color-primary) 88%, var(--color-navy));
        --btn-primary-hover-bg: color-mix(in srgb, var(--color-primary) 82%, var(--color-navy));
    }
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html {
    font-family: var(--font-main);
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    overflow: hidden;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent common embeds and layout wrappers from forcing page-wide overflow */
img,
video,
iframe,
table,
.admin-table-wrap,
[class*="card"],
[class*="row"],
[class*="container"],
[class*="wrap"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Utility classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Container utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.container-fluid {
    width: 100%;
    padding: var(--spacing-md);
}

/* Flex utilities */
.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

/* Button styles */
.btn {
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color var(--transition-fast);
    font-family: var(--font-main);
}

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

.btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover-bg);
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--color-primary);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-md);
}

/* Card styles */
.card {
    background: var(--bg-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.card-header {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

/* Form styles */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--label-color);
}

.form-input,
.form-select,
.form-textarea {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-main);
    background: var(--bg-primary);
    min-height:0px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--input-focus-border-color);
}

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

/* Loading indicator */
.loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.loading::after {
    content: '...';
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Error message */
.error {
    padding: 0.75rem;
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-base);
}

/* Success message */
.success {
    padding: 0.75rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-success);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-base);
}

/* Alert styles */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
}

.alert-info {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    color: var(--color-info);
}

.alert-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning);
}

.alert-danger {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
}

.alert-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-body);
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    background: var(--secondary-color);
    color: var(--text-primary);
}

.badge-primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.badge-success {
    background: var(--color-success);
    color: var(--color-white);
}

.badge-error {
    background: var(--color-danger);
    color: var(--color-white);
}

.badge-warning {
    background: var(--color-warning);
    color: var(--color-white);
}

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* Responsive utilities */
@media (max-width: 576px) {
    body {
        overflow: auto;
    }
    
    .container {
        padding: var(--spacing-sm);
    }
    
    .btn {
        min-height: 44px;
        padding: 0.75rem 0.8rem;
    }
    
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    body {
        overflow: auto;
    }
    
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 993px) {
    .hide-desktop {
        display: none !important;
    }
}