/* ==========================================================================
   Client portal theme  --  agile_management
   Loaded via web_include_css, so it applies to every portal page including
   ERPNext's own (issues, blog, newsletters, my account), not just ours.
   Targets Frappe's real shell classes: .navbar, .web-sidebar, .sidebar-item,
   .page_content, .web-footer.
   ========================================================================== */

:root {
  --p-bg:        #f7f7f5;
  --p-surface:   #ffffff;
  --p-surface-2: #f4f4f2;
  --p-ink:       #14140f;
  --p-ink-2:     #52514e;
  --p-ink-3:     #85847d;
  --p-rule:      #e5e5e0;
  --p-accent:    #2a78d6;
  --p-accent-ink:#ffffff;
  --p-good:      #0ca30c;
  --p-warn:      #b26a00;
  --p-bad:       #d03b3b;
  --p-radius:    10px;
  --p-radius-sm: 7px;
  --p-shadow:    0 1px 2px rgba(16,16,14,.05), 0 1px 3px rgba(16,16,14,.04);
  --p-shadow-lg: 0 4px 16px rgba(16,16,14,.08);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --p-bg:#141413; --p-surface:#1c1c1b; --p-surface-2:#232322;
    --p-ink:#f5f5f0; --p-ink-2:#c3c2b7; --p-ink-3:#8e8d85; --p-rule:#32322e;
    --p-accent:#3987e5;
    --p-shadow:0 1px 2px rgba(0,0,0,.4); --p-shadow-lg:0 4px 16px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --p-bg:#141413; --p-surface:#1c1c1b; --p-surface-2:#232322;
  --p-ink:#f5f5f0; --p-ink-2:#c3c2b7; --p-ink-3:#8e8d85; --p-rule:#32322e;
  --p-accent:#3987e5;
  --p-shadow:0 1px 2px rgba(0,0,0,.4); --p-shadow-lg:0 4px 16px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
body {
  background: var(--p-bg) !important;
  color: var(--p-ink);
  -webkit-font-smoothing: antialiased;
}
body, .page_content, .web-sidebar { font-size: 14px; line-height: 1.55; }
a { color: var(--p-accent); }
/* No `a:hover` colour rule here: at (0,1,1) it outranks Tailwind's single
   utility classes and repainted nav labels on the shell pages. ERPNext's own
   pages inherit the base `a` colour, which is what they had anyway. */
h1,h2,h3,h4,h5 { color: var(--p-ink); font-weight: 650; letter-spacing:-.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
.text-muted, .muted { color: var(--p-ink-3) !important; }

/* ---------- top bar ---------- */
.navbar {
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-rule);
  box-shadow: none;
  padding: .45rem 0;
}
.navbar .navbar-brand { font-weight: 650; color: var(--p-ink) !important; }
.navbar .nav-link { color: var(--p-ink-2) !important; font-weight: 500; }
.navbar .nav-link:hover { color: var(--p-ink) !important; }
.dropdown-menu {
  border: 1px solid var(--p-rule); border-radius: var(--p-radius-sm);
  box-shadow: var(--p-shadow-lg); background: var(--p-surface); padding: 5px;
}
.dropdown-item { border-radius: 5px; color: var(--p-ink-2); font-size: .875rem; }
.dropdown-item:hover { background: var(--p-surface-2); color: var(--p-ink); }

/* ---------- layout ---------- */
main.container, .container > .row { padding-top: 6px; }
.page_content { padding-bottom: 40px; }
.page-header-wrapper { margin-bottom: 4px; }

/* ---------- sidebar ---------- */
.sidebar-column { padding-right: 22px; }
.web-sidebar {
  background: var(--p-surface);
  border: 1px solid var(--p-rule);
  border-radius: var(--p-radius);
  padding: 9px;
  box-shadow: var(--p-shadow);
  position: sticky; top: 16px;
}
.web-sidebar .sidebar-items ul { margin: 0; }
.web-sidebar .sidebar-items ul + ul {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--p-rule);
}
.web-sidebar .sidebar-item { margin: 1px 0; }
.web-sidebar .sidebar-item a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--p-radius-sm);
  color: var(--p-ink-2); font-weight: 500; font-size: .875rem;
  text-decoration: none; transition: background .13s ease, color .13s ease;
}
.web-sidebar .sidebar-item a:hover {
  background: var(--p-surface-2); color: var(--p-ink);
}
/* Frappe's own JS stamps .active on the current route */
.web-sidebar .sidebar-item a.active {
  background: var(--p-accent); color: var(--p-accent-ink); font-weight: 600;
}
.web-sidebar .sidebar-item a.active::before { background: var(--p-accent-ink); }

/* Icons injected by route, so no template changes are needed. Masked SVG
   inherits the link colour, including the active state. */
.web-sidebar .sidebar-item a::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 17px;
  background: var(--p-ink-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
}
.web-sidebar .sidebar-item a:hover::before { background: var(--p-ink); }
.web-sidebar .sidebar-item a[href^="/my-projects"],
.web-sidebar .sidebar-item a[href^="/project"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h6l2 2h10v10H3z"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/project-health"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-6 4 4 5-8 4 5"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/issues"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/newsletters"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/blog"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h11l3 3v13H5z"/><path d="M8 10h8M8 14h6"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/material-requests"],
.web-sidebar .sidebar-item a[href^="/orders"],
.web-sidebar .sidebar-item a[href^="/invoices"],
.web-sidebar .sidebar-item a[href^="/quotations"],
.web-sidebar .sidebar-item a[href^="/shipments"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12l2 5-8 13L4 8z"/></svg>');
}
.web-sidebar .sidebar-item a[href^="/me"] {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>');
}

/* ---------- cards & surfaces ---------- */
.card, .web-card {
  background: var(--p-surface); border: 1px solid var(--p-rule);
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
}
.card-body { padding: 16px 18px; }

/* ---------- tables ---------- */
.page_content table:not(.no-theme) {
  width: 100%; border-collapse: collapse; background: var(--p-surface);
  border: 1px solid var(--p-rule); border-radius: var(--p-radius);
  overflow: hidden; font-size: .875rem;
}
.page_content table:not(.no-theme) thead th {
  background: var(--p-surface-2); color: var(--p-ink-3);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; padding: 10px 13px; border-bottom: 1px solid var(--p-rule);
  text-align: left;
}
.page_content table:not(.no-theme) td {
  padding: 11px 13px; border-bottom: 1px solid var(--p-rule);
  color: var(--p-ink); vertical-align: middle;
}
.page_content table:not(.no-theme) tbody tr:last-child td { border-bottom: none; }
.page_content table:not(.no-theme) tbody tr:hover { background: var(--p-surface-2); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--p-rule) !important; }

/* ---------- ERPNext portal list rows ---------- */
.web-list-item {
  background: var(--p-surface); border: 1px solid var(--p-rule);
  border-radius: var(--p-radius-sm); margin-bottom: 8px; padding: 13px 15px;
  transition: box-shadow .14s ease, transform .14s ease;
}
.web-list-item:hover { box-shadow: var(--p-shadow-lg); transform: translateY(-1px); }
.result .list-item, .transaction-list-item {
  border-color: var(--p-rule) !important; border-radius: var(--p-radius-sm);
}

/* ---------- buttons ---------- */
.btn { border-radius: var(--p-radius-sm); font-weight: 550; font-size: .875rem;
  padding: 7px 15px; transition: filter .14s ease; }
.btn-primary, .btn-dark {
  background: var(--p-accent) !important; border-color: var(--p-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-dark:hover { filter: brightness(1.08); }
.btn-secondary, .btn-default, .btn-light {
  background: var(--p-surface) !important; color: var(--p-ink) !important;
  border: 1px solid var(--p-rule) !important;
}
.btn-secondary:hover, .btn-default:hover { background: var(--p-surface-2) !important; }

/* ---------- forms ---------- */
.form-control, .form-control:focus, select.form-control {
  background: var(--p-surface); color: var(--p-ink);
  border: 1px solid var(--p-rule); border-radius: var(--p-radius-sm);
  font-size: .875rem; padding: 8px 11px; box-shadow: none;
}
.form-control:focus {
  border-color: var(--p-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 18%, transparent);
}
label, .control-label { color: var(--p-ink-2); font-weight: 550; font-size: .8rem; }

/* ---------- badges / indicators ---------- */
.badge, .indicator-pill {
  border-radius: 11px; font-weight: 600; font-size: .72rem; padding: 3px 9px;
}
.badge-secondary { background: var(--p-surface-2); color: var(--p-ink-2); }
.badge-success, .indicator-pill.green { background: var(--p-good); color: #fff; }
.badge-danger,  .indicator-pill.red   { background: var(--p-bad);  color: #fff; }

/* ---------- footer ---------- */
.web-footer {
  background: transparent; border-top: 1px solid var(--p-rule);
  margin-top: 34px; padding-top: 20px; color: var(--p-ink-3); font-size: .8rem;
}
.web-footer a { color: var(--p-ink-3); }

/* ---------- breadcrumbs / misc ---------- */
.page-breadcrumbs { padding: 10px 0 0; font-size: .8rem; }
.page-breadcrumbs a { color: var(--p-ink-3); }
hr { border-color: var(--p-rule); }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .sidebar-column { padding-right: 15px; margin-bottom: 14px; }
  .web-sidebar { position: static; }
  .web-sidebar .sidebar-items ul {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .web-sidebar .sidebar-item a { padding: 7px 11px; }
  .page_content table:not(.no-theme) { font-size: .82rem; }
  h1 { font-size: 1.4rem; }
}