:root {
    /* Color Palette */
    --primary-gold: #C4991D;
    --primary-gold-hover: #b08819;
    --bg-dark: #001818;
    --bg-card: #002424;
    /* Slightly lighter than bg for cards */
    --text-white: #FFFFFF;
    --text-gray: #CCCCCC;
    --text-black: #000000;
    --danger: #e74c3c;
    --success: #2ecc71;

    /* Spacing & Layout */
    --header-height: 60px;
    --bottom-nav-height: 60px;
    --border-radius: 12px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fallback, prefer Tajawal or Cairo if available */
    margin: 0;
    padding: 0;
    padding-top: var(--header-height);
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
    direction: rtl;
    /* Default for Arabic */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Utilities */
.container {
    padding: 15px;
    max-width: 800px;
    /* Mobile-first focus, limit width on desktop */
    margin: 0 auto;
}

.text-gold {
    color: var(--primary-gold);
}

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

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

/* Components: Header */
.app-header {
    background-color: var(--primary-gold);
    color: var(--bg-dark);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center logo/title */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.app-header h1 {
    font-size: 1.2rem;
    margin: 0;
}

/* Components: Cards */
.card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(196, 153, 29, 0.1);
    /* Subtle gold border */
}

.card-title {
    color: var(--primary-gold);
    margin-bottom: 10px;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

/* Components: Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    width: 100%;
    /* Mobile friendly */
}

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

.btn-primary:active {
    background-color: var(--primary-gold-hover);
    transform: scale(0.98);
}

.btn-dark {
    background-color: transparent;
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
}

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

/* Components: Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background-color: #001010;
    /* Slightly darker than bg */
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(196, 153, 29, 0.2);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-size: 0.75rem;
    flex: 1;
    height: 100%;
}

.nav-item.active {
    color: var(--primary-gold);
}

.nav-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

/* Components: Inputs */
.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(196, 153, 29, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    -webkit-appearance: none;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-gold);
}

/* Ensure select dropdowns and options show white text */
select.form-input {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}

select.form-input option {
    background-color: #1a1a1a;
    color: white;
}

/* Fix placeholder color */
.form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Fix autofill text color */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
}

/* Fix date/time inputs */
input[type="date"].form-input,
input[type="time"].form-input {
    color: white;
    color-scheme: dark;
}

input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="time"].form-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.form-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* FAB */
.fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 15px);
    left: 20px;
    /* Arabic RTL -> Left is usually the secondary side, but let's stick to standard FAB placement or check RTL */
    /* Since RTL, left is 'end'. Let's put it on the Left for easy thumb access for lefties or Right? Standard Material is End.
       In RTL, End is Left. So Left 20px is correct. */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-gold);
    color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(196, 153, 29, 0.4);
    font-size: 24px;
    z-index: 999;
}