/**
 * Portal Core — Shared Styles
 * Version: 0.2.0
 *
 * Provides CSS custom properties and base utility classes used across
 * portal-core and portal-dashboard. No component-specific styles here.
 */

/* =========================================================
   CSS Custom Properties
   ========================================================= */
:root {
    --portal-colour-primary:       #F79239;
    --portal-colour-primary-dark:  #d4651a;
    --portal-colour-primary-light: #fff3e6;
    --portal-colour-accent:        #F79239;
    --portal-colour-success:       #1a7f37;
    --portal-colour-warning:       #9a6700;
    --portal-colour-danger:        #cf222e;
    --portal-colour-text:          #1c2331;
    --portal-colour-text-muted:    #57606a;
    --portal-colour-border:        #d0d7de;
    --portal-colour-bg:            #f6f8fa;
    --portal-colour-bg-muted:      #eaeef2;
    --portal-colour-white:         #ffffff;
    --portal-colour-surface:       #ffffff;

    --portal-radius:     6px;
    --portal-radius-sm:  4px;
    --portal-shadow:     0 1px 4px rgba(27, 31, 36, 0.12);
    --portal-shadow-sm:  0 1px 2px rgba(27, 31, 36, 0.08);

    --portal-font-base:  1rem;
    --portal-font-sm:    0.875rem;
    --portal-font-lg:    1.125rem;

    --portal-space-xs:   0.25rem;
    --portal-space-sm:   0.5rem;
    --portal-space-md:   1rem;
    --portal-space-lg:   1.5rem;
    --portal-space-xl:   2rem;
}

/* =========================================================
   Shared Utility Classes
   ========================================================= */

/* Wrapper */
.portal-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--portal-space-lg) var(--portal-space-md);
    font-family: inherit;
    color: var(--portal-colour-text);
}

/* Loading state */
.portal-loading {
    display: flex;
    align-items: center;
    gap: var(--portal-space-sm);
    color: var(--portal-colour-text-muted);
    font-size: var(--portal-font-sm);
}

.portal-loading::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--portal-colour-border);
    border-top-color: var(--portal-colour-accent);
    border-radius: 50%;
    animation: portal-spin 0.7s linear infinite;
}

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

/* Notice / alert boxes */
.portal-notice {
    padding: var(--portal-space-sm) var(--portal-space-md);
    border-left: 4px solid var(--portal-colour-accent);
    background: var(--portal-colour-surface);
    border-radius: var(--portal-radius-sm);
    font-size: var(--portal-font-sm);
    margin-bottom: var(--portal-space-md);
    color: var(--portal-colour-text);
}

.portal-notice--success { border-left-color: var(--portal-colour-success); }
.portal-notice--warning { border-left-color: var(--portal-colour-warning); }
.portal-notice--error   { border-left-color: var(--portal-colour-danger);  }

/* Generic card */
.portal-card {
    background: var(--portal-colour-surface);
    border: 1px solid var(--portal-colour-border);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow-sm);
    padding: var(--portal-space-lg);
    color: var(--portal-colour-text);
}

/* Buttons */
.portal-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: var(--portal-radius);
    border: none;
    cursor: pointer;
    font-size: var(--portal-font-base);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.portal-btn--primary {
    background: var(--portal-colour-primary);
    color: var(--portal-colour-white);
}

.portal-btn--primary:hover,
.portal-btn--primary:focus {
    background: var(--portal-colour-primary-dark);
    color: var(--portal-colour-white);
}

.portal-btn--secondary {
    background: var(--portal-colour-white);
    color: var(--portal-colour-text);
    border: 1px solid var(--portal-colour-border);
}

.portal-btn--secondary:hover,
.portal-btn--secondary:focus {
    background: var(--portal-colour-bg);
    color: var(--portal-colour-text);
}

.portal-btn:disabled,
.portal-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form elements */
.portal-form-row {
    margin-bottom: var(--portal-space-md);
}

.portal-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--portal-space-xs);
    font-size: var(--portal-font-sm);
    color: var(--portal-colour-text);
}

.portal-form-row input[type="text"],
.portal-form-row input[type="email"],
.portal-form-row input[type="url"],
.portal-form-row input[type="date"],
.portal-form-row textarea,
.portal-form-row select {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--portal-colour-border);
    border-radius: var(--portal-radius-sm);
    font-size: var(--portal-font-base);
    background: var(--portal-colour-bg-muted);
    color: var(--portal-colour-text);
}

.portal-form-row input[type="text"]:focus,
.portal-form-row input[type="email"]:focus,
.portal-form-row input[type="url"]:focus,
.portal-form-row input[type="date"]:focus,
.portal-form-row textarea:focus,
.portal-form-row select:focus {
    outline: none;
    border-color: var(--portal-colour-primary);
    box-shadow: 0 0 0 2px rgba(247, 146, 57, 0.20);
}

.portal-form-row textarea {
    resize: vertical;
    min-height: 120px;
}

.portal-form-row .portal-field-description {
    font-size: var(--portal-font-sm);
    color: var(--portal-colour-text-muted);
    margin-top: var(--portal-space-xs);
}

/* Screen-reader only */
.portal-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;
}