/* Tifli Al Mumayez brand theme — from "Tifli Almumayez Brand.dc.html" (Claude Design).
   Palette: mint #8FB5A6 (primary), sun #F9C74F (accent), blush #F4A6B2 (warm), forest #2E4A42 (text),
   dark mint #5B8A79 (buttons), cream #FBF7EF (backgrounds), light mint #EAF2EE, border #DCE6E1, muted #6B7A76.
   Fonts: Baloo Bhaijaan 2 (headings), IBM Plex Sans Arabic (body). */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

:root, [data-theme="light"] {
  --tifl-mint: #8FB5A6; --tifl-mint-dark: #5B8A79; --tifl-forest: #2E4A42; --tifl-sun: #F9C74F; --tifl-blush: #F4A6B2;
  --tifl-cream: #FBF7EF; --tifl-mint-light: #EAF2EE; --tifl-border: #DCE6E1; --tifl-muted: #6B7A76; --tifl-body: #2B3634;

  --font-stack: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --primary: var(--tifl-mint-dark);
  --primary-color: var(--tifl-mint-dark);
  --brand-color: var(--tifl-mint-dark);
  --btn-primary: var(--tifl-mint-dark);
  --border-primary: var(--tifl-mint-dark);
  --checkbox-color: var(--tifl-mint-dark);
  --bg-color: var(--tifl-cream);
  --navbar-bg: #ffffff;
  --subtle-accent: #F6F1E7;
  --subtle-fg: var(--tifl-mint-light);
  --control-bg: #F3F6F4;
  --control-bg-on-gray: #E6EDE9;
  --btn-default-bg: var(--tifl-mint-light);
  --btn-default-hover-bg: #DCE8E2;
  --btn-ghost-hover-bg: var(--tifl-mint-light);
  --sidebar-select-color: var(--tifl-mint-light);
  --border-color: var(--tifl-border);
  --dark-border-color: #C9D6D0;
  --table-border-color: var(--tifl-border);
  --highlight-color: #F6F1E7;
  --fg-hover-color: var(--tifl-mint-light);
  --text-color: var(--tifl-body);
  --heading-color: var(--tifl-forest);
  --text-muted: var(--tifl-muted);
  --text-light: var(--tifl-muted);
  --icon-stroke: var(--tifl-forest);
  --bg-green: #E3EFE9; --text-on-green: #2E4A42;
  --bg-yellow: #FDF1CB; --text-on-yellow: #7A5A00;
  --bg-pink: #FCE6EA; --text-on-pink: #8A3C48;
  --alert-bg-success: #E3EFE9; --alert-text-success: #2E4A42;
  --progress-bar-bg: var(--tifl-mint);
  --link-color: var(--tifl-mint-dark);
  --scrollbar-thumb-color: #C9D6D0; --scrollbar-track-color: #EFE9DE;
}

body { font-family: var(--font-stack); color: var(--tifl-body); }
h1, h2, h3, h4, .page-title .title-text, .ellipsis.title-text, .form-page .title-area .title-text,
.widget .widget-head .widget-title, .onboarding-step-title, .workspace-title, .sidebar-item-label.strong {
  font-family: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--tifl-forest);
}
.navbar { border-bottom: 1px solid var(--tifl-border); box-shadow: 0 2px 0 rgba(46, 74, 66, 0.04); }
.navbar .navbar-brand img, .navbar .app-logo { max-height: 34px; width: auto; }
.btn-primary { background-color: var(--tifl-mint-dark) !important; border-color: var(--tifl-mint-dark) !important; color: #fff !important; border-radius: 10px; }
.btn-primary:hover, .btn-primary:focus { background-color: #4F7A6A !important; border-color: #4F7A6A !important; }
.btn-default { border-radius: 10px; }
.btn-primary-light { background-color: var(--tifl-mint-light) !important; color: var(--tifl-forest) !important; }
.widget, .frappe-card, .page-card, .form-page .form-layout, .layout-main-section-wrapper .layout-main-section,
.list-row-container, .form-dashboard, .modal-content { border-radius: 14px; }
.widget.shortcut-widget-box, .widget.links-widget-box, .widget.number-widget-box { border: 1px solid var(--tifl-border); background: #fff; }
.widget.shortcut-widget-box:hover, .widget.links-widget-box:hover { box-shadow: 0 6px 18px rgba(46, 74, 66, 0.08); border-color: var(--tifl-mint); }
.desk-sidebar .standard-sidebar-item.selected, .sidebar-item.selected, .list-sidebar .sidebar-item.selected,
.layout-side-section .sidebar-item.selected, .sidebar-item-container.selected > .sidebar-item { background: var(--tifl-mint-light); color: var(--tifl-forest); }
.indicator-pill.green, .indicator-pill.blue { background: #E3EFE9; color: var(--tifl-forest); }
.indicator-pill.yellow, .indicator-pill.orange { background: #FDF1CB; color: #7A5A00; }
.indicator-pill.red, .indicator-pill.pink { background: #FCE6EA; color: #8A3C48; }
.form-control:focus, .frappe-control input:focus { border-color: var(--tifl-mint) !important; box-shadow: 0 0 0 2px rgba(143, 181, 166, 0.35) !important; }
a, .text-primary { color: var(--tifl-mint-dark); }
a:hover { color: var(--tifl-forest); }
.page-head { background: var(--tifl-cream); }
.list-row-head, .datatable .dt-header { background: var(--tifl-mint-light); }

/* ---- Website / login page ---- */
html, body, body.for-login, .for-login .page-card-container, .page_content.for-login, .page-container { background-color: var(--tifl-cream) !important; }
.for-login .page-card { background: #fff; border: 1px solid var(--tifl-border); border-radius: 24px; box-shadow: 0 2px 0 rgba(46, 74, 66, 0.06); padding: 32px 28px; }
.for-login .page-card-head { text-align: center; }
.page-card .page-card-head img.app-logo, .for-login img.app-logo, img.app-logo { width: 200px !important; max-width: 80% !important; height: auto !important; max-height: 110px !important; margin: 0 auto 10px !important; display: block; object-fit: contain; }
.page-card .page-card-head { height: auto !important; padding-top: 8px; }
.for-login .page-card-head h4, .for-login .page-card-head .h4, .for-login h4 { font-family: "Baloo Bhaijaan 2", system-ui, sans-serif; color: var(--tifl-forest); font-weight: 800; }
.for-login .form-control { border-radius: 14px; border: 1.5px solid var(--tifl-border); background: #fff; min-height: 42px; }
.for-login .btn-login, .for-login .btn-primary { background: var(--tifl-mint-dark) !important; border-color: var(--tifl-mint-dark) !important; color: #fff !important; border-radius: 14px; font-weight: 700; min-height: 42px; }
.for-login .btn-login-option { border-radius: 14px; border-color: var(--tifl-mint); color: var(--tifl-forest); background: #fff; }
.for-login .forgot-password-message a, .for-login a { color: var(--tifl-mint-dark); font-weight: 600; }
.web-footer, .website-footer { background: var(--tifl-cream); }