/* Rin Graphic — app shell styles. Tailwind (CDN) handles utility classes; this file covers
   the Kurdish font, RTL app-chrome, and print layouts that Tailwind can't express. */

@font-face {
    font-family: 'Rabar21';
    src: url('../fonts/Rabar021.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --brand-gold: #b8892b;
    --brand-black: #14140f;
    --label-height: 150mm; /* change this to resize the printed label height */

    --bg: #f4f5f7;
    --card-bg: #ffffff;
    --text: #14140f;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --input-bg: #ffffff;
}
html.dark {
    --bg: #101012;
    --card-bg: #1b1b1e;
    --text: #f2f2f2;
    --text-muted: #9ca3af;
    --border: #2c2c30;
    --input-bg: #232326;
}

/* Belt-and-suspenders against the classic mobile "whole page zoomed out" bug:
   any single element wider than the viewport forces the browser to zoom the
   entire page out to fit it. Grid/flex children default to min-width:auto,
   so long unbroken Kurdish labels or links can silently blow out the layout. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html, body {
    font-family: 'Rabar21', 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    font-size: 16px;
}
* { min-width: 0; }
img, svg, table { max-width: 100%; }
p, span, div, a, button, td, th { overflow-wrap: break-word; word-break: break-word; }

[dir="rtl"] body { direction: rtl; }

.app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.top-bar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    /* iOS PWA standalone mode with a translucent status bar renders the notch/status
       bar ON TOP of the page instead of pushing content down — without this, anything
       in this sticky header (like the back button) sits under it and is untappable. */
    padding-top: env(safe-area-inset-top);
}
body {
    padding-bottom: env(safe-area-inset-bottom);
}

.card {
    background: var(--card-bg);
    color: var(--text);
    border-radius: 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* Big, touch-friendly nav tiles used on the dashboards instead of a bottom nav bar */
.nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    min-height: 108px;
}
.nav-tile svg { width: 30px; height: 30px; color: var(--brand-gold); }

/* Phones sit closer to the eye and are touch-driven, so the same tile that reads fine
   on a mouse-driven desktop window feels small on a phone — size it up specifically here. */
@media (max-width: 640px) {
    .nav-tile {
        min-height: 150px;
        padding: 2rem 1rem;
        font-size: 1.15rem;
        gap: .85rem;
        border-radius: 1.3rem;
    }
    .nav-tile svg { width: 42px; height: 42px; }
    .card { border-radius: 1.3rem; }
    h1 { font-size: 1.5rem !important; }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
}
.icon-btn svg { width: 22px; height: 22px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: #eef2ff;
    color: #4338ca;
}
html.dark .status-pill {
    background: #312e81;
    color: #c7d2fe;
}

input, select, textarea, button {
    background: var(--input-bg);
    color: var(--text);
    font-size: 1rem;
}
input, select, textarea {
    min-height: 46px;
}
button, .btn {
    min-height: 46px;
}

.top-bar-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.15rem;
    font-weight: 700;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--input-bg);
    flex-shrink: 0;
}
.back-btn svg { width: 22px; height: 22px; }

/* ---------- Print: A4 invoice ---------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}
.a4-sheet {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    padding: 12mm;
    box-sizing: border-box;
}

/* ---------- Print: thermal label ---------- */
.label-sheet {
    width: 100mm;
    height: var(--label-height);
    margin: 0 auto;
    background: #fff;
    padding: 4mm;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}