@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Kurdish (Sorani) + Arabic letters; only downloaded when that text is on screen */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

/* =========================================
   1. GLOBAL FOUNDATION
   ========================================= */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F4F5F8;
    margin: 0; padding: 24px 32px 30px 110px;
    min-height: 100vh; box-sizing: border-box;
    transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
}

/* Stray text nodes placed directly in <body> (e.g. "Logged in as:") stay hidden,
   every real element gets a proper font size back. */
body { font-size: 0; color: transparent; }
body > *,
h1, h2, h3, div, form, table, input, select, textarea, td, th, p, fieldset, dialog {
    font-size: 14px; color: #1D1D1F;
}
body > br, form > br, div > br, body > hr, fieldset > br, dialog > br { display: none; }

/* Duplicates of sidebar elements that some pages still render in the body */
body > span#userDisplay,
body > button#logoutBtn { display: none !important; }

h1 { font-size: 28px; font-weight: 700; margin-top: 10px; margin-bottom: 20px; letter-spacing: -0.5px; }
h2 { font-size: 18px; font-weight: 600; margin-top: 20px; margin-bottom: 12px; border-bottom: 1px solid #EAEBEE; padding-bottom: 8px; }
h3 { font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 16px; }

/* Page-level headings get breathing room between sections */
body > h1 ~ h1 { margin-top: 36px; }
body > h2 { max-width: 1050px; margin-top: 8px; }
body > h3 { margin-top: 8px; margin-bottom: 12px; }

p { line-height: 1.5; margin: 0 0 10px; }
b, strong { font-weight: 600; }

/* =========================================
   2. THE SCROLLABLE SIDEBAR CONTAINER
   ========================================= */
#sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 80px;
    background: rgba(45, 47, 51, 0.95);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,0.05);
    z-index: 100;
    display: flex; flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 70px;
}

#sidebar::-webkit-scrollbar { display: none; }

#sidebar::before {
    content: "\2261"; position: absolute; top: 20px; left: 0;
    width: 80px; height: 40px; color: #FFFFFF; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; transition: all 0.3s ease;
}

#sidebar:hover { width: 260px; }
body:has(#sidebar:hover) { padding-left: 290px; }
#sidebar:hover::before {
    content: "\2261 \00a0\00a0\00a0\00a0 SY-Tech";
    width: 260px; justify-content: flex-start; padding-left: 24px; font-size: 16px; font-weight: 700;
}

/* =========================================
   3. MENU BUTTONS
   ========================================= */
.sidebar-content { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }

#sidebar button.nav-btn {
    width: 100%; min-height: 46px; border-radius: 12px;
    background: transparent; border: none;
    display: flex; align-items: center; padding: 0 14px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    color: transparent; white-space: nowrap; transition: all 0.2s ease;
}

#sidebar:hover button.nav-btn { color: #E0E0E0; }
#sidebar button.nav-btn:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

#sidebar button.nav-btn::before {
    display: inline-flex; justify-content: center; align-items: center;
    width: 32px; height: 32px; min-width: 32px; border-radius: 8px;
    margin-right: 15px; font-size: 16px; font-weight: normal;
    font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
    line-height: 0;
}

.menu-btn::before      { content: "\2190"; font-size: 18px; background: rgba(255, 255, 255, 0.15); color: #FFFFFF; }
.purchase-btn::before  { content: "\1F3E0\FE0E"; background: rgba(74, 144, 226, 0.15); color: #4A90E2; }
.sales-btn::before     { content: "\1F4C8\FE0E"; background: rgba(175, 82, 222, 0.15); color: #AF52DE; }
.cost-btn::before      { content: "\1F4B0\FE0E"; background: rgba(245, 166, 35, 0.15); color: #F5A623; }
.accounting-btn::before{ content: "\1F4D2\FE0E"; background: rgba(48, 209, 88, 0.15); color: #30D158; }
.agreements-btn::before{ content: "\1F4CB\FE0E"; background: rgba(208, 138, 61, 0.15); color: #D08A3D; }
.data-btn::before      { content: "\1F4CA\FE0E"; background: rgba(90, 200, 250, 0.15); color: #5AC8FA; }
.rent-btn::before      { content: "\1F511\FE0E"; background: rgba(52, 199, 89, 0.15); color: #34C759; }
.users-btn::before     { content: "\1F464\FE0E"; background: rgba(255, 69, 58, 0.15); color: #FF453A; }

/* =========================================
   4. SUB-MENU (HOVER ACCORDION)
   ========================================= */
.nav-group { display: flex; flex-direction: column; width: 100%; position: relative; }

.sub-menu {
    display: flex; flex-direction: column; overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    padding-left: 54px;
}

.sub-menu button.sub-btn {
    background: transparent; border: none; color: transparent;
    font-size: 13px; font-weight: 500; text-align: left;
    padding: 8px 0; cursor: pointer; transition: color 0.2s ease;
    white-space: nowrap; width: 100%;
}

/* Expanded state when sidebar is hovered */
#sidebar:hover .nav-group:hover .sub-menu,
#sidebar:hover .nav-group:focus-within .sub-menu {
    max-height: 250px; padding-top: 4px; padding-bottom: 8px;
}

#sidebar:hover .sub-menu button.sub-btn { color: #86868B; }
.sub-menu button.sub-btn:hover { color: #FFFFFF !important; text-decoration: underline; }

/* =========================================
   5. ADMIN & LOGOUT FOOTER
   ========================================= */
.sidebar-footer { padding: 15px 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }

span#userDisplay {
    height: 44px; display: flex; align-items: center; position: relative;
    font-size: 13px; font-weight: 600; color: transparent;
    padding-left: 10px; white-space: nowrap; transition: all 0.3s ease;
}
span#userDisplay::before {
    content: "AM"; position: absolute; left: 14px;
    width: 32px; height: 32px; border-radius: 16px;
    background: #8E8DFA; color: #FFF; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
span#userDisplay::after {
    content: "LOGGED IN AS"; position: absolute; top: 6px; left: 60px;
    font-size: 9px; letter-spacing: 0.5px; font-weight: 600; color: transparent;
}

#sidebar:hover span#userDisplay { color: #FFFFFF; padding-left: 60px; }
#sidebar:hover span#userDisplay::after { color: #86868B; }

button#logoutBtn {
    margin-top: 10px; width: 100%; height: 36px; border-radius: 8px;
    background: transparent; border: none; color: transparent;
    font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
#sidebar:hover button#logoutBtn { color: #FF3B30; }
#sidebar:hover button#logoutBtn:hover { background: rgba(255, 59, 48, 0.1); }

/* =========================================
   6. MAIN CONTENT CARDS
   Only top-level blocks become cards, so nested
   wrappers (.field-container, filter groups, rows
   injected by JS) no longer turn into cards-in-cards.
   :where() keeps specificity at zero so component
   rules below (summary tiles, filters) can refine it.
   ========================================= */
:where(body > div:not(#sidebar-placeholder, .modal, .summary-container, .load-more-container, #actionButtonsContainer, #transferServiceBannerContainer, #pocketsContainer)),
:where(body > form),
:where(body > fieldset) {
    background-color: #FFFFFF; border-radius: 20px; padding: 30px; margin: 0 0 30px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); width: 100%; max-width: 1050px;
    box-sizing: border-box; overflow-x: auto;
}

/* Inline "border: 1px solid black; width: 400px" boxes (Transfer / Buy Back details) */
body > div[style*="solid black"] {
    border: none !important; width: 100% !important; padding: 30px !important; margin-bottom: 30px !important;
}

.field-container { margin-bottom: 4px; }
.field-container + .field-container { margin-top: 4px; }

/* =========================================
   LOGIN (SY-Tech)
   ========================================= */
body:has(#loginForm) #sidebar { display: none; }
body:has(#loginForm) { padding: 0 !important; }

body.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px !important; overflow: hidden; position: relative;
    background: linear-gradient(135deg, #0B1E4A 0%, #123B8C 45%, #3B2A8F 100%);
    background-size: 200% 200%; animation: loginSky 18s ease-in-out infinite;
}
@keyframes loginSky { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Background: drifting blobs + city skyline with twinkling windows */
.login-page .login-scene {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
    max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.login-scene .blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
    animation: loginFloat 14s ease-in-out infinite;
}
.blob-1 { width: 420px; height: 420px; background: #007AFF; top: -120px; left: -100px; }
.blob-2 { width: 360px; height: 360px; background: #AF52DE; bottom: 40px; right: -80px; animation-delay: -5s; }
.blob-3 { width: 260px; height: 260px; background: #34C7D9; top: 30%; left: 60%; animation-delay: -9s; opacity: 0.35; }
@keyframes loginFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, 30px) scale(1.08); }
    66% { transform: translate(-30px, 20px) scale(0.95); }
}
.login-scene .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; fill: rgba(5, 14, 40, 0.55); }
.login-scene .windows { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; }
.login-scene .windows i {
    position: absolute; width: 5px; height: 7px; border-radius: 1px;
    background: #FFD66B; box-shadow: 0 0 6px rgba(255, 214, 107, 0.8);
    opacity: 0; animation: loginWindow 5s ease-in-out infinite;
}
@keyframes loginWindow { 0%, 100% { opacity: 0; } 40%, 70% { opacity: 0.9; } }

/* Card */
.login-page .login-card {
    position: relative; z-index: 1; width: 100%; max-width: 380px; margin: 0;
    padding: 34px 30px 28px; box-sizing: border-box; overflow: hidden;
    background: rgba(255, 255, 255, 0.94); border-radius: 24px;
    box-shadow: 0 24px 60px rgba(3, 10, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    text-align: center; animation: loginRise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes loginRise { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

.login-card .brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.login-card .brand-mark {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    font-size: 16px; font-weight: 800; letter-spacing: -0.5px; color: #FFFFFF;
    background: linear-gradient(135deg, #007AFF, #7A4DFF);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
    transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.login-card .brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
.login-card .brand-name {
    font-size: 24px; font-weight: 800; letter-spacing: -0.6px;
    background: linear-gradient(90deg, #0B1E4A, #007AFF, #7A4DFF, #0B1E4A); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: loginShine 8s linear infinite;
}
@keyframes loginShine { to { background-position: 300% 0; } }

.login-card .greet { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.4px; }
.login-card .wave { display: inline-block; transform-origin: 70% 70%; animation: loginWave 2.4s ease-in-out 0.6s 2; }
@keyframes loginWave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(16deg); }
    20%, 40% { transform: rotate(-10deg); }
}
.login-card .sub { color: #86868B; margin: 0 0 22px; }

/* Form */
.login-page form#loginForm {
    max-width: none; width: 100%; margin: 0; padding: 0; background: none; box-shadow: none;
    border-radius: 0; overflow: visible; text-align: start;
}
.login-card .field { position: relative; margin-bottom: 12px; }
.login-card .field-icon {
    position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; fill: #A1A1AA; pointer-events: none; transition: fill 0.2s ease;
}
.login-card .field:focus-within .field-icon { fill: #007AFF; }
.login-page form#loginForm input {
    max-width: none; margin: 0; height: 48px; border-radius: 14px; font-size: 15px;
    padding-inline-start: 42px; padding-inline-end: 14px;
}
.login-page form#loginForm input#password { padding-inline-end: 48px; }
.login-card .peek {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; margin: 0; padding: 0; border: none; border-radius: 10px;
    background: transparent; box-shadow: none; line-height: 0; cursor: pointer;
    transition: background-color 0.2s ease;
}
.login-card .peek:hover { background: #F0F1F5; }
.login-card .peek svg {
    width: 20px; height: 20px; fill: none; stroke: #A1A1AA; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; transition: stroke 0.2s ease;
}
.login-card .peek:hover svg { stroke: #007AFF; }
.login-card .peek .eye-closed,
.login-card .peek.showing .eye-open { display: none; }
.login-card .peek.showing .eye-closed { display: inline; }
.login-card .caps { font-size: 12px; font-weight: 600; color: #C77700; margin: -4px 4px 8px; }
.login-card .caps::before { content: "\21EA  "; }

.login-page form#loginForm .go {
    position: relative; width: 100%; height: 48px; margin: 6px 0 0; border: none; border-radius: 14px;
    font-size: 15px; font-weight: 700; color: #FFFFFF; cursor: pointer; overflow: hidden;
    background: linear-gradient(135deg, #007AFF, #7A4DFF);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.login-page form#loginForm .go::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg); transition: left 0.6s ease;
}
.login-page form#loginForm .go:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 122, 255, 0.45); }
.login-page form#loginForm .go:hover::after { left: 130%; }
.login-page form#loginForm .go:active { transform: translateY(1px) scale(0.99); }
.login-page form#loginForm .go:disabled { opacity: 1; cursor: progress !important; }
.login-card .go .spinner {
    position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; border-radius: 50%;
    opacity: 0; animation: loginSpin 0.7s linear infinite;
}
.login-card .go.loading .go-label { opacity: 0; }
.login-card .go.loading .spinner { opacity: 1; }
@keyframes loginSpin { to { transform: rotate(360deg); } }

.login-card p#message { min-height: 20px; margin: 14px 0 0; color: #FF3B30; font-weight: 600; font-size: 13px; }

/* Wrong password: the card shakes its head */
.login-card.shake { animation: loginShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes loginShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

/* Signed in: a big green tick before heading to the menu */
.login-card .success {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255, 255, 255, 0.97); opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.login-card .success .check {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    font-size: 32px; font-weight: 800; color: #FFFFFF; background: #34C759;
    box-shadow: 0 10px 24px rgba(52, 199, 89, 0.4); transform: scale(0);
}
.login-card .success .success-text { font-size: 20px; font-weight: 700; margin-top: 8px; }
.login-card .success .success-name { color: #86868B; font-size: 15px; }
.login-card.done .success { opacity: 1; }
.login-card.done .success .check { animation: loginPop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) 0.1s forwards; }
@keyframes loginPop { to { transform: scale(1); } }

/* Language switcher sits on the dark background */
.login-page > .lang-switch.floating { background: rgba(255, 255, 255, 0.92); z-index: 5; }

html[dir="rtl"] .login-card .brand-name { font-family: 'Inter', sans-serif; }

@media (prefers-reduced-motion: reduce) {
    body.login-page, .login-scene .blob, .login-scene .windows i, .login-card,
    .login-card .brand-name, .login-card .wave { animation: none !important; }
    .login-scene .windows i { opacity: 0.6; }
}

/* =========================================
   7. BUTTONS
   ========================================= */

/* Shared base for every content button (sidebar buttons are untouched) */
body > button,
form button,
fieldset button,
dialog button,
.modal-content button,
.field-container button,
.load-more-btn,
#actionButtonsContainer button {
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    border: none; border-radius: 50px; cursor: pointer;
    padding: 11px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
    vertical-align: middle;
}

/* Secondary (default): Cancel, Clear, Reset, "New Customer", etc. */
form button,
fieldset button,
dialog button,
.modal-content button,
.field-container button,
.load-more-btn,
#actionButtonsContainer button {
    background-color: #EEF0F4; color: #1D1D1F;
}
form button:hover,
fieldset button:hover,
dialog button:hover,
.modal-content button:hover,
.field-container button:hover,
.load-more-btn:hover,
#actionButtonsContainer button:hover { background-color: #E2E5EB; }

/* Primary: submit / confirm actions */
form button[type="submit"],
form button#submitBtn,
form button#applyBtn,
.modal-content button[type="submit"],
.modal-content button[onclick^="confirm"],
.modal-content button[onclick^="submit"],
fieldset button[onclick^="apply"],
fieldset button[onclick^="load"],
dialog button[onclick^="confirm"] {
    background-color: #007AFF; color: #FFFFFF;
}
form button[type="submit"]:hover,
form button#submitBtn:hover,
form button#applyBtn:hover,
.modal-content button[type="submit"]:hover,
.modal-content button[onclick^="confirm"]:hover,
.modal-content button[onclick^="submit"]:hover,
fieldset button[onclick^="apply"]:hover,
fieldset button[onclick^="load"]:hover,
dialog button[onclick^="confirm"]:hover {
    background-color: #0066D6; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 122, 255, 0.28);
}

/* Destructive confirmation in the terminate dialog */
dialog button[onclick^="confirmTermination"] { background-color: #FF3B30; }
dialog button[onclick^="confirmTermination"]:hover { background-color: #D70015; box-shadow: 0 6px 16px rgba(255, 59, 48, 0.28); }

form button#submitBtn { width: 100%; margin-top: 30px; padding: 14px 28px; font-size: 15px; }
form#utilityRatesForm button#applyBtn,
form#utilityRatesForm button[onclick^="reset"] { margin-top: 24px; }
form#utilityRatesForm button[onclick^="reset"] { margin-right: 8px; }

/* Small secondary button under a field ("➕ New Customer") */
.field-container button { margin-top: 8px; padding: 8px 16px; font-size: 13px; }

/* Button pairs in modals / dialogs / filter boxes */
.modal-content button + button,
dialog button + button,
fieldset button + button { margin-left: 8px; }
.modal-content form button,
.modal-content > button { margin-top: 16px; }

button:disabled,
button[disabled] { opacity: 0.5; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

form button:focus-visible,
body > button:focus-visible,
fieldset button:focus-visible,
dialog button:focus-visible,
.modal-content button:focus-visible,
#actionButtonsContainer button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35); }

/* Top-of-page navigation buttons ("Back to …", "Accounting", "Menu")
   = every body-level button that sits before the page's <hr> */
body > button:has(~ hr) {
    background-color: #FFFFFF; color: #48484A;
    padding: 8px 16px; font-size: 13px; margin: 0 8px 20px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px #E3E5EA inset;
}
body > button:has(~ hr)::before { content: "\2190"; font-size: 14px; color: #86868B; }
body > button:has(~ hr):hover { background-color: #FFFFFF; color: #007AFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 122, 255, 0.35) inset; }
body > button:has(~ hr):hover::before { color: #007AFF; }

/* Section landing pages (Accounting, Data, Rent): buttons become tiles */
body > h1 ~ button {
    background-color: #FFFFFF; color: #1D1D1F;
    border-radius: 16px; padding: 18px 26px; min-width: 180px; justify-content: space-between;
    font-size: 15px; margin: 0 12px 12px 0; vertical-align: top;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
body > h1 ~ button::after { content: "\2192"; color: #86868B; margin-left: 18px; transition: transform 0.2s ease, color 0.2s ease; }
body > h1 ~ button:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); color: #007AFF; }
body > h1 ~ button:hover::after { color: #007AFF; transform: translateX(3px); }

/* Action buttons below a details page (Agreement Details) */
body > button#transferBtn,
body > button#buyBackButton {
    min-width: 0; padding: 12px 24px; border-radius: 50px; font-size: 14px; margin: 0 10px 30px 0;
}
body > button#transferBtn::after,
body > button#buyBackButton::after { content: none; }
body > button#transferBtn { background-color: #007AFF; color: #FFFFFF; }
body > button#transferBtn:hover { background-color: #0066D6; color: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 122, 255, 0.28); }
body > button#buyBackButton { background-color: #FFFFFF; color: #1D1D1F; box-shadow: 0 0 0 1px #E3E5EA inset; }
body > button#buyBackButton:hover { color: #007AFF; }

/* Rent agreement detail actions */
#actionButtonsContainer { margin: 0 0 30px; font-size: 0; }
#actionButtonsContainer button { margin-right: 10px; }
#actionButtonsContainer #terminateBtn { background-color: rgba(255, 59, 48, 0.10); }
#actionButtonsContainer #terminateBtn:hover { background-color: rgba(255, 59, 48, 0.18); }
#actionButtonsContainer #returnDepositBtn { background-color: rgba(175, 82, 222, 0.10); }
#actionButtonsContainer #returnDepositBtn:hover { background-color: rgba(175, 82, 222, 0.18); }

/* Load more (pagination) */
.load-more-container { text-align: center; margin: 0 0 30px; max-width: 1050px; }
body .load-more-btn { padding: 11px 22px; font-size: 14px; }

/* ----------------------------------------------------
   PERFECTLY CENTERED, DYNAMIC TABLE ACTION BUTTONS
   (scoped to the row add / remove controls only, so
   ID buttons in listing tables stay readable)
   ---------------------------------------------------- */
#itemsBody button,
#itemsBody input[type="button"],
tfoot td button,
td button.delete-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important;
    padding: 0 !important; border-radius: 16px !important;
    display: inline-flex !important; justify-content: center !important; align-items: center !important;
    margin: 0 !important; border: none !important; cursor: pointer !important;
    transition: all 0.2s ease !important; color: transparent !important; font-size: 0 !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 12px !important;
    vertical-align: middle !important; transform: none !important;
}

#itemsBody td:first-child button,
#itemsBody td:first-child input[type="button"] {
    margin-right: 12px !important;
}

#itemsBody button,
#itemsBody input[type="button"],
td button.delete-btn {
    background-color: #FF3B30 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}
#itemsBody button:hover,
#itemsBody input[type="button"]:hover,
td button.delete-btn:hover {
    background-color: #D70015 !important; box-shadow: 0 4px 10px rgba(255, 59, 48, 0.25) !important;
}

tfoot td button {
    background-color: #007AFF !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
}
tfoot td button:hover {
    background-color: #005bb5 !important; box-shadow: 0 4px 10px rgba(0, 113, 227, 0.25) !important;
}

/* ID buttons inside listing tables (Rent agreements, Deposits) look like links */
tbody:not(#itemsBody) td button:not(.delete-btn) {
    font-family: inherit; font-size: 13px; font-weight: 600;
    background-color: rgba(0, 122, 255, 0.10); color: #007AFF;
    border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer;
    transition: background-color 0.2s ease;
}
tbody:not(#itemsBody) td button:not(.delete-btn):hover { background-color: rgba(0, 122, 255, 0.18); }

/* =========================================
   8. INPUTS, DROPDOWNS, CALENDARS
   ========================================= */
label {
    display: block; font-weight: 700; font-size: 12px;
    color: #48484A;
    margin: 14px 0 6px 0;
    text-transform: uppercase; letter-spacing: 0.5px;
}
label b { font-weight: inherit; }
form > label:first-child,
.field-container:first-child > label,
form > .field-container:first-of-type > label { margin-top: 0; }

input, select, textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #E3E5EA; border-radius: 10px;
    font-size: 14px; background-color: #FAFAFC; font-family: inherit; color: #1D1D1F;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
textarea { resize: vertical; min-height: 72px; line-height: 1.5; display: block; }
input:hover, select:hover, textarea:hover { border-color: #D1D4DB; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #007AFF; background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); }
input::placeholder, textarea::placeholder { color: #8E8E93; }

/* Read-only fields read as "locked" everywhere (overrides the scattered inline #eee) */
input:where([readonly]),
textarea:where([readonly]) {
    background-color: #F2F3F6 !important; color: #48484A; cursor: default;
}
input[readonly]:focus { box-shadow: none; border-color: #E3E5EA; }

/* Read-only inputs used as plain text in key-value reference tables (Transfer / Buy Back) */
table:not(:has(thead)) td input[readonly] {
    background: transparent !important; border: none; padding-left: 0; font-weight: 500; color: #1D1D1F;
}

/* Form controls in a card stay a comfortable width */
form > input, form > select, form > textarea,
.field-container > input, .field-container > select, .field-container > textarea,
form > div > input, form > div > select {
    max-width: 640px;
}

/* Custom Apple Select Dropdown */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px !important;
    cursor: pointer;
}

/* ----------------------------------------------------
   MAXIMUM ALLOWABLE NATIVE OS OVERRIDES
   ---------------------------------------------------- */
select option {
    background-color: #FFFFFF;
    color: #1D1D1F;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    padding: 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }

/* Totals in table footers read as figures, not editable boxes */
input#grandTotal,
tfoot input[readonly] {
    background: transparent !important; border: none; box-shadow: none !important;
    font-weight: 700; font-size: 15px; text-align: right; padding-right: 14px;
}
input#grandTotal { font-size: 16px; }

/* Filter controls placed directly on the page (Apartments, Customers) */
body > label { max-width: 420px; }
body > input, body > select {
    display: block; max-width: 420px; margin-bottom: 4px;
    background-color: #FFFFFF;
}
body > select ~ label { margin-top: 16px; }
body > input:last-of-type { margin-bottom: 24px; }

/* =========================================
   9. TABLES
   ========================================= */
body table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    white-space: nowrap; margin: 0; border: none;
}

/* A table placed directly on the page is a card of its own */
body > table {
    background-color: #FFFFFF; border-radius: 20px; padding: 10px 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    max-width: 1050px; margin: 0 0 30px;
}

th, td {
    border: none !important;
    border-bottom: 1px solid #F0F0F5 !important;
    padding: 12px 14px !important;
    text-align: left;
    vertical-align: middle !important;
}

th {
    color: #48484A;
    font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
thead th { color: #86868B; }
tbody tr:last-child > td, tbody tr:last-child > th { border-bottom: none !important; }

/* Row hover on listing tables (not on editable item rows) */
tbody:not(#itemsBody) tr:hover > td { background-color: #FAFAFC; }

/* Footer totals */
tfoot td { border-bottom: none !important; padding-top: 8px !important; padding-bottom: 8px !important; }
tfoot tr:first-child td { border-top: 1px solid #EAEBEE !important; }
tfoot tr:first-child td:has(> button) { border-top: none !important; padding-top: 14px !important; }
tfoot tr:has(td > button) + tr td { border-top: 1px solid #EAEBEE !important; }
tfoot b { color: #48484A; font-weight: 600; }
tfoot tr:last-child b { color: #1D1D1F; font-weight: 700; }

/* Empty / loading rows */
tbody td[colspan]:only-child { text-align: center; color: #86868B; padding: 28px 14px !important; }

/* Key–value detail tables (no header row / footer) */
td.label-cell,
table:not(:has(thead)):not(:has(tfoot)) td:first-child:not(:only-child) {
    width: 260px; color: #48484A; font-weight: 600; font-size: 13px;
}
table:not(:has(thead)) tr > th:first-child:not(:only-child) { width: 240px; }


/* Links inside tables */
td a { color: #007AFF !important; text-decoration: none !important; font-weight: 600; }
td a b { color: inherit; }
td a:hover { text-decoration: underline !important; }

/* wide second column only on tables with 5 columns or fewer, so 6-column item tables fit their card */
table:not(:has(th:nth-child(6))) th:nth-child(2) { width: 40%; }
table td:nth-child(2) input { min-width: 260px; }
table td:nth-child(3) input { min-width: 80px; }
table td:nth-child(4) input { min-width: 140px; }
table td:nth-child(5) input { min-width: 140px; }

/* 6-column item tables (Sales, Rent agreement, Rent payment, Transfer, Buy Back) need tighter cells */
table:has(th:nth-child(6)) th,
table:has(th:nth-child(6)) td { padding-left: 8px !important; padding-right: 8px !important; }
table:has(th:nth-child(6)) td:nth-child(2) input { min-width: 180px; }
table:has(th:nth-child(6)) td:nth-child(4) input,
table:has(th:nth-child(6)) td:nth-child(5) input { min-width: 110px; }

/* =========================================
   10. FILTER BARS & FIELDSETS
   ========================================= */
.filter-container,
.controls-container {
    display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end;
}
body .filter-container { margin-bottom: 30px; }
.filter-container > div,
.controls-container > div { flex: 1 1 200px; min-width: 0; }
.filter-container label,
.controls-container label { margin-top: 0; }
body .filter-container input,
body .filter-container select { padding: 10px 14px; }

/* Search row on Rent Agreement Details (label + input inline) */
body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 0;
}
body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) > label { margin: 0; }
body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) > input,
body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) > select {
    flex: 1 1 220px; width: auto;
}
body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) > label ~ label { margin-left: 8px; }

/* "Filter Transactions" boxes */
body > fieldset {
    border: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 10px; font-size: 0; min-width: 0;
}
body > fieldset > legend {
    float: left; width: 100%; padding: 0; margin: 0 0 4px;
    font-size: 16px; font-weight: 600; color: #1D1D1F;
}
body > fieldset > legend b { font-weight: 600; }
/* label + control pairs, two pairs per row */
body > fieldset > label { margin: 0; flex: 0 0 100px; }
body > fieldset > select,
body > fieldset > input { width: auto; flex: 0 1 calc(50% - 150px); min-width: 160px; margin-right: 20px; }
body > fieldset > button:first-of-type { margin-left: auto; }

/* Account balance tiles (Accounting Details) */
#pocketsContainer {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px; max-width: 1050px; margin: 0 0 30px;
}
#pocketsContainer > p { grid-column: 1 / -1; color: #86868B; }
#pocketsContainer > fieldset {
    background-color: #FFFFFF; border: none; border-radius: 16px; margin: 0;
    padding: 20px 22px; min-width: 0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
#pocketsContainer > fieldset > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
#pocketsContainer > fieldset > legend h2 { border: none; padding: 0; margin: 0; font-size: 16px; }
#pocketsContainer > fieldset > p { clear: both; margin: 0 0 4px; color: #86868B; font-size: 13px; }
#pocketsContainer > fieldset > p b { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; color: #1D1D1F; letter-spacing: -0.3px; }

/* =========================================
   11. SUMMARY TILES (Rent Accounting, Deposits)
   ========================================= */
div.summary-container {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; max-width: 1050px; margin: 0 0 30px;
}
div.summary-box {
    background-color: #FFFFFF; border: none; border-radius: 16px;
    padding: 20px 22px; min-width: 0; margin: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
body > div.summary-box { max-width: 360px; margin-bottom: 24px; }
div.summary-box h3 { font-size: 13px; font-weight: 600; color: #86868B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
div.summary-box p { margin: 0 !important; letter-spacing: -0.3px; }
div.summary-box-clickable { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
div.summary-box-clickable:hover { background-color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); }
div.account-line { font-size: 14px; color: #48484A; margin: 6px 0; display: flex; justify-content: space-between; gap: 12px; }

/* =========================================
   12. DETAIL VIEWS
   ========================================= */

/* Label/value lines placed directly on the page (Cost, Purchase, Utility details)
   are grouped into one card */
body > p:not(#message) {
    background-color: #FFFFFF; max-width: 1050px; box-sizing: border-box;
    margin: 0; padding: 10px 30px; border-bottom: 1px solid #F0F0F5;
}
body > :not(p) + p:not(#message) { border-radius: 20px 20px 0 0; padding-top: 24px; }
body > p:not(#message):has(+ :not(p)) { border-radius: 0 0 20px 20px; padding-bottom: 24px; margin-bottom: 30px; border-bottom: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); }
body > :not(p) + p:not(#message):has(+ :not(p)) { border-radius: 20px; }
body > p:not(#message) > b:first-child {
    display: inline-block; min-width: 180px; color: #48484A; font-weight: 600;
}

/* Payment detail rows */
.detail-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #F0F0F5; }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { min-width: 160px; color: #48484A; font-weight: 600; }
.detail-box a { color: #007AFF !important; text-decoration: none !important; font-weight: 600; }

/* Notification banner on Rent page */
#transferServiceBannerContainer { max-width: 1050px; }
#transferServiceBannerContainer > div {
    font-size: 14px; color: #1D1D1F; line-height: 1.5;
    border-radius: 16px !important; padding: 18px 22px !important;
    border-color: rgba(52, 199, 89, 0.35) !important; background-color: rgba(52, 199, 89, 0.10) !important;
}
#transferServiceBannerContainer button { border-radius: 50px !important; padding: 8px 16px !important; font-family: inherit; }

/* =========================================
   13. MODALS & DIALOGS
   (display is still driven by the page scripts)
   ========================================= */
body .modal { background-color: rgba(17, 18, 20, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body .modal .modal-content {
    background-color: #FFFFFF; border: none; border-radius: 20px;
    width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
    margin: 8vh auto; padding: 28px 30px; max-height: 84vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.modal-content h3, dialog h3 { font-size: 18px; margin-bottom: 6px; }
.modal-content > p, dialog p { color: #6E6E73; margin-bottom: 14px; }
.modal-content form { margin: 0; padding: 0; }
.modal-content form > label:first-child { margin-top: 4px; }
.modal-content input,
.modal-content select,
.modal-content textarea { width: 100% !important; }

dialog {
    border: none; border-radius: 20px; padding: 28px 30px;
    width: min(420px, calc(100vw - 32px)); box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
dialog::backdrop { background: rgba(17, 18, 20, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog input { margin-bottom: 18px; }

/* =========================================
   14. SCROLLBARS
   ========================================= */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* =========================================
   15. COLLAPSIBLE "CREATE NEW" FORMS
   Pages with a create form followed by a listing table
   (Accounting details, Apartments, Customers, Rent agreement).
   The form is folded into a bar. The form's first field (the
   read-only ID) is stretched invisibly over the bar, so clicking
   the bar focuses it and :focus-within opens the form. It stays
   open while any field inside has focus and folds again when you
   click outside it. The fold is delayed slightly so a click on
   the submit button still lands in every browser.
   ========================================= */
body > form:has(~ table) {
    position: relative;
    max-height: 64px; overflow: hidden;
    padding-top: 20px; padding-bottom: 20px;
    cursor: pointer;
    transition: max-height 0.3s ease 0.15s, padding 0.3s ease 0.15s, box-shadow 0.2s ease;
}
body > form:has(~ table):not(:focus-within):hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); }

/* Bar title */
body > form:has(~ table)::before {
    content: "\FF0B\2002 Click to open the form";
    display: block; line-height: 24px; margin-bottom: 20px;
    font-size: 15px; font-weight: 600; color: #007AFF;
}
/* Chevron */
body > form:has(~ table)::after {
    content: ""; position: absolute; top: 27px; right: 30px;
    width: 8px; height: 8px;
    border-right: 2px solid #86868B; border-bottom: 2px solid #86868B;
    transform: rotate(45deg); transition: transform 0.2s ease;
}

/* Invisible click target covering the bar while folded */
body > form:has(~ table) > input:first-of-type {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%; max-width: none; margin: 0;
    opacity: 0; cursor: pointer;
}

/* Open state */
body > form:has(~ table):focus-within {
    max-height: 4000px; overflow-x: auto;
    padding-top: 30px; padding-bottom: 30px;
    cursor: default;
    transition: max-height 0.4s ease, padding 0.2s ease, box-shadow 0.2s ease;
}
body > form:has(~ table):focus-within::before {
    content: "Click outside the form to close it";
    font-size: 13px; font-weight: 500; color: #86868B;
}
body > form:has(~ table):focus-within::after { top: 39px; transform: rotate(-135deg); }
body > form:has(~ table):focus-within > input:first-of-type {
    position: static; z-index: auto;
    height: auto; max-width: 640px;
    opacity: 1; cursor: default;
}

/* =========================================
   16. LANGUAGES: KURDISH (SORANI) & ARABIC, RIGHT-TO-LEFT
   Works together with Scripts/i18n.js, which sets
   <html lang="ckb|ar" dir="rtl">. English (dir="ltr")
   is not affected by anything in this section.
   ========================================= */

/* Hide the page for a moment while the first translation runs (no English flash) */
html.i18n-pending body { visibility: hidden; }

/* Fonts with Kurdish & Arabic letters. Digits stay 0-9. */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] select option,
html[dir="rtl"] textarea {
    font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Inter', -apple-system, sans-serif;
}
/* Arabic script must not be letter-spaced or upper-cased */
html[dir="rtl"] h1,
html[dir="rtl"] label,
html[dir="rtl"] th,
html[dir="rtl"] legend,
html[dir="rtl"] div.summary-box h3 { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] label { font-size: 13px; }
html[dir="rtl"] th { font-size: 13px; }

/* ---- Page frame + sidebar mirrored to the right ---- */
html[dir="rtl"] body {
    padding: 24px 110px 30px 32px;
    transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[dir="rtl"] body:has(#sidebar:hover) { padding-left: 32px; padding-right: 290px; }
html[dir="rtl"] #sidebar {
    left: auto; right: 0;
    border-right: none; border-left: 1px solid rgba(255,255,255,0.05);
}
html[dir="rtl"] #sidebar::before { left: auto; right: 0; }
html[dir="rtl"] #sidebar:hover::before { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] #sidebar button.nav-btn::before { margin-right: 0; margin-left: 15px; }
html[dir="rtl"] .menu-btn::before { content: "\2192"; }
html[dir="rtl"] .sub-menu { padding-left: 0; padding-right: 54px; }
html[dir="rtl"] .sub-menu button.sub-btn { text-align: right; }
html[dir="rtl"] span#userDisplay { padding-left: 0; padding-right: 10px; }
html[dir="rtl"] span#userDisplay::before { left: auto; right: 14px; }
html[dir="rtl"] span#userDisplay::after { left: auto; right: 60px; letter-spacing: 0; font-size: 10px; top: 0; }
html[dir="rtl"] #sidebar:hover span#userDisplay { padding-left: 0; padding-right: 60px; }
html[lang="ckb"] span#userDisplay::after { content: "چوویتە ژوورەوە وەک"; }
html[lang="ar"] span#userDisplay::after { content: "مسجّل الدخول باسم"; }

/* ---- Text alignment & mixed text (IDs, amounts, phone numbers keep their order) ---- */
html[dir="rtl"] th,
html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] td { unicode-bidi: plaintext; }
html[dir="rtl"] tfoot td[colspan] { text-align: left !important; }
html[dir="rtl"] input,
html[dir="rtl"] textarea { unicode-bidi: plaintext; text-align: right; }
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"] { direction: ltr; text-align: right; }
html[dir="rtl"] input#grandTotal,
html[dir="rtl"] tfoot input[readonly] { text-align: left; padding-left: 14px; padding-right: 0; }
html[dir="rtl"] table:not(:has(thead)) td input[readonly] { padding-left: 14px; padding-right: 0; }
html[dir="rtl"] .detail-row,
html[dir="rtl"] body > p:not(#message) { unicode-bidi: plaintext; text-align: right; }
/* Each label / value decides its own direction ("SAI-", "-69,500.00 USD", "REI-00004") */
html[dir="rtl"] label { unicode-bidi: plaintext; text-align: right; }
html[dir="rtl"] :is(b, strong, a, span:not(#userDisplay)) { unicode-bidi: plaintext; }
html[dir="rtl"] div.summary-box p,
html[dir="rtl"] #pocketsContainer > fieldset > p,
html[dir="rtl"] div.account-line { text-align: right; }

/* ---- Dropdown arrow on the left ---- */
html[dir="rtl"] select {
    background-position: left 14px center;
    padding-right: 14px !important; padding-left: 40px !important;
}

/* ---- Buttons, arrows and spacing mirrored ---- */
html[dir="rtl"] body > button:has(~ hr) { margin: 0 0 20px 8px; }
html[dir="rtl"] body > button:has(~ hr)::before { content: "\2192"; }
html[dir="rtl"] body > h1 ~ button { margin: 0 0 12px 12px; }
html[dir="rtl"] body > h1 ~ button::after { content: "\2190"; margin-left: 0; margin-right: 18px; }
html[dir="rtl"] body > h1 ~ button:hover::after { transform: translateX(-3px); }
html[dir="rtl"] body > button#transferBtn,
html[dir="rtl"] body > button#buyBackButton { margin: 0 0 30px 10px; }
html[dir="rtl"] body > button#transferBtn::after,
html[dir="rtl"] body > button#buyBackButton::after { content: none; }
html[dir="rtl"] #actionButtonsContainer button { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .modal-content button + button,
html[dir="rtl"] dialog button + button,
html[dir="rtl"] fieldset button + button { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] form#utilityRatesForm button[onclick^="reset"] { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] #itemsBody td:first-child button,
html[dir="rtl"] #itemsBody td:first-child input[type="button"] { margin-right: 0 !important; margin-left: 12px !important; }
html[dir="rtl"] body > div:has(> label):not(.filter-container):not(.controls-container):not(.summary-box):not(.modal) > label ~ label { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] body > fieldset > legend,
html[dir="rtl"] #pocketsContainer > fieldset > legend { float: right; }
html[dir="rtl"] body > fieldset > select,
html[dir="rtl"] body > fieldset > input { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] body > fieldset > button:first-of-type { margin-left: 0; margin-right: auto; }

/* ---- Collapsible create forms: chevron on the left + translated bar text ---- */
html[dir="rtl"] body > form:has(~ table)::after { right: auto; left: 30px; }
html[lang="ckb"] body > form:has(~ table):not(:focus-within)::before { content: "\FF0B\2002 کرتە بکە بۆ کردنەوەی فۆڕم"; }
html[lang="ar"] body > form:has(~ table):not(:focus-within)::before { content: "\FF0B\2002 انقر لفتح النموذج"; }
html[lang="ckb"] body > form:has(~ table):focus-within::before { content: "بۆ داخستنی، لە دەرەوەی فۆڕمەکە کرتە بکە"; }
html[lang="ar"] body > form:has(~ table):focus-within::before { content: "انقر خارج النموذج لإغلاقه"; }

/* ---- Financial dashboard (dashboard.html) ---- */
html[dir="rtl"] #dashboardRoot .db-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] #dashboardRoot .db-tile-label,
html[dir="rtl"] #dashboardRoot .db-badge,
html[dir="rtl"] #dashboardRoot table.db-table th { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] #dashboardRoot .db-tile-label { font-size: 13px; }
html[dir="rtl"] #dashboardRoot .db-money { unicode-bidi: plaintext; text-align: right; }
html[dir="rtl"] #dashboardRoot .db-money .db-cur { margin-left: 0; margin-right: 4px; }
html[dir="rtl"] #dashboardRoot table.db-table th,
html[dir="rtl"] #dashboardRoot table.db-table td { text-align: right; }
html[dir="rtl"] #dashboardRoot table.db-table td.num,
html[dir="rtl"] #dashboardRoot table.db-table th.num { text-align: left; }
html[dir="rtl"] #dashboardRoot .db-hbar .fill { border-radius: 4px 0 0 4px; }
html[dir="rtl"] #dashboardRoot .db-hbar .val { text-align: left; unicode-bidi: plaintext; }
html[dir="rtl"] #dashboardRoot .db-chart svg { direction: ltr; }
html[dir="rtl"] #dbTooltip { direction: rtl; }
html[dir="rtl"] #dbTooltip .tt-row i { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] #dbTooltip .tt-row span:last-child { unicode-bidi: plaintext; }

/* ---- Language switcher (added by i18n.js) ---- */
.lang-switch { display: flex; justify-content: center; gap: 4px; padding: 0 0 12px; }
.lang-switch button {
    font-family: 'Inter', 'Vazirmatn', 'Noto Sans Arabic', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    border: none; border-radius: 8px; padding: 6px 9px; cursor: pointer;
    background: rgba(255, 255, 255, 0.08); color: #E0E0E0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switch button:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.lang-switch button.active { background: #007AFF; color: #FFFFFF; }
/* Collapsed sidebar: only the current language, as a short code */
#sidebar:not(:hover) .lang-switch button:not(.active) { display: none; }
#sidebar:not(:hover) .lang-switch button.active { font-size: 0; padding: 6px 10px; }
#sidebar:not(:hover) .lang-switch button.active::after { content: attr(data-short); font-size: 12px; }

/* Floating version on pages without the sidebar (Login) */
body > .lang-switch.floating {
    position: fixed; top: 16px; right: 16px; z-index: 50;
    width: auto; max-width: none; margin: 0; padding: 4px;
    background: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: visible;
}
body > .lang-switch.floating button { background: transparent; color: #48484A; }
body > .lang-switch.floating button:hover { background: #F2F3F6; color: #1D1D1F; }
body > .lang-switch.floating button.active { background: #007AFF; color: #FFFFFF; }
html[dir="rtl"] body > .lang-switch.floating { right: auto; left: 16px; }

/* =========================================
   17. SMALL SCREENS
   ========================================= */
@media (max-width: 760px) {
    body { padding-right: 16px; padding-top: 16px; padding-left: 96px; }
    html[dir="rtl"] body { padding-left: 16px; padding-top: 16px; padding-right: 96px; }
    :where(body > div:not(#sidebar-placeholder, .modal, .summary-container, .load-more-container, #actionButtonsContainer, #transferServiceBannerContainer, #pocketsContainer)),
    :where(body > form),
    :where(body > fieldset) { padding: 20px; border-radius: 16px; }
    body > p:not(#message) { padding-left: 20px; padding-right: 20px; }
    body > p:not(#message) > b:first-child { min-width: 0; display: block; }
    h1 { font-size: 24px; }
    table td:nth-child(2) input { min-width: 180px; }
    body > h1 ~ button { min-width: 0; width: 100%; }
}