/* ════════════════════════════════════════════
   Mustaqar — Design System
   Modern Luxury Hotel Aesthetic
   ════════════════════════════════════════════ */

:root {
    /* Brand colors */
    --ms-primary:        #0d4f4a;   /* Deep emerald */
    --ms-primary-dark:   #062f2d;
    --ms-primary-light:  #1a6b65;
    --ms-accent:         #c9a45c;   /* Gold */
    --ms-accent-soft:    #e6cd95;
    --ms-accent-dark:    #a07f3f;

    /* Neutrals */
    --ms-ink:            #1a2733;
    --ms-ink-soft:       #4a5765;
    --ms-mist:           #8a96a3;
    --ms-line:           #e3e8ed;
    --ms-line-soft:      #f0f3f6;
    --ms-bg:             #f6f8fa;
    --ms-surface:        #ffffff;

    /* Status */
    --ms-success:        #16a34a;
    --ms-success-soft:   #dcfce7;
    --ms-warning:        #f59e0b;
    --ms-warning-soft:   #fef3c7;
    --ms-danger:         #dc2626;
    --ms-danger-soft:    #fee2e2;
    --ms-info:           #0284c7;
    --ms-info-soft:      #dbeafe;

    /* Shadows */
    --ms-shadow-xs:      0 1px 2px rgba(13,79,74,0.05);
    --ms-shadow-sm:      0 2px 6px rgba(13,79,74,0.06), 0 1px 2px rgba(13,79,74,0.04);
    --ms-shadow-md:      0 4px 12px rgba(13,79,74,0.08), 0 2px 4px rgba(13,79,74,0.04);
    --ms-shadow-lg:      0 12px 32px rgba(13,79,74,0.12), 0 4px 8px rgba(13,79,74,0.06);
    --ms-shadow-xl:      0 24px 48px rgba(13,79,74,0.16);
    --ms-shadow-glow:    0 0 0 4px rgba(201,164,92,0.15);

    /* Radii */
    --ms-r-sm: 8px;
    --ms-r-md: 12px;
    --ms-r-lg: 18px;
    --ms-r-xl: 24px;
    --ms-r-pill: 999px;

    /* Spacing scale */
    --ms-s-1: 4px; --ms-s-2: 8px; --ms-s-3: 12px;
    --ms-s-4: 16px; --ms-s-5: 24px; --ms-s-6: 32px;
    --ms-s-7: 48px; --ms-s-8: 64px;

    /* Transition */
    --ms-tr: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base ─── */
body, .ms-app {
    font-family: 'Tajawal', 'Segoe UI', sans-serif;
    color: var(--ms-ink);
    background: var(--ms-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ─── Cards ─── */
.ms-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-r-lg);
    box-shadow: var(--ms-shadow-sm);
    transition: all 0.2s var(--ms-tr);
}
.ms-card:hover { box-shadow: var(--ms-shadow-md); }
.ms-card-hero {
    background: var(--ms-surface);
    border: 0;
    border-radius: var(--ms-r-xl);
    box-shadow: var(--ms-shadow-lg);
    padding: var(--ms-s-6);
}
.ms-card-glass {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--ms-r-xl);
    box-shadow: var(--ms-shadow-xl);
}

/* ─── Buttons ─── */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-s-2);
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--ms-r-pill);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s var(--ms-tr);
    text-decoration: none;
    line-height: 1;
}
.ms-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ms-btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.ms-btn-sm { padding: 6px 14px; font-size: 0.85rem; }

.ms-btn-primary {
    background: var(--ms-primary); color: #fff;
    box-shadow: var(--ms-shadow-sm);
}
.ms-btn-primary:hover { background: var(--ms-primary-dark); transform: translateY(-1px); box-shadow: var(--ms-shadow-md); color: #fff; }

.ms-btn-accent {
    background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-dark));
    color: #fff;
    box-shadow: var(--ms-shadow-sm);
}
.ms-btn-accent:hover { transform: translateY(-1px); box-shadow: var(--ms-shadow-md); color: #fff; }

.ms-btn-outline {
    background: transparent;
    color: var(--ms-primary);
    border-color: var(--ms-primary);
}
.ms-btn-outline:hover { background: var(--ms-primary); color: #fff; }

.ms-btn-ghost {
    background: transparent;
    color: var(--ms-ink-soft);
}
.ms-btn-ghost:hover { background: var(--ms-line-soft); color: var(--ms-ink); }

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

/* ─── Inputs ─── */
.ms-input, .ms-select, .ms-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--ms-surface);
    border: 1.5px solid var(--ms-line);
    border-radius: var(--ms-r-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ms-ink);
    transition: all 0.15s var(--ms-tr);
}
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
    outline: none;
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 3px rgba(13,79,74,0.12);
}
.ms-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-ink);
}

/* ─── Badges ─── */
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--ms-r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}
.ms-badge-success  { background: var(--ms-success-soft); color: var(--ms-success); }
.ms-badge-warning  { background: var(--ms-warning-soft); color: #92400e; }
.ms-badge-danger   { background: var(--ms-danger-soft);  color: var(--ms-danger); }
.ms-badge-info     { background: var(--ms-info-soft);    color: var(--ms-info); }
.ms-badge-neutral  { background: var(--ms-line-soft);    color: var(--ms-ink-soft); }
.ms-badge-gold     { background: var(--ms-accent); color: #fff; }

/* ─── Stat cards ─── */
.ms-stat {
    background: var(--ms-surface);
    border-radius: var(--ms-r-lg);
    padding: var(--ms-s-5);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow-sm);
    transition: all 0.15s var(--ms-tr);
    display: flex;
    align-items: center;
    gap: var(--ms-s-4);
}
.ms-stat:hover { transform: translateY(-2px); box-shadow: var(--ms-shadow-md); }
.ms-stat-text { flex: 1; min-width: 0; }
.ms-stat-label { color: var(--ms-mist); font-size: 0.88rem; font-weight: 600; }
.ms-stat-value { color: var(--ms-ink); font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.ms-stat-icon {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: var(--ms-r-md);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-light));
    color: #fff; font-size: 1.5rem;
    box-shadow: 0 6px 14px rgba(13,79,74,0.18);
}

/* ─── Tables ─── */
.ms-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ms-surface);
    border-radius: var(--ms-r-lg);
    overflow: hidden;
}
.ms-table thead {
    background: var(--ms-line-soft);
}
.ms-table th {
    text-align: start;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ms-mist);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ms-line);
}
.ms-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--ms-line-soft);
    font-size: 0.95rem;
    vertical-align: middle;
}
.ms-table tr:last-child td { border-bottom: 0; }
.ms-table tbody tr { transition: background 0.1s var(--ms-tr); }
.ms-table tbody tr:hover { background: var(--ms-line-soft); }

/* ─── Page header ─── */
.ms-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ms-s-5);
    flex-wrap: wrap;
    gap: var(--ms-s-3);
}
.ms-page-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ms-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ms-s-2);
}
.ms-page-subtitle {
    color: var(--ms-mist);
    margin: 4px 0 0;
    font-size: 0.95rem;
}

/* ─── Auth pages ─── */
.ms-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ms-s-5);
    background:
        radial-gradient(circle at 20% 20%, rgba(201,164,92,0.18), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(120,90,40,0.10), transparent 45%),
        linear-gradient(135deg, #f7f3ec 0%, #efe7d6 100%);
    position: relative;
    overflow: hidden;
}
.ms-auth-wrap::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' opacity='0.04'><path fill='%23c9a45c' d='M40 0 L80 20 L80 60 L40 80 L0 60 L0 20 Z'/></svg>");
    background-size: 80px 80px;
    opacity: 0.6;
    pointer-events: none;
}
.ms-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--ms-surface);
    border-radius: var(--ms-r-xl);
    padding: var(--ms-s-7) var(--ms-s-6);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
}
.ms-auth-logo {
    width: 72px; height: 72px;
    border-radius: var(--ms-r-lg);
    margin: 0 auto var(--ms-s-4);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(13,79,74,0.3);
}
.ms-auth-logo-gold {
    background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-dark));
    box-shadow: 0 8px 20px rgba(201,164,92,0.4);
}
.ms-auth-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ms-ink);
    margin: 0 0 6px;
}
.ms-auth-subtitle {
    text-align: center;
    color: var(--ms-mist);
    font-size: 0.92rem;
    margin: 0 0 var(--ms-s-5);
}

/* ─── Mobile app ─── */
.ms-mobile-shell {
    min-height: 100vh;
    background: linear-gradient(180deg, #0d4f4a 0%, #062f2d 100%);
    color: #fff;
}
.ms-mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ms-mobile-content { padding: var(--ms-s-5); }
.ms-mobile-action {
    display: block;
    padding: var(--ms-s-6) var(--ms-s-5);
    margin-bottom: var(--ms-s-3);
    border: 0;
    border-radius: var(--ms-r-xl);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    transition: all 0.15s var(--ms-tr);
}
.ms-mobile-action:active { transform: scale(0.98); }
.ms-mobile-action:hover { color: #fff; }
.ms-mobile-action i { display: block; font-size: 2.2rem; margin-bottom: 8px; opacity: 0.95; }
.ms-mobile-action.is-arrival  { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.ms-mobile-action.is-checkin  { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.ms-mobile-action.is-checkout { background: linear-gradient(135deg, #f59e0b, #b45309); }

/* ─── Empty state ─── */
.ms-empty {
    text-align: center;
    padding: var(--ms-s-8) var(--ms-s-5);
    color: var(--ms-mist);
}
.ms-empty i { font-size: 3rem; opacity: 0.5; }
.ms-empty h4 { margin: var(--ms-s-3) 0 var(--ms-s-2); color: var(--ms-ink); font-weight: 700; }

/* ─── Animations ─── */
@keyframes ms-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.ms-card, .ms-stat, .ms-auth-card { animation: ms-fade-up 0.35s var(--ms-tr); }