/* ── BPI OFFICIAL BRAND COLORS ──────────────────────────────── */
:root {
  --bpi-red:  #B11116;
  --bpi-gold: #D5B527;
  --bpi-white: #FFFFFF;
  --bpi-text: #333333;
  --bpi-card: #F5F5F5;
}
/* ============================================================
   BPIMS Professional UI Redesign
   Business Process & Information Management System
   Drop this file AFTER app.*.css and login.*.css in index.html
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --brand-red:       #B11116;
  --brand-red-deep:  #7a0b0f;
  --brand-red-light: #fff0f0;
  --brand-red-glow:  rgba(177,17,22,.18);

  --navy:            #1a1a2e;
  --navy-mid:        #162236;
  --navy-light:      #1e3050;
  --navy-border:     rgba(255,255,255,.07);

  --surface:         #f4f6fb;
  --surface-card:    #ffffff;
  --surface-hover:   #f9fafd;

  --text-primary:    #0f1b2d;
  --text-secondary:  #5a6474;
  --text-muted:      #9aa3b0;
  --text-inverse:    #ffffff;

  --border:          #e8ecf4;
  --border-focus:    #B11116;

  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       18px;

  --shadow-sm:       0 1px 4px rgba(15,27,45,.06);
  --shadow-md:       0 4px 16px rgba(15,27,45,.10);
  --shadow-lg:       0 12px 40px rgba(15,27,45,.14);
  --shadow-red:      0 4px 16px rgba(177,17,22,.28);
}

/* ── GLOBAL RESET ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

*:not(i):not([class*="anticon"]) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ── LAYOUT SHELL ───────────────────────────────────────────── */
.layout,
.ant-layout {
  background: var(--surface) !important;
  min-height: 100vh;
}
.ant-layout-content {
  margin: 24px 24px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── TOP NAVIGATION BAR ─────────────────────────────────────── */
.ant-layout-header {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
  height: 60px !important;
  line-height: 60px !important;
  padding: 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
}

/* Hamburger trigger */
#layout-main .trigger {
  font-size: 17px !important;
  padding: 0 20px !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 60px !important;
  cursor: pointer !important;
  transition: color .2s !important;
}
#layout-main .trigger:hover { color: #fff !important; }

/* Logo area in header */
#layout-main .logo {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
}
#layout-main .logo img {
  height: 28px !important;
  margin: 0 !important;
  filter: brightness(0) invert(1) !important;
  vertical-align: middle !important;
}

/* BPIMS system name badge in header */
#layout-main .logo::after {
  content: 'IFRS17';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  padding: 3px 10px;
  background: rgba(177,17,22,.75);
  border-radius: 4px;
  line-height: 1;
}

.ant-layout-header a { color: rgba(255,255,255,.85) !important; }
.ant-layout-header a:hover { color: #fff !important; }

/* Header right-side user info / icons */
.ant-layout-header .ant-avatar {
  background: var(--brand-red) !important;
  border: 2px solid rgba(255,255,255,.2) !important;
}
.ant-layout-header .ant-dropdown-trigger {
  color: rgba(255,255,255,.85) !important;
  cursor: pointer !important;
}
.ant-layout-header .ant-badge-count {
  background: var(--brand-red) !important;
  box-shadow: 0 0 0 2px var(--navy) !important;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.ant-layout-sider {
  background: var(--navy) !important;
  border-right: 1px solid var(--navy-border) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.15) !important;
}
.ant-layout-sider-children { background: var(--navy) !important; }

/* Sidebar logo/brand strip */
.ant-layout-sider .ant-layout-sider-children > .logo,
.ant-layout-sider .logo {
  background: var(--navy-mid) !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  border-bottom: 1px solid var(--navy-border) !important;
}

/* Sidebar trigger (collapse button) */
.ant-layout-sider-trigger {
  background: var(--navy-mid) !important;
  border-top: 1px solid var(--navy-border) !important;
  color: rgba(255,255,255,.45) !important;
  transition: background .2s !important;
}
.ant-layout-sider-trigger:hover {
  background: var(--navy-light) !important;
  color: #fff !important;
}

/* ── SIDEBAR MENU ───────────────────────────────────────────── */
.ant-layout-sider .ant-menu,
.ant-layout-sider .ant-menu-root,
.ant-layout-sider .ant-menu-inline {
  background: var(--navy) !important;
  padding: 8px 0 !important;
}
.ant-menu-sub { background: rgba(0,0,0,.2) !important; }

/* Menu items */
.ant-menu-item,
.ant-menu-submenu-title {
  color: rgba(255,255,255,.55) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  margin: 2px 10px !important;
  width: calc(100% - 20px) !important;
  height: 40px !important;
  line-height: 40px !important;
  transition: all .18s !important;
  letter-spacing: .01em !important;
}
.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

/* Active item */
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: linear-gradient(90deg, rgba(177,17,22,.35) 0%, rgba(177,17,22,.18) 100%) !important;
  color: #fff !important;
}
.ant-menu-item-selected a,
.ant-menu-item-selected span { color: #fff !important; }

/* Active left accent stripe */
.ant-menu-inline .ant-menu-item::after,
.ant-menu-vertical .ant-menu-item::after {
  border-right: 3px solid var(--brand-red) !important;
  border-radius: 2px !important;
}

/* Submenu arrow */
.ant-menu-submenu-arrow { color: rgba(255,255,255,.3) !important; }
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  border-right: 0 !important;
}

/* Menu icons */
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  font-size: 15px !important;
  opacity: .75 !important;
  transition: opacity .18s !important;
}
.ant-menu-item:hover .anticon,
.ant-menu-submenu-title:hover .anticon,
.ant-menu-item-selected .anticon { opacity: 1 !important; }

/* Sidebar section labels (group headers) */
.ant-menu-item-group-title {
  color: rgba(255,255,255,.25) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 12px 20px 4px !important;
}

/* Sidebar footer */
.sider-foot {
  position: absolute;
  bottom: 48px;
  left: 0; right: 0;
  text-align: center;
  padding: 12px 16px;
  border-top: 1px solid var(--navy-border);
}
.sider-foot h1 {
  color: rgba(255,255,255,.25) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── PAGE HEADER / BREADCRUMB STRIP ─────────────────────────── */
.ant-layout-content h1 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -.02em !important;
}
.ant-breadcrumb-link { color: var(--text-muted) !important; font-size: 12px !important; }
.ant-breadcrumb-separator { color: var(--border) !important; }
.ant-breadcrumb > span:last-child .ant-breadcrumb-link { color: var(--brand-red) !important; }

/* ── CARDS ──────────────────────────────────────────────────── */
.ant-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s, transform .2s !important;
}
.ant-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.ant-card-head {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 0 20px !important;
  min-height: 50px !important;
}
.ant-card-head-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: -.01em !important;
  padding: 14px 0 !important;
}
.ant-card-body { background: var(--surface-card) !important; padding: 20px !important; }
.ant-card-extra a { color: var(--brand-red) !important; font-size: 13px !important; }

/* ── DASHBOARD STAT CARDS ───────────────────────────────────── */
.dashboard-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s !important;
  border: none !important;
}
.dashboard-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.dashboard-card-success,
.dashboard-card-success h2 {
  background: linear-gradient(135deg, #00c9a7, #00796b) !important;
  color: #fff !important;
}
.dashboard-card-blue,
.dashboard-card-blue h2 {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
}
.dashboard-card-gray,
.dashboard-card-gray h2 {
  background: linear-gradient(135deg, #64748b, #334155) !important;
  color: #fff !important;
}
.dashboard-card-red,
.dashboard-card-red h2 {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)) !important;
  color: #fff !important;
}
/* Stat number */
.dashboard-card h2 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
}

/* ── TABLES ─────────────────────────────────────────────────── */
.ant-table {
  background: var(--surface-card) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
}
.ant-table-thead > tr > th {
  background: #f8f9fc !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}
.ant-table-tbody > tr > td {
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid #f0f3fa !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
}
.ant-table-tbody > tr:hover > td {
  background: var(--brand-red-light) !important;
  color: var(--text-primary) !important;
}
.ant-table-placeholder {
  background: var(--surface-card) !important;
  color: var(--text-muted) !important;
}
.ant-table-row { background: var(--surface-card) !important; }

/* Table pagination */
.ant-pagination-item-active {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.ant-pagination-item-active a { color: #fff !important; }
.ant-pagination-item:hover { border-color: var(--brand-red) !important; }
.ant-pagination-item:hover a { color: var(--brand-red) !important; }
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.ant-btn {
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 36px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  transition: all .18s !important;
  letter-spacing: .01em !important;
}
.ant-btn:hover {
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
  background: var(--brand-red-light) !important;
}
.ant-btn-primary {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
}
.ant-btn-primary:hover {
  background: linear-gradient(135deg, #c41318, var(--brand-red)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(177,17,22,.38) !important;
  transform: translateY(-1px) !important;
}
.ant-btn-danger {
  background: #fff8f8 !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
}
.ant-btn-danger:hover {
  background: var(--brand-red) !important;
  color: #fff !important;
}

/* ── FORM CONTROLS ──────────────────────────────────────────── */
.ant-input,
.ant-input-number-input {
  background: #f8f9fd !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.ant-input:focus,
.ant-input:hover,
.ant-input-number:hover .ant-input-number-input,
.ant-input-number-focused .ant-input-number-input {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-glow) !important;
  background: #fff !important;
}
.ant-input-affix-wrapper {
  background: #f8f9fd !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
.ant-input-affix-wrapper:hover,
.ant-input-affix-wrapper-focused {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-glow) !important;
  background: #fff !important;
}

/* Select */
.ant-select-selector {
  background: #f8f9fd !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}
.ant-select-focused .ant-select-selector {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-glow) !important;
  background: #fff !important;
}
.ant-select-dropdown {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ant-select-item { background: #fff !important; color: var(--text-secondary) !important; }
.ant-select-item-option-active { background: var(--brand-red-light) !important; color: var(--text-primary) !important; }
.ant-select-item-option-selected { background: #fff0f0 !important; color: var(--brand-red) !important; font-weight: 600 !important; }

/* Date picker */
.ant-picker {
  background: #f8f9fd !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
.ant-picker:hover,
.ant-picker-focused {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-glow) !important;
}
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
  background: var(--brand-red) !important;
}
.ant-picker-today-btn { color: var(--brand-red) !important; }

/* Form labels */
.ant-form-item-label > label {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}
.ant-form-item { margin-bottom: 18px !important; }

/* Checkbox & Radio */
.ant-checkbox-checked .ant-checkbox-inner {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: var(--brand-red) !important;
}
.ant-radio-checked .ant-radio-inner {
  border-color: var(--brand-red) !important;
}
.ant-radio-inner::after { background: var(--brand-red) !important; }

/* ── TABS ───────────────────────────────────────────────────── */
.ant-tabs-ink-bar {
  background: var(--brand-red) !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.ant-tabs-tab {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 0 !important;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--brand-red) !important;
  font-weight: 700 !important;
}
.ant-tabs-tab:hover { color: var(--brand-red) !important; }
.ant-tabs-bar, .ant-tabs-nav::before {
  border-bottom-color: var(--border) !important;
}

/* ── MODAL ──────────────────────────────────────────────────── */
.ant-modal-content {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.18) !important;
  border: 1px solid var(--border) !important;
}
.ant-modal-header {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 24px !important;
}
.ant-modal-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -.01em !important;
}
.ant-modal-close-x { color: var(--text-muted) !important; }
.ant-modal-close-x:hover { color: var(--brand-red) !important; }
.ant-modal-body { background: var(--surface-card) !important; color: var(--text-secondary) !important; }
.ant-modal-footer {
  border-top: 1px solid var(--border) !important;
  background: #fafbfd !important;
  padding: 12px 24px !important;
}

/* ── TAGS & BADGES ──────────────────────────────────────────── */
.ant-tag {
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
  border: none !important;
}
.ant-tag-red    { background: #fff0f0 !important; color: #B11116 !important; }
.ant-tag-green  { background: #f0fdf4 !important; color: #059669 !important; }
.ant-tag-blue   { background: #eff6ff !important; color: #2563eb !important; }
.ant-tag-orange { background: #fff7ed !important; color: #ea580c !important; }
.ant-tag-gold   { background: #fefce8 !important; color: #ca8a04 !important; }

.ant-badge-status-dot { width: 8px !important; height: 8px !important; }

/* ── STEPS ──────────────────────────────────────────────────── */
.ant-steps-item-finish .ant-steps-item-icon {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon { color: #fff !important; }
.ant-steps-item-process .ant-steps-item-icon {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
  background: var(--brand-red) !important;
}

/* ── ALERTS ─────────────────────────────────────────────────── */
.ant-alert {
  border-radius: var(--radius-md) !important;
  border: none !important;
  font-size: 13px !important;
}
.ant-alert-success { background: #f0fdf4 !important; }
.ant-alert-warning { background: #fefce8 !important; }
.ant-alert-error   { background: #fff0f0 !important; }
.ant-alert-info    { background: #eff6ff !important; }

/* ── NOTIFICATIONS / MESSAGES ───────────────────────────────── */
.ant-message-notice-content {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.ant-notification-notice {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── DIVIDERS ───────────────────────────────────────────────── */
.ant-divider { border-color: var(--border) !important; }
.ant-divider-inner-text { color: var(--text-muted) !important; font-size: 12px !important; }

/* ── TOOLTIPS & POPOVERS ────────────────────────────────────── */
.ant-tooltip-inner {
  background: var(--navy) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}
.ant-popover-inner { border-radius: var(--radius-lg) !important; }
.ant-popover-title { font-weight: 700 !important; color: var(--text-primary) !important; }

/* ── SPIN / LOADING ─────────────────────────────────────────── */
.ant-spin-dot-item { background: var(--brand-red) !important; }

/* ── DROPDOWN MENUS ─────────────────────────────────────────── */
.ant-dropdown-menu {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 6px !important;
}
.ant-dropdown-menu-item {
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  transition: all .15s !important;
}
.ant-dropdown-menu-item:hover {
  background: var(--brand-red-light) !important;
  color: var(--brand-red) !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5e0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b0b6c3; }

/* ── LOGIN PAGE ─────────────────────────────────────────────── */
.container {
  display: flex !important;
  height: 100vh !important;
  width: 100vw !important;
  background: #070d18 !important;
  overflow: hidden !important;
  position: relative !important;
}
.container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: url(/img/login.jpg) center center / cover no-repeat !important;
  filter: brightness(.28) saturate(.9) !important;
  z-index: 0 !important;
}

/* Login card */
.login {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-height: 100vh !important;
  margin-left: auto !important;
  background: rgba(255,255,255,.975) !important;
  backdrop-filter: blur(24px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 3rem 2.75rem !important;
  box-shadow: -24px 0 80px rgba(0,0,0,.55) !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
}

/* Login logo */
.logo {
  text-align: left !important;
  margin-bottom: 2.25rem !important;
}
.logo img { height: 42px !important; }

/* BPIMS label above title */
.welcome {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--brand-red) !important;
  margin-bottom: .6rem !important;
  text-align: left !important;
}

/* System title */
.IRS {
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.1 !important;
  text-align: left !important;
  margin-bottom: .3rem !important;
  letter-spacing: -.03em !important;
}

.reportingSystem {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  margin-bottom: 2.5rem !important;
}

/* Login form */
.login-form { width: 100% !important; text-align: left !important; }

/* Input wrappers */
.username, .password {
  width: 100% !important;
  background: #f7f8fb !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: .9rem !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.username:focus-within, .password:focus-within {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-glow) !important;
  background: #fff !important;
}

/* Login input text */
#login input[type=text],
#login input[type=password] {
  font-size: 14px !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
}

/* Login button */
.login-btn {
  width: 100% !important;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-deep) 100%) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-red) !important;
  transition: transform .15s, box-shadow .15s !important;
  margin-top: .75rem !important;
  height: 48px !important;
}
.login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(177,17,22,.42) !important;
}
.login-btn:active { transform: translateY(0) !important; }
.wavy { display: none !important; }

/* Left-panel branding text overlay (visible through bg image) */
.container .left-brand {
  position: absolute;
  left: 5%;
  bottom: 8%;
  z-index: 1;
  color: #fff;
}
.container .left-brand h2 {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
}
.container .left-brand p {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  margin-top: .5rem;
  max-width: 320px;
}

/* ── MISC UTILITIES ─────────────────────────────────────────── */
.expense-allocation-summary .ant-table-tbody td:first-child { font-weight: 700 !important; }
.form-no-bottom .ant-form-item { margin-bottom: 0 !important; }
.left-label .ant-form-item-label { text-align: left !important; }
.ant-table-with-groupings .ant-table-thead > tr > th { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Status pill helpers */
.status-active   { background: #f0fdf4; color: #15803d; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-inactive { background: #f1f5f9; color: #64748b; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-pending  { background: #fefce8; color: #a16207; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-error    { background: #fff0f0; color: #B11116; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
  .ant-layout-content { margin: 12px !important; }
  .login { max-width: 100% !important; padding: 2rem 1.5rem !important; }
  .container::before { display: none !important; }
}

/* ── MOVE USER ICON TO RIGHT SIDE OF HEADER ─────────────────── */
.ant-layout-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ant-layout-header .anticon-user {
  margin-left: auto !important;
  margin-right: 20px !important;
  font-size: 20px !important;
  color: #fff !important;
  cursor: pointer !important;
}
.ant-layout-header a[href*="user"],
.ant-layout-header .ant-dropdown-trigger {
  margin-left: auto !important;
  margin-right: 20px !important;
  color: #fff !important;
}

/* ── SHOW MODAL CLOSE BUTTON ─────────────────────────────────── */
.ant-modal-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ant-modal-close-x {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 16px !important;
  color: #999 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ant-modal-close-x:hover {
  color: #B11116 !important;
  background: #fff0f0 !important;
  border-radius: 50% !important;
}

/* ── FORCE MODAL CLOSE BUTTON ───────────────────────────────── */
.ant-modal-close,
.ant-modal button.ant-modal-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  pointer-events: all !important;
}
.ant-modal-close-x {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 46px !important;
  height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #999 !important;
}
.ant-modal-close-x:hover { color: #B11116 !important; }

/* ── FORCE MODAL CLOSE BUTTON ───────────────────────────────── */
.ant-modal-close,
.ant-modal button.ant-modal-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  pointer-events: all !important;
}
.ant-modal-close-x {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 46px !important;
  height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #999 !important;
}
.ant-modal-close-x:hover { color: #B11116 !important; }

/* ── MY ACCOUNTS PANEL FIX ───────────────────────────────────── */
.ant-drawer-body,
.ant-drawer-content {
  background: #fff !important;
  color: #333 !important;
}
.ant-drawer-body *,
.ant-drawer-content * {
  color: #333 !important;
}
.ant-drawer-title {
  color: #0f1b2d !important;
  font-weight: 700 !important;
}
.ant-drawer-header {
  background: #fff !important;
  border-bottom: 1px solid #f0f3fa !important;
}
.ant-descriptions-item-label {
  color: #9aa3b0 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.ant-descriptions-item-content {
  color: #0f1b2d !important;
  font-weight: 500 !important;
}





/* ── PERIOD SELECTOR BUTTON - ALWAYS VISIBLE ─────────────────── */
.ant-layout-header .no-blue,
.ant-layout-header button.no-blue,
.ant-layout-header .no-blue.ant-btn,
.ant-layout-header .no-blue.ant-btn-link,
.ant-layout-header .ant-btn-background-ghost.ant-btn-link.no-blue {
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  text-shadow: none !important;
  padding: 0 14px !important;
  height: 34px !important;
  line-height: 34px !important;
}
.ant-layout-header .no-blue:hover,
.ant-layout-header button.no-blue:hover,
.ant-layout-header .no-blue.ant-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.65) !important;
}
.ant-layout-header .no-blue span,
.ant-layout-header .no-blue .anticon {
  color: #fff !important;
}