/* ============================================================
   TPTC ERP — shadcn/ui design language on Frappe v15
   Canonical shadcn tokens (oklch, neutral base, radius .625rem)
   mapped onto Frappe's own CSS custom properties.
   Dark mode follows Frappe's [data-theme="dark"] — optional, user-toggled.
   ============================================================ */

/* ---------- 1. shadcn canonical tokens ---------- */
:root {
  --radius: 0.625rem;

  --sh-background:          oklch(1 0 0);
  --sh-foreground:          oklch(0.145 0 0);
  --sh-card:                oklch(1 0 0);
  --sh-card-foreground:     oklch(0.145 0 0);
  --sh-popover:             oklch(1 0 0);
  --sh-primary:             oklch(0.205 0 0);
  --sh-primary-foreground:  oklch(0.985 0 0);
  --sh-secondary:           oklch(0.97 0 0);
  --sh-secondary-foreground:oklch(0.205 0 0);
  --sh-muted:               oklch(0.97 0 0);
  --sh-muted-foreground:    oklch(0.556 0 0);
  --sh-accent:              oklch(0.97 0 0);
  --sh-accent-foreground:   oklch(0.205 0 0);
  --sh-destructive:         oklch(0.577 0.245 27.325);
  --sh-border:              oklch(0.922 0 0);
  --sh-input:               oklch(0.922 0 0);
  --sh-ring:                oklch(0.708 0 0);

  /* ---------- 2. map onto Frappe's variables ---------- */
  --bg-color:            var(--sh-muted);
  --fg-color:            var(--sh-background);
  --card-bg:             var(--sh-card);
  --control-bg:          var(--sh-secondary);
  --control-bg-on-gray:  var(--sh-background);
  --navbar-bg:           var(--sh-background);
  --border-color:        var(--sh-border);
  --dark-border-color:   var(--sh-border);

  --text-color:          var(--sh-foreground);
  --heading-color:       var(--sh-foreground);
  --text-muted:          var(--sh-muted-foreground);
  --text-light:          var(--sh-muted-foreground);
  --disabled-text-color: var(--sh-muted-foreground);
  --subtle-fg:           var(--sh-secondary);
  --subtle-accent:       var(--sh-accent);

  --primary-color:       var(--sh-primary);
  --primary:             var(--sh-primary);
  --btn-primary:         var(--sh-primary);
  --sidebar-select-color:var(--sh-accent);

  --red-500: var(--sh-destructive);

  /* radii — shadcn scale */
  --border-radius-tiny: calc(var(--radius) - 6px);
  --border-radius-sm:   calc(var(--radius) - 4px);
  --border-radius:      calc(var(--radius) - 2px);
  --border-radius-md:   var(--radius);
  --border-radius-lg:   calc(var(--radius) + 2px);
  --border-radius-xl:   calc(var(--radius) + 6px);
  --card-border-radius: var(--radius);

  /* shadcn is famously shadow-light */
  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / .07), 0 1px 2px -1px rgb(0 0 0 / .07);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .07);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);
  --card-shadow: none;

  --navbar-height: 52px;

  /* type scale */
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-lg:   1rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
}

/* ---------- 3. dark mode — Frappe's own switch, stays optional ---------- */
[data-theme="dark"] {
  --sh-background:          oklch(0.145 0 0);
  --sh-foreground:          oklch(0.985 0 0);
  --sh-card:                oklch(0.205 0 0);
  --sh-popover:             oklch(0.205 0 0);
  --sh-primary:             oklch(0.922 0 0);
  --sh-primary-foreground:  oklch(0.205 0 0);
  --sh-secondary:           oklch(0.269 0 0);
  --sh-muted:               oklch(0.269 0 0);
  --sh-muted-foreground:    oklch(0.708 0 0);
  --sh-accent:              oklch(0.269 0 0);
  --sh-destructive:         oklch(0.704 0.191 22.216);
  --sh-border:              oklch(1 0 0 / 10%);
  --sh-input:               oklch(1 0 0 / 15%);
  --sh-ring:                oklch(0.556 0 0);

  --bg-color: oklch(0.145 0 0);
  --fg-color: oklch(0.205 0 0);
  --card-shadow: none;
}

/* ---------- 4. typography ---------- */
body, .navbar, .page-head, .widget, .form-control,
button, input, select, textarea, .btn {
  font-family: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg-color); color: var(--text-color); }
h1,h2,h3,h4,h5,h6,.page-title,.title-text,.widget-title,.section-head {
  color: var(--heading-color); font-weight: 600; letter-spacing: -.015em;
}
.page-title, .title-text { font-size: var(--font-size-xl); }
.control-label, .list-row-col .list-subject, .text-muted, .frappe-control .help-box {
  color: var(--text-muted) !important; font-weight: 400;
}

/* ---------- 5. surfaces: borders out, layered greys in ---------- */
.widget, .form-section, .card, .frappe-card, .form-page,
.layout-main-section, .page-body .form-layout {
  background: var(--card-bg) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.form-section .section-body .form-column { border: 0 !important; }
.form-tabs-sticky-down, .page-head { background: var(--fg-color) !important; box-shadow: none !important; }

/* ---------- 6. navbar ---------- */
.navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  box-shadow: none !important;
  height: var(--navbar-height);
}
.navbar .nav-link, .navbar .dropdown-toggle {
  color: var(--text-muted) !important;
  border-radius: var(--border-radius-sm);
  transition: background .15s, color .15s;
}
.navbar .nav-link:hover { background: var(--sh-accent); color: var(--text-color) !important; }

/* ---------- 7. sidebar ---------- */
.layout-side-section, .desk-sidebar { background: transparent !important; border: 0 !important; }
.desk-sidebar .desk-sidebar-item, .sidebar-item-container .desk-sidebar-item {
  border-radius: var(--border-radius-sm);
  margin-block: 1px;
  transition: background .12s ease;
}
.desk-sidebar .desk-sidebar-item:hover { background: var(--sh-accent); }
.desk-sidebar .desk-sidebar-item.selected,
.sidebar-item-container .desk-sidebar-item.selected {
  background: var(--sh-accent) !important;
  font-weight: 500;
  color: var(--sh-accent-foreground);
}
.sidebar-item-label { font-size: var(--font-size-base); }

/* ---------- 8. buttons — shadcn shapes ---------- */
.btn {
  border-radius: var(--border-radius) !important;
  font-weight: 500;
  font-size: var(--font-size-base);
  box-shadow: none !important;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary {
  background: var(--sh-primary) !important;
  color: var(--sh-primary-foreground) !important;
  border: 1px solid var(--sh-primary) !important;
}
.btn-primary:hover { opacity: .9; }
.btn-default, .btn-secondary {
  background: var(--sh-background) !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-foreground) !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--sh-accent) !important; }
.btn-danger { background: var(--sh-destructive) !important; border-color: var(--sh-destructive) !important; }

/* ---------- 9. inputs ---------- */
.form-control, select.form-control, .input-with-feedback, .like-disabled-input {
  background: var(--sh-background) !important;
  border: 1px solid var(--sh-input) !important;
  border-radius: var(--border-radius) !important;
  font-size: var(--font-size-base);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-control:focus-visible {
  border-color: var(--sh-ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sh-ring) 30%, transparent) !important;
  outline: none !important;
}

/* ---------- 10. lists & tables — no vertical rules, roomy rows ---------- */
.list-row-container { border: 0 !important; border-bottom: 1px solid var(--sh-border) !important; border-radius: 0 !important; box-shadow: none !important; }
.list-row, .dt-row { min-height: 48px; }
.list-row:hover, .list-row-container:hover { background: var(--sh-accent) !important; }
.list-row-head, .dt-row-header, .dt-cell--header {
  background: var(--sh-background) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-sm);
  text-transform: none;
}
.dt-cell { border-right: 0 !important; border-left: 0 !important; }
.datatable .dt-cell--col-1 { border-inline-start: 0 !important; }

/* ---------- 11. icons: unified, colour-follows-text, RTL-correct ---------- */
.icon, svg.icon { stroke-width: 1.75px; vertical-align: middle; color: currentColor; }
.icon-xs{width:12px;height:12px} .icon-sm{width:14px;height:14px}
.icon-md{width:16px;height:16px} .icon-lg{width:18px;height:18px}
[dir="rtl"] .icon-arrow-left, [dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-chevron-left, [dir="rtl"] .icon-chevron-right,
[dir="rtl"] .icon-small-left, [dir="rtl"] .icon-small-right,
[dir="rtl"] .icon-right, [dir="rtl"] .icon-left { transform: scaleX(-1); }

/* ---------- 12. badges / indicators ---------- */
.indicator-pill, .badge {
  border-radius: var(--border-radius-full, 9999px) !important;
  font-weight: 500; font-size: var(--font-size-sm);
  border: 1px solid var(--sh-border);
}

/* ---------- 13. page transition — RTL-safe (no translateX) ---------- */
@keyframes shPageIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }
.page-container .page-content, .workspace-body, .layout-main-section > .row {
  animation: shPageIn .16s cubic-bezier(.22,.61,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------- 14. scrollbars (replaces the 60KB nicescroll plugin) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--sh-border) transparent; }
*::-webkit-scrollbar { width:10px; height:10px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb { background: var(--sh-border); border-radius:9999px; border:3px solid transparent; background-clip: content-box }
*::-webkit-scrollbar-thumb:hover { background: var(--sh-muted-foreground); background-clip: content-box }

/* ---------- 15. modals & dropdowns ---------- */
.modal-content, .dropdown-menu, .awesomplete > ul {
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--sh-popover) !important;
}
.dropdown-item { border-radius: var(--border-radius-sm); }
.dropdown-item:hover { background: var(--sh-accent) !important; }

/* ============================================================
   16. Icon rail → native top dock  (pure CSS, no JS, no flash)
   Overrides the theme's own:
     .side-menu-icons{width:80px;position:absolute;top:0;bottom:0;left:0}
   ============================================================ */
.side-menu .side-menu-icons{
  position: fixed !important;
  top: 62px !important;
  inset-inline: 0 !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
  border: 0 !important; background: transparent !important;
  z-index: 260;
  display: flex !important; justify-content: center;
  pointer-events: none;
}
.side-menu .side-menu-icons > ul{
  position: static !important; inset: auto !important; margin: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: flex-start;
  gap: 3px; padding: 6px 10px; list-style: none;
  pointer-events: auto;
  background: color-mix(in srgb, var(--card-bg, #1b1e23) 88%, transparent);
  border: 1px solid var(--border-color, rgba(255,255,255,.10));
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.14);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  overflow: visible;
}
.side-menu .side-menu-icons > ul > li{ margin: 0 !important; display: block !important; }
.side-menu .side-menu-icons > ul > li > a{
  width: 38px !important; height: 38px !important; line-height: 38px !important;
  font-size: 18px !important; border-radius: 11px !important;
  border: 0 !important; color: var(--text-color) !important;
  transform-origin: top center;
  transition: transform .17s cubic-bezier(.22,.61,.36,1), background .17s !important;
  will-change: transform;
}
.side-menu .side-menu-icons > ul > li > a:hover{ background: var(--subtle-accent, rgba(255,255,255,.08)) !important; }

/* --- dock magnification, CSS-only: hovered item + its two neighbours --- */
.side-menu-icons > ul > li:hover > a{ transform: scale(1.75) translateY(7px); }
.side-menu-icons > ul > li:hover + li > a,
.side-menu-icons > ul > li:has(+ li:hover) > a{ transform: scale(1.35) translateY(4px); }
.side-menu-icons > ul > li:hover + li + li > a,
.side-menu-icons > ul > li:has(+ li + li:hover) > a{ transform: scale(1.12) translateY(2px); }
@media (prefers-reduced-motion: reduce){
  .side-menu-icons > ul > li > a{ transition: none !important; transform: none !important; }
}

/* --- reclaim the 80px the rail used to occupy --- */
.side-menu{ background: transparent !important; border: 0 !important; }
.side-menu .modules-menu,
.side-menu .side-menu-items{ inset-inline-start: 0 !important; }

/* --- make room for the dock --- */
.dv-app-content, .dv-app-theme.main-section, .page-container{ padding-top: 46px; }

/* ============================================================
   17. Navbar: search + language on the RIGHT
   Values below were tuned live by the user against the real UI.
   The theme lays the navbar out with floats and .dv-navbar is
   position:fixed, so it is our positioning context.
   Logical properties are used so this stays correct if the
   instance is switched to an LTR language.
   ============================================================ */
.dv-navbar .dv-nav-search{
  position: absolute !important;
  float: none !important;
  inset-inline-start: 140px !important;
  inset-inline-end: auto !important;
  top: 16px !important;
  margin: 0 !important;
  width: 290px !important;
  z-index: 5;
}
.dv-navbar .dv-nav-search .form-control{
  height: 32px !important;
  background: var(--control-bg, #1c222a) !important;
  border: 1px solid var(--border-color, rgba(255,255,255,.10)) !important;
  border-radius: var(--border-radius, 8px) !important;
  color: var(--text-color) !important;
  font-size: var(--font-size-sm, .8125rem) !important;
}
.dv-navbar .dv-nav-search .form-control:focus{
  border-color: var(--sh-ring, #8a8a8a) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-ring,#8a8a8a) 25%, transparent) !important;
}
.dv-navbar .dv-nav-search .search-icon{ top: 6px !important; }

.dv-navbar .dropdown-language,
.dv-navbar li.dropdown-language{
  position: absolute !important;
  float: none !important;
  inset-inline-start: 440px !important;
  inset-inline-end: auto !important;
  top: 5px !important;
  margin: 0 !important;
  z-index: 5;
}
.dv-navbar .dv-nav-left{ margin-inline-end: 0 !important; }

/* narrower screens: shrink, then fall back to the theme's own flow */
@media (max-width: 1200px){
  .dv-navbar .dv-nav-search{ width: 210px !important; }
  .dv-navbar .dropdown-language{ inset-inline-start: 360px !important; }
}
@media (max-width: 900px){
  .dv-navbar .dv-nav-search,
  .dv-navbar .dropdown-language{ position: static !important; float: right !important; }
}

/* ============================================================
   18. Navbar left cluster — positions set by dragging in the live UI
       notifications : left 270px · top 7px
       company (TPTC): left 315px · top 9px
   The user / theme buttons stay in the theme's normal float flow and
   reflow to fill the gap, which is the layout that was approved.
   `inset-inline-end` equals physical `left` in this RTL UI and mirrors
   correctly if the instance is ever switched to an LTR language.
   ============================================================ */
.dv-navbar .dropdown-notifications{
  position: absolute !important;
  float: none !important;
  inset-inline-end: 270px !important;
  inset-inline-start: auto !important;
  top: 7px !important;
  margin: 0 !important;
  z-index: 6;
}
.dv-navbar .session-company-switcher{
  position: absolute !important;
  float: none !important;
  inset-inline-end: 315px !important;
  inset-inline-start: auto !important;
  top: 9px !important;
  margin: 0 !important;
  z-index: 6;
}
@media (max-width: 900px){
  .dv-navbar .dropdown-notifications,
  .dv-navbar .session-company-switcher{ position: static !important; float: right !important; }
}