/* ============================================================
   PMA — Project Monitoring Application
   mfysys Private Limited | style.css
   ============================================================ */

:root {
  --navy:       #0f2557;
  --blue:       #1a56db;
  --blue-lt:    #e8f0fe;
  --accent:     #0ea5e9;
  --green:      #059669;
  --green-lt:   #d1fae5;
  --amber:      #d97706;
  --amber-lt:   #fef3c7;
  --red:        #dc2626;
  --red-lt:     #fee2e2;
  --slate:      #475569;
  --gray-lt:    #f8fafc;
  --gray-bd:    #e2e8f0;
  --white:      #ffffff;
  --text:       #1e293b;
  --text-muted: #64748b;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(15,37,87,.08);
  --shadow-md:  0 4px 24px rgba(15,37,87,.13);
  --font:       'Inter', sans-serif;
  --font-head:  'Poppins', sans-serif;
}

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: #f0f4fb;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Navbar ────────────────────────────────────────────── */
.pma-navbar {
  background: var(--navy);
  border-bottom: 3px solid var(--accent);
  padding: 0 0;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.brand-icon {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1;
}
.brand-sub {
  font-size: 11px;
  color: #93c5fd;
  display: block;
  margin-left: 2px;
  font-weight: 400;
}
.nav-company {
  font-size: 12px;
  color: #93c5fd;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 14px;
}
.nav-user {
  font-size: 13px;
  color: #e0e7ff;
  font-weight: 500;
}
.btn-logout {
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.25);
  color: #e0e7ff;
  border-radius: 6px;
  background: transparent;
  transition: all .2s;
}
.btn-logout:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Content & Footer ──────────────────────────────────── */
.pma-content {
  flex: 1;
  padding: 28px 24px 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.pma-footer {
  background: var(--navy);
  color: #93c5fd;
  font-size: 12px;
  padding: 12px 24px;
  margin-top: auto;
}

/* ── Page Header ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-bd);
}
.page-header h1 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.page-breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Stats Cards ────────────────────────────────────────── */
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card.border-blue  { border-color: var(--blue); }
.stat-card.border-green { border-color: var(--green); }
.stat-card.border-amber { border-color: var(--amber); }
.stat-card.border-red   { border-color: var(--red); }
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.stat-icon.blue  { background: var(--blue-lt);  color: var(--blue); }
.stat-icon.green { background: var(--green-lt); color: var(--green); }
.stat-icon.amber { background: var(--amber-lt); color: var(--amber); }
.stat-icon.red   { background: var(--red-lt);   color: var(--red); }
.stat-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-head);
  line-height: 1;
  color: var(--navy);
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Alert Strip ────────────────────────────────────────── */
.alert-strip {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.alert-strip i { font-size: 16px; color: var(--amber); }
.alert-item {
  background: rgba(255,255,255,.6);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: #92400e;
  transition: background .2s;
}
.alert-item:hover { background: rgba(255,255,255,.9); color: #78350f; }
.alert-item.red {
  background: #fee2e2;
  color: var(--red);
}

/* ── Card ───────────────────────────────────────────────── */
.pma-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.pma-card-header {
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pma-card-header i { color: var(--accent); }
.pma-card-body { padding: 20px; }

/* ── Tables ─────────────────────────────────────────────── */
.pma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pma-table thead th {
  background: #f1f5f9;
  color: var(--navy);
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 2px solid var(--gray-bd);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
}
.pma-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gray-bd);
  vertical-align: middle;
}
.pma-table tbody tr:last-child td { border-bottom: none; }
.pma-table tbody tr:hover { background: #f8fbff; }
.pma-table tbody tr.clickable { cursor: pointer; }

/* ── Badges ─────────────────────────────────────────────── */
.badge-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-planning    { background: #e0e7ff; color: #3730a3; }
.badge-inprogress  { background: var(--green-lt); color: var(--green); }
.badge-onhold      { background: var(--amber-lt); color: var(--amber); }
.badge-completed   { background: #f1f5f9; color: var(--slate); }
.badge-paid        { background: var(--green-lt); color: var(--green); }
.badge-pending     { background: var(--amber-lt); color: var(--amber); }
.badge-overdue     { background: var(--red-lt); color: var(--red); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-pma {
  background: var(--blue);
  color: var(--white);
  border: none;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  text-decoration: none;
}
.btn-pma:hover { background: #1447b8; color: #fff; transform: translateY(-1px); }
.btn-pma-sm { padding: 5px 12px; font-size: 12px; }
.btn-pma-navy  { background: var(--navy); }
.btn-pma-navy:hover { background: #0a1a40; }
.btn-pma-green  { background: var(--green); }
.btn-pma-green:hover { background: #047857; }
.btn-pma-whatsapp  { background: #25d366; color: #fff; }
.btn-pma-whatsapp:hover { background: #1dae52; color: #fff; }
.btn-pma-whatsapp.disabled,
.btn-pma-whatsapp:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
}
.btn-pma-red   { background: var(--red); color: #fff; }
.btn-pma-red:hover { background: #b91c1c; }
.btn-pma-outline {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.btn-pma-outline:hover { background: var(--blue); color: #fff; }

/* ── Forms ──────────────────────────────────────────────── */
.form-label-pma {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
  display: block;
}
.form-control, .form-select {
  border: 1.5px solid var(--gray-bd);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px;
  transition: border-color .2s, box-shadow .2s;
  background: #fafbff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1);
  background: #fff;
}
textarea.form-control { resize: vertical; min-height: 90px; }

/* ── Activity Feed ──────────────────────────────────────── */
.activity-feed { position: relative; }
.activity-date-group { margin-bottom: 20px; }
.activity-date-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.activity-date-label span {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  background: #e2e8f0;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.activity-date-label::before,
.activity-date-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-bd);
}
.activity-item {
  display: flex;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--gray-bd);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: box-shadow .2s, border-color .2s;
}
.activity-item:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.activity-emoji {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-lt);
  border-radius: 8px;
}
.activity-body { flex: 1; min-width: 0; }
.activity-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.activity-desc {
  font-size: 13px;
  color: var(--text);
  margin: 3px 0 4px;
  line-height: 1.5;
}
.activity-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.activity-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
  background: var(--blue-lt);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: background .2s;
}
.activity-doc-link:hover { background: #bfdbfe; color: var(--navy); }
.activity-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  font-size: 14px;
  transition: color .2s, background .2s;
}
.activity-delete:hover { color: var(--red); background: var(--red-lt); }

.activity-action-whatsapp {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: #dcfce7;
  color: #16a34a;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s, background .2s;
}
.activity-action-whatsapp:hover {
  background: #bbf7d0;
  color: #15803d;
}
.activity-action-whatsapp.disabled,
.activity-action-whatsapp:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* ── Add Activity Form Box ──────────────────────────────── */
.add-activity-box {
  background: #f8fbff;
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.add-activity-box .box-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Payment Panel ──────────────────────────────────────── */
.payment-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.pay-sum-item {
  background: var(--gray-lt);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid var(--gray-bd);
}
.pay-sum-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.pay-sum-value { font-size: 18px; font-weight: 700; color: var(--navy); font-family: var(--font-head); }

.renewal-box {
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.renewal-box.warning { background: var(--amber-lt); color: var(--amber); border: 1px solid #fcd34d; }
.renewal-box.ok      { background: var(--green-lt); color: var(--green); border: 1px solid #6ee7b7; }
.renewal-box.expired { background: var(--red-lt);   color: var(--red);   border: 1px solid #fca5a5; }

/* ── Project Info Panel ─────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.info-item { }
.info-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  margin-top: 2px;
}

/* ── Login Page ─────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2557 0%, #1a3a8f 50%, #0ea5e9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--white);
  border-radius: 16px;
  padding: 42px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo .logo-box {
  width: 60px; height: 60px;
  background: var(--blue);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(26,86,219,.3);
}
.login-logo h1 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 3px;
  margin: 0;
}
.login-logo p { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.login-company { font-size: 11px; color: var(--blue); font-weight: 600; text-align: center; margin-bottom: 24px; }

/* ── Modals ─────────────────────────────────────────────── */
.modal-content { border: none; border-radius: 14px; overflow: hidden; }
.modal-header  { background: var(--navy); color: #fff; border: none; padding: 16px 22px; }
.modal-header .btn-close { filter: invert(1); }
.modal-body   { padding: 24px; }
.modal-footer { background: #f8fafc; border-top: 1px solid var(--gray-bd); padding: 14px 22px; }

/* Ensure Bootstrap modals appear above page footer/navbar when open */
.modal {
  z-index: 20050 !important;
}
.modal-backdrop {
  z-index: 20040 !important;
}

/* ── Misc ───────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: 14px; }

.section-divider {
  border: none;
  border-top: 1px solid var(--gray-bd);
  margin: 20px 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 4px;
  font-weight: 500;
  transition: gap .2s;
}
.back-link:hover { color: var(--navy); gap: 8px; }

/* Role-based application navigation; the login page keeps its existing layout. */
.pma-app { --pma-sidebar-width:256px; --pma-topbar-height:72px; }
.pma-topbar { height:var(--pma-topbar-height); min-height:var(--pma-topbar-height); z-index:1030; flex-shrink:0; }
.pma-topbar .brand-sub { margin-top:5px; font-size:10px; }
.pma-topbar-context { flex-direction:column; gap:3px; border-left:1px solid rgba(255,255,255,.16); padding-left:24px; margin-left:20px; min-width:0; }
.pma-topbar-company { font-size:10px; color:#a5c8ff; letter-spacing:.5px; }
.pma-topbar-page { font-size:13px; color:#fff; font-weight:500; }
.pma-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; color:white; border:1px solid rgba(255,255,255,.2); font-size:23px; flex-shrink:0; }
.pma-menu-toggle .bi-x-lg { font-size:18px; }
.pma-menu-toggle:hover, .pma-menu-toggle:focus-visible { color:#fff; background:rgba(255,255,255,.12); }
.pma-role-pill { align-items:center; padding:5px 10px; border-radius:20px; background:rgba(14,165,233,.15); color:#b9e8ff; border:1px solid rgba(125,211,252,.25); font-size:11px; font-weight:600; white-space:nowrap; }
.pma-quick-add { background:#fff; color:var(--navy); border:1px solid #fff; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600; white-space:nowrap; }
.pma-quick-add:hover, .pma-quick-add.show { background:#e8f0fe; color:var(--navy); border-color:#e8f0fe; }
.pma-account-toggle { display:flex; align-items:center; gap:9px; padding:3px; color:#e0e7ff; border:0; font-size:12px; }
.pma-account-toggle:hover, .pma-account-toggle.show { color:#fff; }
.pma-avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#244887; border:1px solid #6688bc; color:white; font-size:12px; font-weight:700; }
.pma-account-name { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pma-dropdown { padding:8px; border:1px solid var(--gray-bd); border-radius:12px; box-shadow:var(--shadow-md); min-width:220px; margin-top:12px !important; font-size:13px; }
.pma-dropdown .dropdown-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:7px; color:var(--slate); font-weight:500; }
.pma-dropdown .dropdown-item:hover, .pma-dropdown .dropdown-item:focus { background:var(--blue-lt); color:var(--blue); }
.pma-dropdown .dropdown-item i { width:18px; font-size:16px; }
.pma-dropdown .dropdown-header { padding:7px 12px; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.pma-account-menu { max-width:300px; }
.pma-account-menu strong, .pma-account-menu small { overflow-wrap:anywhere; }
.pma-sidebar { --bs-offcanvas-width:280px; background:#fff; border-right:1px solid var(--gray-bd); }
.pma-sidebar .offcanvas-body { display:flex; flex-direction:column; padding:0; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.pma-sidebar-mobile-header { background:var(--navy); color:#fff; border-bottom:3px solid var(--accent); padding:19px 20px; }
.pma-sidebar-mobile-header .offcanvas-title { font-size:16px; font-weight:600; }
.pma-sidebar-mobile-header .btn-close { filter:invert(1); }
.pma-workspace-label { display:flex; align-items:center; gap:11px; padding:22px 19px 18px; border-bottom:1px solid #f1f5f9; }
.pma-workspace-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--blue-lt); color:var(--blue); font-size:18px; }
.pma-workspace-label strong { display:block; color:var(--navy); font-size:12px; }
.pma-workspace-label small { display:block; font-size:10px; color:var(--text-muted); margin-top:3px; line-height:1.5; }
.pma-sidebar-nav { padding:12px 12px 20px; flex:1; }
.pma-menu-group + .pma-menu-group { margin-top:12px; }
.pma-menu-heading { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 12px 7px; background:none; border:0; color:#718096; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.15px; text-align:left; }
.pma-menu-heading i { font-size:10px; transition:transform .2s; }
.pma-menu-heading.collapsed i { transform:rotate(-90deg); }
.pma-menu-heading:focus-visible { outline:2px solid var(--blue); border-radius:6px; }
.pma-menu-link.nav-link { display:flex; align-items:center; gap:11px; padding:10px 12px; margin:2px 0; min-height:40px; border-radius:8px; color:#4b5c75; font-size:12px; font-weight:500; line-height:1.4; transition:background .15s,color .15s; }
.pma-menu-link > i { font-size:17px; width:20px; flex-shrink:0; text-align:center; color:#7e90aa; }
.pma-menu-link:hover, .pma-menu-link:focus-visible { color:var(--blue); background:#f2f6fd; }
.pma-menu-link.active { background:var(--blue-lt); color:var(--blue); font-weight:600; box-shadow:inset 3px 0 var(--blue); }
.pma-menu-link.active > i { color:var(--blue); }
.pma-active-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--blue); margin-left:auto; }
.pma-sidebar-footer { display:flex; align-items:center; gap:7px; margin-top:auto; padding:15px 22px; border-top:1px solid var(--gray-bd); font-size:10px; color:var(--text-muted); }
.pma-sidebar-footer small { margin-left:auto; color:#94a3b8; }
.pma-sidebar-status { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--green); }
.pma-app-main { display:flex; flex-direction:column; flex:1; min-width:0; }
.pma-app .pma-content { padding:28px; }
.pma-content:focus { outline:none; }
.pma-footer-version { color:#a5c8ff; font-size:10px; }
.pma-app [id] { scroll-margin-top:88px; }
.pma-skip-link { position:fixed; top:8px; left:8px; padding:10px 16px; background:white; color:var(--blue); border-radius:8px; z-index:20060; }
.pma-project-context { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border:1px solid #d8e4f6; background:#f8fbff; border-radius:var(--radius); color:var(--navy); }
.pma-project-context .nav-link { font-size:12px; padding:7px 12px; }
.pma-project-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:var(--blue); background:var(--blue-lt); font-size:21px; }
.pma-project-title { font-size:15px; line-height:1.5; margin-bottom:5px; }
.pma-project-title a { color:var(--navy); text-decoration:none; }
.pma-member-chip { display:flex; align-items:center; gap:9px; background:#f8fafc; border:1px solid var(--gray-bd); padding:9px 11px; border-radius:9px; font-size:12px; }
.pma-member-chip > i { color:var(--blue); font-size:17px; }
.pma-task-progress { height:5px; min-width:100px; background:#e2e8f0; }
.pma-task-update { min-width:135px; }
.pma-work-table td:first-child { min-width:220px; }
.pma-work-table td { min-width:130px; }
.pma-work-table .pma-row-actions { min-width:170px; }
.pma-work-context { padding:12px 15px; background:#f1f6ff; border:1px solid #dce7fa; border-radius:8px; }
.pma-work-report td { min-width:110px; max-width:340px; white-space:normal; overflow-wrap:anywhere; }
.pma-review-form { min-width:180px; }
.pma-finance-stats .stat-value { font-size:clamp(18px,1.55vw,24px); line-height:1.2; font-variant-numeric:tabular-nums; }
.pma-money { font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pma-amount-in { color:#087f5b !important; }
.pma-amount-out { color:#c92a2a !important; }
.pma-amount-pending { color:#a15c00 !important; font-weight:600; }
.pma-amount-zero { color:var(--text-muted) !important; }
.pma-button-in { background:#087f5b; }
.pma-button-in:hover { background:#066547; }
.pma-button-out { background:#c92a2a; }
.pma-button-out:hover { background:#a61e1e; }
.pma-direction { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.4px; white-space:nowrap; }
.pma-direction-in { background:#e6fcf5; color:#087f5b; }
.pma-direction-out { background:#fff0f0; color:#c92a2a; }
.pma-state { display:inline-flex; align-items:center; padding:5px 9px; background:#eff3f9; color:#475569; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.pma-state-paid,.pma-state-approved,.pma-lead-won { color:#087f5b; background:#e6fcf5; }
.pma-state-pending,.pma-lead-proposal,.pma-lead-negotiation { color:#925900; background:#fff4d6; }
.pma-state-overdue,.pma-state-rejected,.pma-lead-lost { color:#b42323; background:#ffeded; }
.pma-lead-new,.pma-lead-contacted,.pma-lead-qualified { color:#2154a0; background:#edf3ff; }
.pma-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pma-row-actions .btn-pma-sm { white-space:nowrap; }
.pma-delete-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:29px; padding:5px 8px; border:1px solid #f2cccc; border-radius:6px; background:#fff; color:#b42323; font-size:11px; font-weight:600; line-height:1.2; }
.pma-delete-button:hover,.pma-delete-button:focus-visible { background:#fff0f0; border-color:#dc8d8d; }
.pma-delete-modal .modal-header { background:#fff1f1; color:#a51e1e; }
.pma-delete-modal .modal-header .btn-close { filter:none; }
.pma-list-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 18px; border-bottom:1px solid var(--gray-bd); }
.pma-list-toolbar .nav-link { font-size:12px; padding:7px 11px; }
.pma-filter-panel { padding:16px 20px; background:#f8fafd; border-bottom:1px solid var(--gray-bd); }
.pma-filter-panel .form-label { font-size:11px; font-weight:600; margin-bottom:4px; }
.pma-ledger-table td { padding-top:16px; padding-bottom:16px; }
.pma-ledger-table td:nth-child(2) { min-width:220px; }
.pma-ledger-summary { display:flex; flex-wrap:wrap; gap:14px 28px; padding:16px 20px; background:#f8fafc; border-top:1px solid var(--gray-bd); font-size:12px; color:var(--slate); }
.pma-ledger-summary .pma-money { margin-left:8px; }
.pma-form-modal .modal-body { padding:22px; }
.pma-form-modal .form-label { font-size:12px; font-weight:600; color:#334155; margin-bottom:5px; }
.pma-form-modal .form-control,.pma-form-modal .form-select { font-size:13px; }
.pma-form-modal small { font-size:10px; }
.pma-form-modal .pma-card { box-shadow:none; margin:0; }
.pma-modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:16px; border-top:1px solid var(--gray-bd); margin-top:20px; }
.pma-details-toggle { display:flex; align-items:center; gap:8px; padding:5px 0; border:0; background:none; color:var(--blue); font-size:12px; font-weight:600; }
.pma-form-details { margin:0; padding:6px 4px 16px; border:1px solid var(--gray-bd); background:#f8fafc; border-radius:8px; }
.pma-form-total { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-radius:8px; background:#f1f5fb; font-size:13px; }
.pma-form-total strong { font-size:21px; font-variant-numeric:tabular-nums; }
.pma-pipeline { display:flex; gap:10px; flex-wrap:wrap; }
.pma-pipeline-item { display:flex; align-items:center; gap:12px; padding:11px 15px; border:1px solid var(--gray-bd); border-radius:9px; background:white; color:var(--slate); font-size:12px; text-decoration:none; }
.pma-pipeline-item strong { color:var(--navy); font-size:17px; }
.pma-pipeline-item.active { border-color:#b5cdf8; background:#edf4ff; color:var(--blue); }
.pma-record-link { font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; }
.pma-detail-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pma-detail-overview small { display:block; margin-bottom:4px; color:var(--text-muted); font-size:11px; }
.pma-detail-overview strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.pma-detail-note { margin-top:18px; padding:12px 15px; background:#f8fafc; border-radius:8px; font-size:13px; color:var(--slate); }
.pma-section-label { margin-top:22px; padding-bottom:10px; border-bottom:1px solid var(--gray-bd); color:var(--navy); font-size:13px; font-weight:600; }
.pma-followup-item { padding:14px 0; border-bottom:1px solid #edf1f7; font-size:12px; }
@media(max-width:575.98px){.pma-form-modal .modal-body{padding:18px 14px;}.pma-list-toolbar{padding:12px;}.pma-filter-panel{padding:14px 12px;}.pma-ledger-summary{padding:14px 12px;}.pma-detail-overview{gap:12px;}.pma-pipeline-item{padding:8px 10px;gap:8px;}.pma-delete-button span{display:none;}.pma-delete-button{min-width:30px;}}
@media (min-width:992px) {
  .pma-sidebar.offcanvas-lg { position:fixed; top:var(--pma-topbar-height); bottom:0; left:0; width:var(--pma-sidebar-width); height:calc(100dvh - var(--pma-topbar-height)); background:#fff !important; visibility:visible; z-index:1020; transform:translateX(0); transition:transform .2s ease,visibility .2s; }
  .pma-sidebar .offcanvas-body { height:100%; flex-grow:1; }
  .pma-app-main { margin-left:var(--pma-sidebar-width); transition:margin-left .2s ease; }
  .pma-sidebar-collapsed .pma-sidebar.offcanvas-lg { transform:translateX(-100%); visibility:hidden; pointer-events:none; }
  .pma-sidebar-collapsed .pma-app-main { margin-left:0; }
}
@media (max-width:991.98px) {
  .pma-app { --pma-topbar-height:64px; }
  .pma-app .pma-content { padding:22px 18px; }
  .pma-app .pma-footer { padding:14px 6px; }
}
@media (max-width:575.98px) {
  .pma-app .pma-content { padding:20px 12px; }
  .pma-topbar .brand-name { font-size:18px; }
  .pma-topbar .brand-icon { width:32px; height:32px; font-size:16px; }
  .pma-quick-add { padding:7px 10px; }
  .pma-app .page-header h1 { font-size:20px; }
  .pma-account-toggle { gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
  .pma-menu-link, .pma-menu-heading i, .pma-sidebar.offcanvas-lg, .pma-app-main { transition:none; }
}
.pma-card-body .form-label { font-size:13px; font-weight:600; color:#334155; }
.pma-card-body small { color:#64748b; }
.stat-value { overflow-wrap:anywhere; }
.pma-table td { vertical-align:top; }
.pma-table td p { margin:5px 0; }
[hidden] { display:none !important; }
.audit-details { max-width:600px; max-height:300px; white-space:pre-wrap; font-size:11px; }

@media (max-width: 768px) {
  .pma-content    { padding: 16px 12px; }
  .info-grid      { grid-template-columns: 1fr; }
  .payment-summary{ grid-template-columns: 1fr; }
  .login-card     { padding: 28px 22px; }
}