/* ============================================================
   Stanpers PrimeSpace — Unified Design System
   ============================================================
   Single source of truth for colors, typography, spacing,
   buttons, badges, cards, and layout utilities.
   Include BEFORE template-specific styles.
   ============================================================ */

/* ---------- Design Tokens (CSS Custom Properties) ---------- */
:root {
    /* Brand colors */
    --ps-primary:        #667eea;
    --ps-primary-dark:   #5568d3;
    --ps-primary-darker: #4452b3;
    --ps-secondary:      #764ba2;
    --ps-gradient:       linear-gradient(135deg, #667eea, #764ba2);

    /* Semantic colors */
    --ps-success:        #28a745;
    --ps-success-dark:   #218838;
    --ps-danger:         #dc3545;
    --ps-danger-dark:    #c82333;
    --ps-warning:        #f59e0b;
    --ps-warning-dark:   #d97706;
    --ps-info:           #0ea5e9;
    --ps-info-dark:      #0284c7;

    /* Accent palette */
    --ps-purple:         #8b5cf6;
    --ps-purple-dark:    #7c3aed;
    --ps-teal:           #14b8a6;
    --ps-orange:         #f97316;

    /* Neutral palette */
    --ps-gray-50:        #f9fafb;
    --ps-gray-100:       #f3f4f6;
    --ps-gray-200:       #e5e7eb;
    --ps-gray-300:       #d1d5db;
    --ps-gray-400:       #9ca3af;
    --ps-gray-500:       #6b7280;
    --ps-gray-600:       #4b5563;
    --ps-gray-700:       #374151;
    --ps-gray-800:       #1f2937;
    --ps-gray-900:       #111827;

    /* Semantic background tints */
    --ps-primary-bg:     #e8edf8;
    --ps-success-bg:     #d1fae5;
    --ps-success-text:   #065f46;
    --ps-danger-bg:      #fee2e2;
    --ps-danger-text:    #991b1b;
    --ps-warning-bg:     #fef3c7;
    --ps-warning-text:   #92400e;
    --ps-info-bg:        #dbeafe;
    --ps-info-text:      #1e40af;
    --ps-purple-bg:      #ede9fe;
    --ps-purple-text:    #5b21b6;

    /* Typography */
    --ps-font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                         'Helvetica Neue', Arial, sans-serif;
    --ps-font-xs:        11px;
    --ps-font-sm:        12px;
    --ps-font-base:      13px;
    --ps-font-md:        14px;
    --ps-font-lg:        15px;
    --ps-font-xl:        16px;
    --ps-font-2xl:       18px;
    --ps-font-3xl:       22px;
    --ps-font-4xl:       28px;
    --ps-line-height:    1.5;

    /* Spacing scale */
    --ps-space-1:  4px;
    --ps-space-2:  8px;
    --ps-space-3:  12px;
    --ps-space-4:  16px;
    --ps-space-5:  20px;
    --ps-space-6:  24px;
    --ps-space-8:  32px;
    --ps-space-10: 40px;

    /* Border radius */
    --ps-radius-sm:   4px;
    --ps-radius-md:   6px;
    --ps-radius-lg:   8px;
    --ps-radius-xl:   12px;
    --ps-radius-pill:  20px;
    --ps-radius-full:  999px;

    /* Shadows */
    --ps-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --ps-shadow-md:  0 2px 8px rgba(0,0,0,0.08);
    --ps-shadow-lg:  0 4px 16px rgba(0,0,0,0.10);
    --ps-shadow-xl:  0 8px 30px rgba(0,0,0,0.12);

    /* Transitions */
    --ps-transition: 0.2s ease;
}


/* ---------- Base Typography ---------- */
/* Global font override — ensures all pages use the design system font
   regardless of inline font-family declarations in templates */
body,
body * {
    font-family: var(--ps-font-family) !important;
}

/* Preserve emoji/icon rendering */
body .emoji, body [role="img"] {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.ps-page {
    font-family: var(--ps-font-family);
    color: var(--ps-gray-800);
    line-height: var(--ps-line-height);
}


/* ---------- Buttons ---------- */
/* Base button */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--ps-font-family);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ps-transition);
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}
.ps-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.ps-btn:active {
    transform: translateY(0);
}

/* Button sizes */
.ps-btn-xs {
    padding: 4px 10px;
    font-size: var(--ps-font-sm);
    border-radius: var(--ps-radius-sm);
}
.ps-btn-sm {
    padding: 6px 12px;
    font-size: var(--ps-font-base);
    border-radius: var(--ps-radius-md);
}
.ps-btn-md {
    padding: 8px 16px;
    font-size: var(--ps-font-base);
    border-radius: var(--ps-radius-md);
}
.ps-btn-lg {
    padding: 10px 20px;
    font-size: var(--ps-font-lg);
    border-radius: var(--ps-radius-lg);
}
.ps-btn-xl {
    padding: 12px 24px;
    font-size: var(--ps-font-xl);
    border-radius: var(--ps-radius-lg);
}

/* Button colors */
.ps-btn-primary {
    background: var(--ps-primary);
    color: #fff;
}
.ps-btn-primary:hover { background: var(--ps-primary-dark); color: #fff; }

.ps-btn-gradient {
    background: var(--ps-gradient);
    color: #fff;
}
.ps-btn-gradient:hover { filter: brightness(1.08); color: #fff; }

.ps-btn-success {
    background: var(--ps-success);
    color: #fff;
}
.ps-btn-success:hover { background: var(--ps-success-dark); color: #fff; }

.ps-btn-danger {
    background: var(--ps-danger);
    color: #fff;
}
.ps-btn-danger:hover { background: var(--ps-danger-dark); color: #fff; }

.ps-btn-warning {
    background: var(--ps-warning);
    color: #fff;
}
.ps-btn-warning:hover { background: var(--ps-warning-dark); color: #fff; }

.ps-btn-info {
    background: var(--ps-info);
    color: #fff;
}
.ps-btn-info:hover { background: var(--ps-info-dark); color: #fff; }

.ps-btn-purple {
    background: var(--ps-purple);
    color: #fff;
}
.ps-btn-purple:hover { background: var(--ps-purple-dark); color: #fff; }

.ps-btn-orange {
    background: var(--ps-orange);
    color: #fff;
}
.ps-btn-orange:hover { background: #ea580c; color: #fff; }

.ps-btn-gray {
    background: var(--ps-gray-500);
    color: #fff;
}
.ps-btn-gray:hover { background: var(--ps-gray-600); color: #fff; }

/* Outline buttons */
.ps-btn-outline-primary {
    background: transparent;
    color: var(--ps-primary);
    border: 1.5px solid var(--ps-primary);
}
.ps-btn-outline-primary:hover { background: var(--ps-primary); color: #fff; }

.ps-btn-outline-info {
    background: var(--ps-info-bg);
    color: var(--ps-info);
    border: 1.5px solid var(--ps-info);
}
.ps-btn-outline-info:hover { background: var(--ps-info); color: #fff; }

.ps-btn-outline-success {
    background: transparent;
    color: var(--ps-success);
    border: 1.5px solid var(--ps-success);
}
.ps-btn-outline-success:hover { background: var(--ps-success); color: #fff; }

.ps-btn-outline-danger {
    background: transparent;
    color: var(--ps-danger);
    border: 1.5px solid var(--ps-danger);
}
.ps-btn-outline-danger:hover { background: var(--ps-danger); color: #fff; }

/* Gradient button variants */
.ps-btn-grad-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    box-shadow: 0 2px 6px rgba(40,167,69,0.3);
}
.ps-btn-grad-success:hover { filter: brightness(1.08); color: #fff; }

.ps-btn-grad-purple {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
.ps-btn-grad-purple:hover { filter: brightness(1.08); color: #fff; }

.ps-btn-grad-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217,119,6,0.3);
}
.ps-btn-grad-orange:hover { filter: brightness(1.08); color: #fff; }

.ps-btn-grad-blue {
    background: linear-gradient(135deg, #1565C0, #1976D2);
    color: #fff;
    box-shadow: 0 2px 6px rgba(21,101,192,0.3);
}
.ps-btn-grad-blue:hover { filter: brightness(1.08); color: #fff; }

.ps-btn-grad-danger {
    background: linear-gradient(135deg, #dc3545, #ee5a24);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220,53,69,0.3);
}
.ps-btn-grad-danger:hover { filter: brightness(1.08); color: #fff; }


/* ---------- Badges ---------- */
.ps-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ps-font-family);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.ps-badge-sm {
    padding: 3px 8px;
    font-size: var(--ps-font-xs);
    border-radius: var(--ps-radius-sm);
}
.ps-badge-md {
    padding: 4px 12px;
    font-size: var(--ps-font-sm);
    border-radius: var(--ps-radius-md);
}
.ps-badge-pill {
    padding: 4px 12px;
    font-size: var(--ps-font-sm);
    border-radius: var(--ps-radius-full);
}
.ps-badge-lg {
    padding: 6px 14px;
    font-size: var(--ps-font-base);
    border-radius: var(--ps-radius-pill);
}

/* Badge colors */
.ps-badge-success { background: var(--ps-success-bg); color: var(--ps-success-text); }
.ps-badge-danger  { background: var(--ps-danger-bg);  color: var(--ps-danger-text);  }
.ps-badge-warning { background: var(--ps-warning-bg); color: var(--ps-warning-text); }
.ps-badge-info    { background: var(--ps-info-bg);    color: var(--ps-info-text);    }
.ps-badge-purple  { background: var(--ps-purple-bg);  color: var(--ps-purple-text);  }
.ps-badge-gray    { background: var(--ps-gray-200);   color: var(--ps-gray-600);     }
.ps-badge-primary {
    background: var(--ps-primary);
    color: #fff;
}
.ps-badge-count {
    background: var(--ps-primary);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--ps-radius-pill);
    font-size: var(--ps-font-base);
    font-weight: 700;
}


/* ---------- Cards ---------- */
.ps-card {
    background: #fff;
    border: 1px solid var(--ps-gray-200);
    border-radius: var(--ps-radius-xl);
    box-shadow: var(--ps-shadow-md);
    overflow: hidden;
}
.ps-card-body {
    padding: var(--ps-space-5);
}
.ps-card-header {
    padding: var(--ps-space-4) var(--ps-space-5);
    border-bottom: 1px solid var(--ps-gray-100);
    font-weight: 600;
    font-size: var(--ps-font-lg);
}
.ps-card-footer {
    padding: var(--ps-space-3) var(--ps-space-5);
    background: var(--ps-gray-50);
    border-top: 1px solid var(--ps-gray-100);
}

/* Card with gradient header */
.ps-card-gradient-header {
    background: var(--ps-gradient);
    color: #fff;
    padding: var(--ps-space-6) var(--ps-space-8);
    border-radius: var(--ps-radius-xl);
}
.ps-card-gradient-header h1,
.ps-card-gradient-header h2,
.ps-card-gradient-header h3 {
    color: #fff;
    margin: 0;
}


/* ---------- Alerts ---------- */
.ps-alert {
    padding: var(--ps-space-3) var(--ps-space-4);
    border-radius: var(--ps-radius-lg);
    font-size: var(--ps-font-md);
    line-height: 1.5;
    border-left: 4px solid transparent;
}
.ps-alert-success {
    background: var(--ps-success-bg);
    color: var(--ps-success-text);
    border-left-color: var(--ps-success);
}
.ps-alert-danger {
    background: var(--ps-danger-bg);
    color: var(--ps-danger-text);
    border-left-color: var(--ps-danger);
}
.ps-alert-warning {
    background: var(--ps-warning-bg);
    color: var(--ps-warning-text);
    border-left-color: var(--ps-warning);
}
.ps-alert-info {
    background: var(--ps-info-bg);
    color: var(--ps-info-text);
    border-left-color: var(--ps-info);
}


/* ---------- Tables ---------- */
.ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ps-font-md);
}
.ps-table th {
    background: var(--ps-gray-50);
    border-bottom: 2px solid var(--ps-gray-200);
    padding: var(--ps-space-3) var(--ps-space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--ps-font-base);
    color: var(--ps-gray-600);
    white-space: nowrap;
}
.ps-table td {
    padding: var(--ps-space-3) var(--ps-space-4);
    border-bottom: 1px solid var(--ps-gray-100);
    color: var(--ps-gray-700);
}
.ps-table tbody tr:hover {
    background: var(--ps-gray-50);
}


/* ---------- Status Colors ---------- */
.ps-status-paid,
.ps-status-confirmed,
.ps-status-approved,
.ps-status-active {
    background: var(--ps-success-bg);
    color: var(--ps-success-text);
}
.ps-status-pending,
.ps-status-reserved,
.ps-status-waiting {
    background: var(--ps-warning-bg);
    color: var(--ps-warning-text);
}
.ps-status-overdue,
.ps-status-cancelled,
.ps-status-rejected,
.ps-status-failed {
    background: var(--ps-danger-bg);
    color: var(--ps-danger-text);
}
.ps-status-partial {
    background: var(--ps-info-bg);
    color: var(--ps-info-text);
}


/* ---------- Section Headings ---------- */
.ps-section-title {
    font-size: var(--ps-font-2xl);
    font-weight: 700;
    color: var(--ps-gray-800);
    margin-bottom: var(--ps-space-4);
}
.ps-section-subtitle {
    font-size: var(--ps-font-md);
    color: var(--ps-gray-500);
    margin-bottom: var(--ps-space-5);
}


/* ---------- Empty States ---------- */
.ps-empty-state {
    text-align: center;
    padding: var(--ps-space-10) var(--ps-space-6);
    border: 2px dashed var(--ps-gray-200);
    border-radius: var(--ps-radius-xl);
    color: var(--ps-gray-400);
}
.ps-empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--ps-space-4);
    opacity: 0.5;
}
.ps-empty-state-text {
    font-size: var(--ps-font-xl);
    font-weight: 600;
    color: var(--ps-gray-500);
    margin-bottom: var(--ps-space-2);
}
.ps-empty-state-hint {
    font-size: var(--ps-font-md);
    color: var(--ps-gray-400);
}


/* ---------- Page Layout ---------- */
.ps-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--ps-space-5);
}
.ps-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ps-space-3);
    margin-bottom: var(--ps-space-6);
}


/* ---------- Tabs ---------- */
.ps-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}
.ps-tab {
    padding: var(--ps-space-3) var(--ps-space-6);
    font-size: var(--ps-font-lg);
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--ps-gray-100);
    color: var(--ps-gray-500);
    border-radius: var(--ps-radius-lg) var(--ps-radius-lg) 0 0;
    transition: all var(--ps-transition);
}
.ps-tab:hover {
    background: var(--ps-gray-200);
    color: var(--ps-gray-700);
}
.ps-tab.active {
    background: var(--ps-success);
    color: #fff;
}
.ps-tab-panel {
    border: 2px solid var(--ps-gray-200);
    border-radius: 0 0 var(--ps-radius-lg) var(--ps-radius-lg);
    padding: var(--ps-space-5);
    background: #fff;
}


/* ---------- Grid Utilities ---------- */
.ps-grid {
    display: grid;
    gap: var(--ps-space-4);
}
.ps-grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ps-grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ps-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }


/* ---------- Flex Utilities ---------- */
.ps-flex       { display: flex; }
.ps-flex-wrap  { flex-wrap: wrap; }
.ps-flex-col   { flex-direction: column; }
.ps-items-center { align-items: center; }
.ps-justify-between { justify-content: space-between; }
.ps-justify-center  { justify-content: center; }
.ps-gap-1 { gap: var(--ps-space-1); }
.ps-gap-2 { gap: var(--ps-space-2); }
.ps-gap-3 { gap: var(--ps-space-3); }
.ps-gap-4 { gap: var(--ps-space-4); }


/* ---------- Spacing Utilities ---------- */
.ps-mt-1 { margin-top: var(--ps-space-1); }
.ps-mt-2 { margin-top: var(--ps-space-2); }
.ps-mt-3 { margin-top: var(--ps-space-3); }
.ps-mt-4 { margin-top: var(--ps-space-4); }
.ps-mt-5 { margin-top: var(--ps-space-5); }
.ps-mb-1 { margin-bottom: var(--ps-space-1); }
.ps-mb-2 { margin-bottom: var(--ps-space-2); }
.ps-mb-3 { margin-bottom: var(--ps-space-3); }
.ps-mb-4 { margin-bottom: var(--ps-space-4); }
.ps-mb-5 { margin-bottom: var(--ps-space-5); }


/* ---------- Text Utilities ---------- */
.ps-text-xs    { font-size: var(--ps-font-xs); }
.ps-text-sm    { font-size: var(--ps-font-sm); }
.ps-text-base  { font-size: var(--ps-font-base); }
.ps-text-md    { font-size: var(--ps-font-md); }
.ps-text-lg    { font-size: var(--ps-font-lg); }
.ps-text-xl    { font-size: var(--ps-font-xl); }
.ps-text-2xl   { font-size: var(--ps-font-2xl); }
.ps-text-3xl   { font-size: var(--ps-font-3xl); }
.ps-text-bold  { font-weight: 700; }
.ps-text-semi  { font-weight: 600; }
.ps-text-muted { color: var(--ps-gray-500); }
.ps-text-center { text-align: center; }


/* ---------- Icon Container ---------- */
.ps-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ps-radius-lg);
    font-size: 20px;
    flex-shrink: 0;
}
.ps-icon-box-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--ps-radius-md);
    font-size: 16px;
}


/* ---------- Avatar ---------- */
.ps-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--ps-gradient);
}
.ps-avatar-sm  { width: 32px; height: 32px; font-size: var(--ps-font-sm); }
.ps-avatar-md  { width: 44px; height: 44px; font-size: var(--ps-font-lg); }
.ps-avatar-lg  { width: 56px; height: 56px; font-size: var(--ps-font-2xl); }


/* ---------- Pagination ---------- */
.ps-pagination {
    display: flex;
    gap: var(--ps-space-2);
    justify-content: center;
    align-items: center;
    margin-top: var(--ps-space-5);
    flex-wrap: wrap;
}
.ps-pagination a,
.ps-pagination span {
    padding: var(--ps-space-2) var(--ps-space-3);
    border-radius: var(--ps-radius-md);
    font-size: var(--ps-font-base);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ps-gray-300);
    color: var(--ps-gray-600);
    transition: all var(--ps-transition);
}
.ps-pagination a:hover {
    background: var(--ps-gray-100);
    border-color: var(--ps-primary);
    color: var(--ps-primary);
}
.ps-pagination .active {
    background: var(--ps-primary);
    color: #fff;
    border-color: var(--ps-primary);
}


/* ---------- Form Controls ---------- */
.ps-input,
.ps-select,
.ps-textarea {
    font-family: var(--ps-font-family);
    font-size: var(--ps-font-md);
    padding: var(--ps-space-2) var(--ps-space-3);
    border: 1.5px solid var(--ps-gray-300);
    border-radius: var(--ps-radius-md);
    background: #fff;
    color: var(--ps-gray-800);
    transition: border-color var(--ps-transition);
    width: 100%;
}
.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
    outline: none;
    border-color: var(--ps-primary);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}


/* ---------- Search Box ---------- */
.ps-search {
    display: flex;
    align-items: center;
    gap: var(--ps-space-2);
    background: var(--ps-gray-50);
    border: 2px solid var(--ps-gray-200);
    border-radius: var(--ps-radius-lg);
    padding: var(--ps-space-2) var(--ps-space-3);
    transition: border-color var(--ps-transition);
}
.ps-search:focus-within {
    border-color: var(--ps-primary);
    background: #fff;
}
.ps-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--ps-font-md);
    width: 100%;
    color: var(--ps-gray-800);
}


/* ---------- Space-Type Color Utilities ---------- */
.ps-type-residential { --type-color: #667eea; --type-bg: #f0f4ff; }
.ps-type-commercial  { --type-color: #28a745; --type-bg: #f0fff4; }
.ps-type-event       { --type-color: #dc3545; --type-bg: #fff5f5; }
.ps-type-shortstay   { --type-color: #0ea5e9; --type-bg: #f0f9ff; }

.ps-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ps-space-2) var(--ps-space-4);
    border-radius: var(--ps-radius-pill);
    font-size: var(--ps-font-md);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all var(--ps-transition);
}
.ps-type-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.ps-type-pill.residential { background: linear-gradient(135deg, #667eea, #764ba2); }
.ps-type-pill.commercial  { background: linear-gradient(135deg, #28a745, #20c997); }
.ps-type-pill.event       { background: linear-gradient(135deg, #dc3545, #ee5a24); }
.ps-type-pill.shortstay   { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }


/* ---------- Responsive (mobile-first overrides) ---------- */
@media (max-width: 768px) {
    .ps-page-wrapper {
        padding: 0 var(--ps-space-3);
        margin: var(--ps-space-4) auto;
    }
    .ps-btn-lg,
    .ps-btn-xl {
        padding: 12px 16px;
        font-size: var(--ps-font-xl);
        width: 100%;
    }
    .ps-grid-2,
    .ps-grid-3,
    .ps-grid-4 {
        grid-template-columns: 1fr;
    }
    .ps-tabs {
        overflow-x: auto;
    }
    .ps-tab {
        flex: 1;
        min-width: max-content;
        padding: var(--ps-space-3) var(--ps-space-4);
        font-size: var(--ps-font-md);
    }
    .ps-table {
        font-size: var(--ps-font-base);
    }
    .ps-table th,
    .ps-table td {
        padding: var(--ps-space-2) var(--ps-space-3);
    }
}


/* ---------- Utility: JS-driven visibility toggle ---------- */
.u-hidden { display: none !important; }