/* ============================================================
   Athar Group — shared design system (single source of truth)
   Link this in every standard-themed page instead of redeclaring
   the same :root tokens inline:
       <link rel="stylesheet" href="/assets/css/app.css">
   ============================================================ */

:root {
    /* Brand palette */
    --primary:       #006C50;   /* Emerald */
    --primary-dark:  #00503a;
    --gold:          #C69C56;
    --gold-light:    #fdf3e0;

    /* Surfaces & text */
    --bg-body:       #f1f5f9;
    --bg:            #f8fafc;
    --surface:       #ffffff;
    --white:         #ffffff;
    --text-dark:     #0f172a;
    --text:          #334155;
    --text-gray:     #475569;
    --border:        #e2e8f0;

    /* Radii */
    --radius-card:   16px;
    --radius-input:  8px;
    --radius-btn:    16px;

    /* Shadows */
    --shadow-sm:     0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-soft:   0 12px 40px rgba(0, 0, 0, 0.04);

    /* Spacing scale */
    --space-1:       8px;
    --space-2:       16px;
    --space-3:       24px;
    --space-4:       32px;

    /* Feedback colors */
    --danger:        #dc2626;
    --danger-bg:     #fee2e2;
    --danger-border: #fecaca;
    --danger-text:   #991b1b;
    --success:       #16a34a;
    --success-bg:    #dcfce7;
    --success-border:#bbf7d0;
    --success-text:  #166534;
    --warning:       #d97706;
    --warning-bg:    #fef3c7;
    --warning-border:#fde68a;
    --warning-text:  #92400e;

    /* Type */
    --font:          'Cairo', sans-serif;
    --radius-pill:   999px;
}

/* ============================================================
   COMPONENTS — use these classes instead of re-styling per page.
   Buttons: .btn + .btn-primary/.btn-gold/.btn-danger/.btn-outline/.btn-ghost
            sizes .btn-sm/.btn-lg, full width .btn-block, loading .is-loading
   Forms:   .form-group > .form-label + .form-control   (.input-icon for an icon)
   Feedback:.alert + .alert-success/.alert-error/.alert-warning
   Surfaces:.card    Pills: .badge + .badge-*
   ============================================================ */

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border: none; border-radius: 12px;
    font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, #008562, #00503a); color: #fff;
    box-shadow: 0 8px 18px -6px rgba(0,108,80,.5);
    transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 26px -6px rgba(0,108,80,.6); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(0,108,80,.35); outline-offset: 2px; }
.btn:disabled, .btn.is-loading { opacity: .7; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: linear-gradient(135deg, #008562, #00503a); color: #fff; }
.btn-gold    { background: linear-gradient(135deg, #d4a861, #b3863f); color: #fff; box-shadow: 0 8px 18px -6px rgba(198,156,86,.5); }
.btn-danger  { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger-border); color: var(--danger-text); filter: none; }
.btn-outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; filter: none; }
.btn-ghost   { background: transparent; color: var(--text-gray); box-shadow: none; }
.btn-ghost:hover { background: rgba(0,0,0,.04); color: var(--text-dark); transform: none; box-shadow: none; filter: none; }

.btn-sm { padding: 8px 16px; font-size: .875rem; border-radius: 8px; }
.btn-lg { padding: 18px 28px; font-size: 1.1rem; }
.btn-block { width: 100%; }

.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
    border-radius: 50%; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Cards ---- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -12px rgba(15,23,42,.12);
    padding: 24px;
}

/* ---- Forms ---- */
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .9rem; color: var(--text-gray); }
.form-control {
    width: 100%; padding: 14px 16px; box-sizing: border-box;
    border: 2px solid var(--border); border-radius: 12px;
    font-family: var(--font); font-size: 1rem; color: var(--text);
    background: #f8fafc; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-control:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0,108,80,.1); }
.form-control::placeholder { color: #94a3b8; }

/* Input with a leading icon (RTL: icon sits on the right) */
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #94a3b8; font-size: 1.1rem; pointer-events: none; }
.input-icon .form-control { padding-right: 48px; }

/* ---- Alerts ---- */
.alert {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem;
    border: 1px solid transparent; margin-bottom: 20px;
}
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.alert-error   { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }

/* ---- Badges / pills ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 700; }
.badge-primary { background: #e0f2f1; color: var(--primary); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }