/* Netora Theme — modern green palette */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    /* Netora green palette */
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;

    /* Brand */
    --brand:        var(--green-500);
    --brand-dark:   var(--green-600);
    --brand-darker: var(--green-700);
    --brand-light:  var(--green-100);
    --brand-bg:     var(--green-50);

    /* Neutral palette */
    --bg:        #f8faf7;
    --surface:   #ffffff;
    --surface-2: #f3f5f1;
    --border:    #e6ebe3;
    --border-2:  #d6dccf;

    --text:      #0f1d14;
    --text-2:    #3b4a40;
    --text-3:    #6b7a70;
    --text-mute: #97a299;

    /* Sidebar (dark mode) */
    --sidebar-bg:     #0e1f15;
    --sidebar-bg-2:   #14271b;
    --sidebar-border: #1c3325;
    --sidebar-text:   #b9c8bf;
    --sidebar-text-2: #6f8479;
    --sidebar-active: var(--green-400);

    /* Accents */
    --info:    #3b82f6;
    --warn:    #f59e0b;
    --danger:  #ef4444;
    --success: var(--green-500);
    --purple:  #8b5cf6;

    /* Radius */
    --r-sm: 8px;
    --r:    12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15,29,20,.05);
    --shadow:    0 4px 14px rgba(15,29,20,.06);
    --shadow-md: 0 8px 24px rgba(15,29,20,.08);
    --shadow-lg: 0 14px 40px rgba(15,29,20,.12);
    --shadow-green: 0 8px 24px rgba(34,197,94,.25);

    /* Layout */
    --sidebar-w: 250px;
    --header-h:  72px;
    --container: 1280px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;       /* avoid accidental horizontal scroll on phones */
}

/* Guard against any element overflowing on small screens */
img, video, canvas, svg { max-width: 100%; }
table { max-width: 100%; }

/* Respect iOS notch / Android gesture bar */
@supports (padding: max(0px)) {
    .topbar, .ln-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-darker); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.3; font-weight: 700; color: var(--text); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

code {
    font-family: 'Consolas', 'Monaco', monospace;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
    color: var(--brand-darker);
}

.muted { color: var(--text-3); }
.text-mute { color: var(--text-mute); }
.text-brand { color: var(--brand-dark); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warn { color: var(--warn); }
.text-center { text-align: center; }
.small { font-size: .85rem; }
.bold { font-weight: 700; }

img { max-width: 100%; height: auto; }

::selection { background: var(--green-200); color: var(--green-900); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

/* ── Netora Logo Mark ──────────────────────── */
/* Place an <img src="<?= logo_url() ?>" alt="Netora"> inside any <span class="logo-mark">.
   logo_url() prefers assets/img/logo.png (user supplied), falls back to netora-logo.svg.
   The container is transparent by default — the PNG already carries the brand visual. */
.logo-mark {
    width: 56px; 
    height: 56px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 40px;
}
.logo-mark > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Drop the old CSS-generated "N" — the <img> carries the mark now */
.logo-mark::before { content: none; }

/* Pill variant — circle with green gradient halo behind the mark.
   Use when you specifically want the marketing avatar look. */
.logo-mark.pill {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-400), var(--green-600));
    box-shadow: var(--shadow-green);
}
.logo-mark.pill > img { padding: 6px; }

.logo-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.logo-row .logo-mark { width: 44px; height: 44px; }
.logo-row .brand-text { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.logo-row .brand-text .accent { color: var(--brand-dark); }

/* ── Install page ──────────────────────────── */
.install-page {
    background:
        radial-gradient(ellipse at top right, rgba(34,197,94,.15), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(34,197,94,.10), transparent 50%),
        var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.install-wrap { width: 100%; max-width: 540px; }
.install-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.install-logo { text-align: center; margin-bottom: 28px; }
.install-logo h1 { margin: 16px 0 4px; font-size: 2rem; }
.install-logo p { margin: 0; font-size: .85rem; letter-spacing: .15em; }
.install-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.install-table th, .install-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: right; font-size: .9rem; }
.install-table th { color: var(--text-3); font-weight: 600; background: var(--surface-2); }
.install-help h3 { font-size: 1rem; margin: 16px 0 8px; }
.install-help .warn { background: #fff8e6; border: 1px solid #fde6a8; padding: 12px; border-radius: var(--r-sm); color: #7c5a0b; margin-top: 16px; font-size: .9rem; }