/* ============================================================
   LIENTRACKIT V0.9
   DOCUMENTS
   COMPLETE CLEAN STYLESHEET
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  background: #f4f6f9;
  color: #17212b;

  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(32, 117, 180, 0.28);
  outline-offset: 1px;
}

[hidden] {
  display: none !important;
}


/* ============================================================
   COLOR VARIABLES
   ============================================================ */

:root {

  --navy-950: #071c29;
  --navy-900: #0a2535;
  --navy-850: #0d3044;
  --navy-800: #10384e;

  --blue-700: #116da3;
  --blue-600: #1684c2;
  --blue-500: #2498d5;
  --blue-100: #e7f4fb;

  --gold: #f3c84b;
  --gold-dark: #d9aa25;
  --gold-light: #fff4c9;

  --purple: #7357a8;
  --purple-light: #f0ebfa;

  --green: #21845b;
  --green-light: #e8f6ef;

  --red: #c94b4b;
  --red-light: #fdecec;

  --orange: #d57a22;
  --orange-light: #fff2df;

  --gray-50: #f8fafc;
  --gray-100: #f1f4f7;
  --gray-150: #e9edf2;
  --gray-200: #dce2e8;
  --gray-300: #c7d0d9;
  --gray-400: #a9b4bf;
  --gray-500: #7b8794;
  --gray-600: #5d6874;
  --gray-700: #3f4a55;
  --gray-800: #29343e;

  --white: #ffffff;

  --shadow-sm:
    0 1px 3px rgba(15, 35, 50, 0.08);

  --shadow-md:
    0 5px 18px rgba(15, 35, 50, 0.09);

  --shadow-lg:
    0 14px 40px rgba(15, 35, 50, 0.15);

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

  --sidebar-width: 245px;
  --topbar-height: 76px;
}


/* ============================================================
   APP SHELL
   ============================================================ */

.app-shell {
  display: flex;

  width: 100%;
  min-width: 0;
  min-height: 100vh;

  background: #f4f6f9;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {

  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  z-index: 100;

  width: var(--sidebar-width);

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      var(--navy-850) 0%,
      var(--navy-900) 50%,
      var(--navy-950) 100%
    );

  color: white;

  border-right: 1px solid rgba(255,255,255,0.07);

  overflow-y: auto;
  overflow-x: hidden;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {

  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 94px;

  padding: 18px 18px 16px;

  border-bottom: 1px solid rgba(255,255,255,0.08);
}


.brand-mark {

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #27a4e3,
      #0f6ea3
    );

  color: white;

  font-size: 16px;
  font-weight: 800;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.2);
}


.brand-text {
  min-width: 0;
}


.brand-name {

  color: white;

  font-size: 19px;
  font-weight: 800;

  line-height: 1.1;

  white-space: nowrap;
}


.brand-name span {
  color: #8bd3fa;
}


.brand-subtitle {

  margin-top: 5px;

  color: rgba(255,255,255,0.55);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.08em;

  white-space: nowrap;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-nav {

  display: flex;
  flex-direction: column;

  gap: 4px;

  padding: 18px 10px;
}


.nav-item {

  width: 100%;

  display: flex;
  align-items: center;

  gap: 11px;

  min-height: 43px;

  padding: 0 13px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: rgba(255,255,255,0.67);

  text-align: left;

  font-size: 12px;
  font-weight: 600;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


.nav-item:hover {

  background: rgba(255,255,255,0.07);

  color: white;
}


.nav-item.active {

  background:
    linear-gradient(
      90deg,
      rgba(26,133,195,0.95),
      rgba(20,102,153,0.95)
    );

  color: white;

  box-shadow:
    inset 3px 0 0 var(--gold);
}


.nav-icon {

  width: 19px;

  flex: 0 0 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: inherit;

  font-size: 13px;
}


/* ============================================================
   SIDEBAR FOOTER
   ============================================================ */

.sidebar-footer {

  margin-top: auto;

  padding: 15px;

  border-top: 1px solid rgba(255,255,255,0.08);
}


.system-status {

  display: flex;
  align-items: center;

  gap: 9px;
}


.status-dot {

  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #39c878;

  box-shadow:
    0 0 0 4px rgba(57,200,120,0.12);
}


.system-status strong {

  display: block;

  color: rgba(255,255,255,0.82);

  font-size: 10px;
}


.system-status small {

  display: block;

  margin-top: 2px;

  color: rgba(255,255,255,0.42);

  font-size: 7px;

  letter-spacing: 0.06em;
}


.version {

  margin-top: 11px;

  color: rgba(255,255,255,0.32);

  font-size: 9px;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {

  width: calc(100% - var(--sidebar-width));

  min-width: 0;

  margin-left: var(--sidebar-width);

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {

  position: sticky;
  top: 0;

  z-index: 50;

  width: 100%;

  min-height: var(--topbar-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 26px;

  background: rgba(255,255,255,0.97);

  border-bottom: 1px solid var(--gray-200);

  box-shadow:
    0 1px 4px rgba(20,40,60,0.04);
}


.topbar-left {
  min-width: 0;
}


.eyebrow {

  color: var(--blue-700);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.topbar-title {

  margin-top: 3px;

  color: var(--navy-900);

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;
}


.topbar-right {

  display: flex;
  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}


.icon-button,
.topbar-save,
.controls-button {

  min-height: 38px;

  border: 1px solid var(--gray-200);

  border-radius: 7px;

  background: white;

  color: var(--gray-700);

  font-size: 11px;
  font-weight: 700;
}


.icon-button {

  width: 38px;
}


.icon-button:hover,
.controls-button:hover {

  background: var(--gray-50);

  border-color: var(--gray-300);
}


.topbar-save {

  padding: 0 14px;

  background: var(--navy-900);

  border-color: var(--navy-900);

  color: white;
}


.topbar-save:hover {
  background: var(--navy-800);
}


.controls-button {
  padding: 0 13px;
}


.user-avatar {

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #30b2df,
      #1479ad
    );

  color: white;

  font-weight: 800;
}


/* ============================================================
   CONTENT AREA
   ============================================================ */

.content-area {

  width: 100%;
  min-width: 0;

  padding: 28px;

  flex: 1;
}


.page {

  width: 100%;
  min-width: 0;

  max-width: 1500px;

  margin: 0 auto;
}


.page-header {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 25px;

  margin-bottom: 24px;
}


.page-header h1 {

  margin: 5px 0 6px;

  color: var(--navy-950);

  font-size: 30px;
  line-height: 1.15;

  letter-spacing: -0.025em;
}


.page-header p {

  margin: 0;

  color: var(--gray-600);

  font-size: 13px;

  line-height: 1.6;
}


.page-actions {

  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

  flex: 0 0 auto;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {

  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 14px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  border: 1px solid transparent;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}


.btn:hover {
  transform: translateY(-1px);
}


.btn.primary {

  background: var(--blue-700);

  border-color: var(--blue-700);

  color: white;
}


.btn.primary:hover {
  background: var(--blue-600);
}


.btn.secondary {

  background: white;

  border-color: var(--gray-300);

  color: var(--gray-700);
}


.btn.secondary:hover {

  background: var(--gray-50);

  border-color: var(--gray-400);
}


.text-button {

  border: 0;

  background: transparent;

  color: var(--blue-700);

  font-size: 11px;
  font-weight: 800;
}


.text-button:hover {
  color: var(--blue-500);
}


/* ============================================================
   INFO CARD
   ============================================================ */

.info-card {

  display: flex;
  align-items: flex-start;

  gap: 16px;

  width: 100%;

  margin-bottom: 22px;

  padding: 20px 22px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.info-card-icon {

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 18px;
  font-weight: 800;
}


.info-card h3 {

  margin: 1px 0 7px;

  color: var(--navy-900);

  font-size: 14px;
}


.info-card p {

  margin: 0;

  color: var(--gray-600);

  font-size: 12px;

  line-height: 1.65;
}


/* ============================================================
   STAT CARDS
   ============================================================ */

.dashboard-stats {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.dashboard-stats.three {

  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.stat-card {

  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 13px;

  padding: 17px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.stat-icon {

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-weight: 900;
}


.stat-card.danger .stat-icon {

  background: var(--red-light);

  color: var(--red);
}


.stat-card.warning .stat-icon {

  background: var(--orange-light);

  color: var(--orange);
}


.stat-card.purple .stat-icon {

  background: var(--purple-light);

  color: var(--purple);
}


.stat-card.success .stat-icon {

  background: var(--green-light);

  color: var(--green);
}


.stat-card.blue .stat-icon {

  background: var(--blue-100);

  color: var(--blue-700);
}


.stat-card span {

  display: block;

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


.stat-card strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 22px;

  line-height: 1.1;
}


.stat-card small {

  display: block;

  margin-top: 4px;

  color: var(--gray-500);

  font-size: 9px;

  line-height: 1.4;
}


/* ============================================================
   PANELS
   ============================================================ */

.panel {

  width: 100%;
  min-width: 0;

  margin-bottom: 22px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  overflow: hidden;
}


.panel-header {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 19px 21px;

  border-bottom: 1px solid var(--gray-200);
}


.panel-header h2 {

  margin: 0;

  color: var(--navy-900);

  font-size: 15px;
}


.panel-header p {

  margin: 5px 0 0;

  color: var(--gray-500);

  font-size: 10px;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.toolbar,
.document-toolbar {

  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

  padding: 13px 17px;

  background: var(--gray-50);

  border-bottom: 1px solid var(--gray-200);
}


.search-box {

  min-width: 0;

  width: 100%;

  max-width: 430px;

  height: 38px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 0 11px;

  background: white;

  border: 1px solid var(--gray-300);

  border-radius: 7px;
}


.search-box span {

  color: var(--gray-500);

  font-size: 17px;
}


.search-box input {

  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--gray-800);

  font-size: 11px;
}


.toolbar select,
.document-toolbar select {

  height: 38px;

  padding: 0 10px;

  background: white;

  border: 1px solid var(--gray-300);

  border-radius: 7px;

  color: var(--gray-700);

  font-size: 10px;
}


/* ============================================================
   TABLE
   ============================================================ */

.table-container {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}


table {

  width: 100%;

  min-width: 780px;

  border-collapse: collapse;
}


th {

  padding: 12px 14px;

  background: var(--gray-50);

  border-bottom: 1px solid var(--gray-200);

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.07em;

  text-align: left;

  white-space: nowrap;
}


td {

  padding: 14px;

  border-bottom: 1px solid var(--gray-150);

  color: var(--gray-700);

  font-size: 10px;

  vertical-align: middle;
}


tbody tr:hover {
  background: #fbfcfd;
}


tbody tr:last-child td {
  border-bottom: 0;
}


/* ============================================================
   BADGES
   ============================================================ */

.status-badge {

  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;
}


.status-badge.past-due {

  background: var(--red-light);

  color: var(--red);
}


.status-badge.pre-lien {

  background: var(--orange-light);

  color: var(--orange);
}


.status-badge.notice {

  background: var(--gold-light);

  color: #8a6900;
}


.status-badge.lien {

  background: var(--purple-light);

  color: var(--purple);
}


.status-badge.cleared,
.status-badge.verified {

  background: var(--green-light);

  color: var(--green);
}


.status-badge.review {

  background: var(--orange-light);

  color: var(--orange);
}


.status-badge.draft {

  background: var(--gray-100);

  color: var(--gray-600);
}


/* ============================================================
   WORKFLOW PIPELINE
   ============================================================ */

.workflow-pipeline {

  display: flex;
  align-items: center;

  width: 100%;

  padding: 25px 24px;

  overflow-x: auto;
}


.workflow-stage {

  min-width: 105px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5px;

  text-align: center;
}


.stage-number {

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--gray-100);

  border: 2px solid var(--gray-300);

  color: var(--gray-500);

  font-size: 11px;
  font-weight: 800;
}


.workflow-stage.complete .stage-number {

  background: var(--green-light);

  border-color: var(--green);

  color: var(--green);
}


.workflow-stage.current .stage-number {

  background: var(--blue-100);

  border-color: var(--blue-600);

  color: var(--blue-700);

  box-shadow:
    0 0 0 4px rgba(22,132,194,0.10);
}


.workflow-stage strong {

  color: var(--navy-900);

  font-size: 10px;
}


.workflow-stage small {

  color: var(--gray-500);

  font-size: 8px;
}


.pipeline-line {

  flex: 1;

  min-width: 25px;
  max-width: 80px;

  height: 2px;

  background: var(--gray-300);
}


/* ============================================================
   DOCUMENT WORKSPACE
   ============================================================ */

.document-workspace {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    290px;

  gap: 22px;

  width: 100%;
}


.document-list-panel {

  min-width: 0;
}


.document-rules-panel {

  min-width: 0;

  align-self: start;
}


/* ============================================================
   DOCUMENT STATS
   ============================================================ */

.document-stats {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.document-stat-card {

  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding: 16px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.document-stat-icon {

  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-size: 14px;
  font-weight: 900;
}


.document-stat-card.blue .document-stat-icon {

  background: var(--blue-100);

  color: var(--blue-700);
}


.document-stat-card.warning .document-stat-icon {

  background: var(--orange-light);

  color: var(--orange);
}


.document-stat-card.purple .document-stat-icon {

  background: var(--purple-light);

  color: var(--purple);
}


.document-stat-card.success .document-stat-icon {

  background: var(--green-light);

  color: var(--green);
}


.document-stat-card span {

  display: block;

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.07em;

  white-space: nowrap;
}


.document-stat-card strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 21px;
}


.document-stat-card small {

  display: block;

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


/* ============================================================
   DOCUMENT TABLE
   ============================================================ */

.documents-table {

  min-width: 900px;
}


.document-name-cell {

  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 180px;
}


.document-icon {

  width: 30px;
  height: 34px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 13px;
  font-weight: 900;
}


.document-name {

  color: var(--navy-900);

  font-weight: 700;

  font-size: 10px;
}


.document-meta {

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


.document-action {

  min-height: 28px;

  padding: 0 9px;

  border: 1px solid var(--gray-300);

  border-radius: 6px;

  background: white;

  color: var(--gray-700);

  font-size: 9px;
  font-weight: 700;
}


.document-action:hover {

  background: var(--gray-50);

  border-color: var(--blue-500);

  color: var(--blue-700);
}


/* ============================================================
   DOCUMENT RULES
   ============================================================ */

.document-rule {

  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding: 16px 18px;

  border-bottom: 1px solid var(--gray-150);
}


.rule-number {

  width: 29px;
  height: 29px;

  flex: 0 0 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 8px;
  font-weight: 900;
}


.document-rule strong {

  display: block;

  color: var(--navy-900);

  font-size: 10px;
}


.document-rule p {

  margin: 4px 0 0;

  color: var(--gray-500);

  font-size: 9px;

  line-height: 1.5;
}


.document-warning,
.modal-warning {

  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin: 16px;

  padding: 12px;

  border-radius: 8px;

  background: var(--orange-light);

  border: 1px solid #f2d7b0;
}


.warning-icon {

  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e89b45;

  color: white;

  font-size: 11px;
  font-weight: 900;
}


.document-warning strong {

  color: #86520f;

  font-size: 9px;
}


.document-warning p,
.modal-warning p {

  margin: 3px 0 0;

  color: #805c2e;

  font-size: 8px;

  line-height: 1.5;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {

  padding: 55px 20px;

  text-align: center;
}


.empty-state-icon {

  width: 48px;
  height: 48px;

  margin: 0 auto 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 20px;
}


.empty-state h3 {

  margin: 0;

  color: var(--navy-900);

  font-size: 14px;
}


.empty-state p {

  margin: 6px 0 16px;

  color: var(--gray-500);

  font-size: 10px;
}


/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    rgba(5, 20, 30, 0.58);

  backdrop-filter: blur(2px);

  overflow-y: auto;
}


.modal {

  width: min(900px, 100%);

  max-height: calc(100vh - 50px);

  display: flex;
  flex-direction: column;

  background: white;

  border-radius: 14px;

  box-shadow: var(--shadow-lg);

  overflow: hidden;
}


.small-modal {

  width: min(570px, 100%);
}


.document-modal {

  width: min(760px, 100%);
}


.modal-header {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  padding: 20px 22px;

  border-bottom: 1px solid var(--gray-200);
}


.modal-header h2 {

  margin: 5px 0 4px;

  color: var(--navy-900);

  font-size: 18px;
}


.modal-header p {

  margin: 0;

  color: var(--gray-500);

  font-size: 10px;
}


.modal-close {

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border: 1px solid var(--gray-200);

  border-radius: 7px;

  background: white;

  color: var(--gray-600);

  font-size: 20px;
  line-height: 1;
}


.modal-close:hover {

  background: var(--gray-100);

  color: var(--red);
}


.modal-body {

  padding: 22px;

  overflow-y: auto;
}


.modal-footer {

  display: flex;
  justify-content: flex-end;

  gap: 8px;

  padding: 15px 22px;

  border-top: 1px solid var(--gray-200);

  background: var(--gray-50);
}


/* ============================================================
   SUMMARY GRID
   ============================================================ */

.summary-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  margin-bottom: 24px;

  border: 1px solid var(--gray-200);

  border-radius: 8px;

  overflow: hidden;
}


.summary-item {

  padding: 13px;

  border-right: 1px solid var(--gray-200);
}


.summary-item:last-child {
  border-right: 0;
}


.summary-item span {

  display: block;

  color: var(--gray-500);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.07em;
}


.summary-item strong {

  display: block;

  margin-top: 5px;

  color: var(--navy-900);

  font-size: 11px;
}


/* ============================================================
   MODAL SECTIONS
   ============================================================ */

.modal-section {

  margin-top: 22px;
}


.modal-section h3 {

  margin: 0 0 12px;

  color: var(--navy-900);

  font-size: 12px;
}


.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;
}


.form-grid label,
.full-field {

  display: flex;
  flex-direction: column;

  gap: 6px;

  color: var(--gray-700);

  font-size: 9px;
  font-weight: 800;
}


.form-grid label.full,
.full-field {

  grid-column: 1 / -1;
}


.form-grid input,
.form-grid select,
.form-grid textarea,
.full-field input,
.full-field textarea {

  width: 100%;

  min-height: 38px;

  padding: 9px 10px;

  border: 1px solid var(--gray-300);

  border-radius: 7px;

  background: white;

  color: var(--gray-800);

  font-size: 10px;

  resize: vertical;
}


.full-field {
  margin-top: 13px;
}


.form-grid textarea,
.full-field textarea {
  min-height: 80px;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.workflow-timeline {

  display: flex;
  flex-direction: column;

  border-left: 2px solid var(--gray-200);

  margin-left: 9px;
}


.timeline-item {

  position: relative;

  padding: 0 0 18px 20px;
}


.timeline-item::before {

  content: "";

  position: absolute;

  left: -7px;
  top: 2px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: white;

  border: 2px solid var(--gray-300);
}


.timeline-item.complete::before {

  background: var(--green);

  border-color: var(--green);
}


.timeline-item.current::before {

  background: var(--blue-600);

  border-color: var(--blue-600);

  box-shadow:
    0 0 0 4px rgba(22,132,194,0.12);
}


.timeline-item strong {

  color: var(--navy-900);

  font-size: 10px;
}


.timeline-item small {

  display: block;

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


/* ============================================================
   PAYMENT HISTORY
   ============================================================ */

.payment-history {

  border: 1px solid var(--gray-200);

  border-radius: 8px;

  overflow: hidden;
}


.payment-row {

  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap: 10px;

  padding: 11px 13px;

  border-bottom: 1px solid var(--gray-150);
}


.payment-row:last-child {
  border-bottom: 0;
}


.payment-row span {

  color: var(--gray-500);

  font-size: 8px;
}


.payment-row strong {

  display: block;

  margin-top: 3px;

  color: var(--navy-900);

  font-size: 9px;
}


/* ============================================================
   SELECTED RECORD
   ============================================================ */

.selected-record {

  margin-bottom: 18px;

  padding: 13px;

  border-radius: 8px;

  background: var(--blue-100);

  border: 1px solid #c7e6f5;
}


.selected-record span {

  display: block;

  color: var(--blue-700);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.07em;
}


.selected-record strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 12px;
}


.selected-record small {

  display: block;

  margin-top: 3px;

  color: var(--gray-600);

  font-size: 8px;
}


/* ============================================================
   UPLOAD AREA
   ============================================================ */

.upload-area {

  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 17px;

  padding: 17px;

  border: 1px dashed var(--gray-300);

  border-radius: 9px;

  background: var(--gray-50);
}


.upload-icon {

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 18px;
  font-weight: 900;
}


.upload-area strong {

  display: block;

  color: var(--navy-900);

  font-size: 10px;
}


.upload-area p {

  margin: 3px 0 8px;

  color: var(--gray-500);

  font-size: 8px;
}


.upload-area input[type="file"] {

  max-width: 100%;

  font-size: 9px;
}


.selected-file {

  margin-top: 9px;

  padding: 9px 11px;

  border-radius: 7px;

  background: var(--green-light);

  color: var(--green);

  font-size: 9px;
  font-weight: 700;
}


/* ============================================================
   TOAST
   ============================================================ */

.toast {

  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 800;

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 240px;

  padding: 12px 14px;

  background: var(--navy-900);

  color: white;

  border-radius: 9px;

  box-shadow: var(--shadow-lg);
}


.toast-icon {

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--green);

  font-size: 11px;
  font-weight: 900;
}


.toast strong {

  display: block;

  font-size: 10px;
}


.toast span {

  display: block;

  margin-top: 2px;

  color: rgba(255,255,255,0.65);

  font-size: 8px;
}


/* ============================================================
   RESPONSIVE: LARGE TABLETS
   ============================================================ */

@media (max-width: 1200px) {

  :root {
    --sidebar-width: 220px;
  }

  .content-area {
    padding: 22px;
  }

  .document-workspace {
    grid-template-columns:
      minmax(0, 1fr)
      260px;
  }

  .dashboard-stats,
  .document-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dashboard-stats.three {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================
   RESPONSIVE: TABLETS
   ============================================================ */

@media (max-width: 900px) {

  :root {
    --sidebar-width: 190px;
  }

  .brand {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-subtitle {
    font-size: 7px;
  }

  .nav-item {
    padding-left: 9px;
    padding-right: 9px;
  }

  .topbar {
    padding: 0 18px;
  }

  .content-area {
    padding: 18px;
  }

  .page-header {
    flex-direction: column;
  }

  .document-workspace {
    grid-template-columns: 1fr;
  }

  .document-rules-panel {
    order: 2;
  }

  .summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .summary-item:nth-child(2) {
    border-right: 0;
  }

  .summary-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--gray-200);
  }

  .dashboard-stats.three {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */

@media (max-width: 700px) {

  :root {
    --sidebar-width: 0px;
  }

  .sidebar {

    position: relative;

    width: 100%;

    height: auto;

    min-height: 0;

    max-height: none;

    flex-direction: column;
  }

  .app-shell {
    display: block;
  }

  .main-content {

    width: 100%;

    margin-left: 0;
  }

  .brand {
    min-height: 70px;
  }

  .main-nav {

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    padding: 10px;
  }

  .nav-item {
    min-height: 38px;
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {

    min-height: 64px;

    padding: 0 13px;
  }

  .topbar-title {
    display: none;
  }

  .topbar-right {
    gap: 5px;
  }

  .controls-button {
    display: none;
  }

  .content-area {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 25px;
  }

  .dashboard-stats,
  .dashboard-stats.three,
  .document-stats {
    grid-template-columns: 1fr;
  }

  .document-toolbar,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    max-width: none;
  }

  .toolbar select,
  .document-toolbar select {
    width: 100%;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid label.full,
  .full-field {
    grid-column: auto;
  }

  .workflow-pipeline {
    justify-content: flex-start;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal {
    max-height: calc(100vh - 20px);
  }

  .modal-body {
    padding: 16px;
  }

  .modal-header,
  .modal-footer {
    padding: 14px 16px;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-item {
    border-right: 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .summary-item:last-child {
    border-bottom: 0;
  }
}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 430px) {

  .main-nav {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .topbar-left {
    display: none;
  }

  .topbar {
    justify-content: flex-end;
  }

  .page-actions {
 /* ============================================================
   LIENTRACKIT V0.9
   DOCUMENTS
   COMPLETE CLEAN STYLESHEET
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  background: #f4f6f9;
  color: #17212b;

  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(32, 117, 180, 0.28);
  outline-offset: 1px;
}

[hidden] {
  display: none !important;
}


/* ============================================================
   COLOR VARIABLES
   ============================================================ */

:root {

  --navy-950: #071c29;
  --navy-900: #0a2535;
  --navy-850: #0d3044;
  --navy-800: #10384e;

  --blue-700: #116da3;
  --blue-600: #1684c2;
  --blue-500: #2498d5;
  --blue-100: #e7f4fb;

  --gold: #f3c84b;
  --gold-dark: #d9aa25;
  --gold-light: #fff4c9;

  --purple: #7357a8;
  --purple-light: #f0ebfa;

  --green: #21845b;
  --green-light: #e8f6ef;

  --red: #c94b4b;
  --red-light: #fdecec;

  --orange: #d57a22;
  --orange-light: #fff2df;

  --gray-50: #f8fafc;
  --gray-100: #f1f4f7;
  --gray-150: #e9edf2;
  --gray-200: #dce2e8;
  --gray-300: #c7d0d9;
  --gray-400: #a9b4bf;
  --gray-500: #7b8794;
  --gray-600: #5d6874;
  --gray-700: #3f4a55;
  --gray-800: #29343e;

  --white: #ffffff;

  --shadow-sm:
    0 1px 3px rgba(15, 35, 50, 0.08);

  --shadow-md:
    0 5px 18px rgba(15, 35, 50, 0.09);

  --shadow-lg:
    0 14px 40px rgba(15, 35, 50, 0.15);

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

  --sidebar-width: 245px;
  --topbar-height: 76px;
}


/* ============================================================
   APP SHELL
   ============================================================ */

.app-shell {
  display: flex;

  width: 100%;
  min-width: 0;
  min-height: 100vh;

  background: #f4f6f9;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {

  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  z-index: 100;

  width: var(--sidebar-width);

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      var(--navy-850) 0%,
      var(--navy-900) 50%,
      var(--navy-950) 100%
    );

  color: white;

  border-right: 1px solid rgba(255,255,255,0.07);

  overflow-y: auto;
  overflow-x: hidden;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {

  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 94px;

  padding: 18px 18px 16px;

  border-bottom: 1px solid rgba(255,255,255,0.08);
}


.brand-mark {

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #27a4e3,
      #0f6ea3
    );

  color: white;

  font-size: 16px;
  font-weight: 800;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.2);
}


.brand-text {
  min-width: 0;
}


.brand-name {

  color: white;

  font-size: 19px;
  font-weight: 800;

  line-height: 1.1;

  white-space: nowrap;
}


.brand-name span {
  color: #8bd3fa;
}


.brand-subtitle {

  margin-top: 5px;

  color: rgba(255,255,255,0.55);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.08em;

  white-space: nowrap;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-nav {

  display: flex;
  flex-direction: column;

  gap: 4px;

  padding: 18px 10px;
}


.nav-item {

  width: 100%;

  display: flex;
  align-items: center;

  gap: 11px;

  min-height: 43px;

  padding: 0 13px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: rgba(255,255,255,0.67);

  text-align: left;

  font-size: 12px;
  font-weight: 600;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


.nav-item:hover {

  background: rgba(255,255,255,0.07);

  color: white;
}


.nav-item.active {

  background:
    linear-gradient(
      90deg,
      rgba(26,133,195,0.95),
      rgba(20,102,153,0.95)
    );

  color: white;

  box-shadow:
    inset 3px 0 0 var(--gold);
}


.nav-icon {

  width: 19px;

  flex: 0 0 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: inherit;

  font-size: 13px;
}


/* ============================================================
   SIDEBAR FOOTER
   ============================================================ */

.sidebar-footer {

  margin-top: auto;

  padding: 15px;

  border-top: 1px solid rgba(255,255,255,0.08);
}


.system-status {

  display: flex;
  align-items: center;

  gap: 9px;
}


.status-dot {

  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #39c878;

  box-shadow:
    0 0 0 4px rgba(57,200,120,0.12);
}


.system-status strong {

  display: block;

  color: rgba(255,255,255,0.82);

  font-size: 10px;
}


.system-status small {

  display: block;

  margin-top: 2px;

  color: rgba(255,255,255,0.42);

  font-size: 7px;

  letter-spacing: 0.06em;
}


.version {

  margin-top: 11px;

  color: rgba(255,255,255,0.32);

  font-size: 9px;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {

  width: calc(100% - var(--sidebar-width));

  min-width: 0;

  margin-left: var(--sidebar-width);

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {

  position: sticky;
  top: 0;

  z-index: 50;

  width: 100%;

  min-height: var(--topbar-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 26px;

  background: rgba(255,255,255,0.97);

  border-bottom: 1px solid var(--gray-200);

  box-shadow:
    0 1px 4px rgba(20,40,60,0.04);
}


.topbar-left {
  min-width: 0;
}


.eyebrow {

  color: var(--blue-700);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.topbar-title {

  margin-top: 3px;

  color: var(--navy-900);

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;
}


.topbar-right {

  display: flex;
  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}


.icon-button,
.topbar-save,
.controls-button {

  min-height: 38px;

  border: 1px solid var(--gray-200);

  border-radius: 7px;

  background: white;

  color: var(--gray-700);

  font-size: 11px;
  font-weight: 700;
}


.icon-button {

  width: 38px;
}


.icon-button:hover,
.controls-button:hover {

  background: var(--gray-50);

  border-color: var(--gray-300);
}


.topbar-save {

  padding: 0 14px;

  background: var(--navy-900);

  border-color: var(--navy-900);

  color: white;
}


.topbar-save:hover {
  background: var(--navy-800);
}


.controls-button {
  padding: 0 13px;
}


.user-avatar {

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #30b2df,
      #1479ad
    );

  color: white;

  font-weight: 800;
}


/* ============================================================
   CONTENT AREA
   ============================================================ */

.content-area {

  width: 100%;
  min-width: 0;

  padding: 28px;

  flex: 1;
}


.page {

  width: 100%;
  min-width: 0;

  max-width: 1500px;

  margin: 0 auto;
}


.page-header {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 25px;

  margin-bottom: 24px;
}


.page-header h1 {

  margin: 5px 0 6px;

  color: var(--navy-950);

  font-size: 30px;
  line-height: 1.15;

  letter-spacing: -0.025em;
}


.page-header p {

  margin: 0;

  color: var(--gray-600);

  font-size: 13px;

  line-height: 1.6;
}


.page-actions {

  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

  flex: 0 0 auto;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {

  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 14px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  border: 1px solid transparent;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}


.btn:hover {
  transform: translateY(-1px);
}


.btn.primary {

  background: var(--blue-700);

  border-color: var(--blue-700);

  color: white;
}


.btn.primary:hover {
  background: var(--blue-600);
}


.btn.secondary {

  background: white;

  border-color: var(--gray-300);

  color: var(--gray-700);
}


.btn.secondary:hover {

  background: var(--gray-50);

  border-color: var(--gray-400);
}


.text-button {

  border: 0;

  background: transparent;

  color: var(--blue-700);

  font-size: 11px;
  font-weight: 800;
}


.text-button:hover {
  color: var(--blue-500);
}


/* ============================================================
   INFO CARD
   ============================================================ */

.info-card {

  display: flex;
  align-items: flex-start;

  gap: 16px;

  width: 100%;

  margin-bottom: 22px;

  padding: 20px 22px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.info-card-icon {

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 18px;
  font-weight: 800;
}


.info-card h3 {

  margin: 1px 0 7px;

  color: var(--navy-900);

  font-size: 14px;
}


.info-card p {

  margin: 0;

  color: var(--gray-600);

  font-size: 12px;

  line-height: 1.65;
}


/* ============================================================
   STAT CARDS
   ============================================================ */

.dashboard-stats {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.dashboard-stats.three {

  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.stat-card {

  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 13px;

  padding: 17px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.stat-icon {

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-weight: 900;
}


.stat-card.danger .stat-icon {

  background: var(--red-light);

  color: var(--red);
}


.stat-card.warning .stat-icon {

  background: var(--orange-light);

  color: var(--orange);
}


.stat-card.purple .stat-icon {

  background: var(--purple-light);

  color: var(--purple);
}


.stat-card.success .stat-icon {

  background: var(--green-light);

  color: var(--green);
}


.stat-card.blue .stat-icon {

  background: var(--blue-100);

  color: var(--blue-700);
}


.stat-card span {

  display: block;

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


.stat-card strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 22px;

  line-height: 1.1;
}


.stat-card small {

  display: block;

  margin-top: 4px;

  color: var(--gray-500);

  font-size: 9px;

  line-height: 1.4;
}


/* ============================================================
   PANELS
   ============================================================ */

.panel {

  width: 100%;
  min-width: 0;

  margin-bottom: 22px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  overflow: hidden;
}


.panel-header {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 19px 21px;

  border-bottom: 1px solid var(--gray-200);
}


.panel-header h2 {

  margin: 0;

  color: var(--navy-900);

  font-size: 15px;
}


.panel-header p {

  margin: 5px 0 0;

  color: var(--gray-500);

  font-size: 10px;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.toolbar,
.document-toolbar {

  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

  padding: 13px 17px;

  background: var(--gray-50);

  border-bottom: 1px solid var(--gray-200);
}


.search-box {

  min-width: 0;

  width: 100%;

  max-width: 430px;

  height: 38px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 0 11px;

  background: white;

  border: 1px solid var(--gray-300);

  border-radius: 7px;
}


.search-box span {

  color: var(--gray-500);

  font-size: 17px;
}


.search-box input {

  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--gray-800);

  font-size: 11px;
}


.toolbar select,
.document-toolbar select {

  height: 38px;

  padding: 0 10px;

  background: white;

  border: 1px solid var(--gray-300);

  border-radius: 7px;

  color: var(--gray-700);

  font-size: 10px;
}


/* ============================================================
   TABLE
   ============================================================ */

.table-container {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}


table {

  width: 100%;

  min-width: 780px;

  border-collapse: collapse;
}


th {

  padding: 12px 14px;

  background: var(--gray-50);

  border-bottom: 1px solid var(--gray-200);

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.07em;

  text-align: left;

  white-space: nowrap;
}


td {

  padding: 14px;

  border-bottom: 1px solid var(--gray-150);

  color: var(--gray-700);

  font-size: 10px;

  vertical-align: middle;
}


tbody tr:hover {
  background: #fbfcfd;
}


tbody tr:last-child td {
  border-bottom: 0;
}


/* ============================================================
   BADGES
   ============================================================ */

.status-badge {

  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;
}


.status-badge.past-due {

  background: var(--red-light);

  color: var(--red);
}


.status-badge.pre-lien {

  background: var(--orange-light);

  color: var(--orange);
}


.status-badge.notice {

  background: var(--gold-light);

  color: #8a6900;
}


.status-badge.lien {

  background: var(--purple-light);

  color: var(--purple);
}


.status-badge.cleared,
.status-badge.verified {

  background: var(--green-light);

  color: var(--green);
}


.status-badge.review {

  background: var(--orange-light);

  color: var(--orange);
}


.status-badge.draft {

  background: var(--gray-100);

  color: var(--gray-600);
}


/* ============================================================
   WORKFLOW PIPELINE
   ============================================================ */

.workflow-pipeline {

  display: flex;
  align-items: center;

  width: 100%;

  padding: 25px 24px;

  overflow-x: auto;
}


.workflow-stage {

  min-width: 105px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5px;

  text-align: center;
}


.stage-number {

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--gray-100);

  border: 2px solid var(--gray-300);

  color: var(--gray-500);

  font-size: 11px;
  font-weight: 800;
}


.workflow-stage.complete .stage-number {

  background: var(--green-light);

  border-color: var(--green);

  color: var(--green);
}


.workflow-stage.current .stage-number {

  background: var(--blue-100);

  border-color: var(--blue-600);

  color: var(--blue-700);

  box-shadow:
    0 0 0 4px rgba(22,132,194,0.10);
}


.workflow-stage strong {

  color: var(--navy-900);

  font-size: 10px;
}


.workflow-stage small {

  color: var(--gray-500);

  font-size: 8px;
}


.pipeline-line {

  flex: 1;

  min-width: 25px;
  max-width: 80px;

  height: 2px;

  background: var(--gray-300);
}


/* ============================================================
   DOCUMENT WORKSPACE
   ============================================================ */

.document-workspace {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    290px;

  gap: 22px;

  width: 100%;
}


.document-list-panel {

  min-width: 0;
}


.document-rules-panel {

  min-width: 0;

  align-self: start;
}


/* ============================================================
   DOCUMENT STATS
   ============================================================ */

.document-stats {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.document-stat-card {

  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding: 16px;

  background: white;

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
}


.document-stat-icon {

  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-size: 14px;
  font-weight: 900;
}


.document-stat-card.blue .document-stat-icon {

  background: var(--blue-100);

  color: var(--blue-700);
}


.document-stat-card.warning .document-stat-icon {

  background: var(--orange-light);

  color: var(--orange);
}


.document-stat-card.purple .document-stat-icon {

  background: var(--purple-light);

  color: var(--purple);
}


.document-stat-card.success .document-stat-icon {

  background: var(--green-light);

  color: var(--green);
}


.document-stat-card span {

  display: block;

  color: var(--gray-500);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.07em;

  white-space: nowrap;
}


.document-stat-card strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 21px;
}


.document-stat-card small {

  display: block;

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


/* ============================================================
   DOCUMENT TABLE
   ============================================================ */

.documents-table {

  min-width: 900px;
}


.document-name-cell {

  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 180px;
}


.document-icon {

  width: 30px;
  height: 34px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 13px;
  font-weight: 900;
}


.document-name {

  color: var(--navy-900);

  font-weight: 700;

  font-size: 10px;
}


.document-meta {

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


.document-action {

  min-height: 28px;

  padding: 0 9px;

  border: 1px solid var(--gray-300);

  border-radius: 6px;

  background: white;

  color: var(--gray-700);

  font-size: 9px;
  font-weight: 700;
}


.document-action:hover {

  background: var(--gray-50);

  border-color: var(--blue-500);

  color: var(--blue-700);
}


/* ============================================================
   DOCUMENT RULES
   ============================================================ */

.document-rule {

  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding: 16px 18px;

  border-bottom: 1px solid var(--gray-150);
}


.rule-number {

  width: 29px;
  height: 29px;

  flex: 0 0 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 8px;
  font-weight: 900;
}


.document-rule strong {

  display: block;

  color: var(--navy-900);

  font-size: 10px;
}


.document-rule p {

  margin: 4px 0 0;

  color: var(--gray-500);

  font-size: 9px;

  line-height: 1.5;
}


.document-warning,
.modal-warning {

  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin: 16px;

  padding: 12px;

  border-radius: 8px;

  background: var(--orange-light);

  border: 1px solid #f2d7b0;
}


.warning-icon {

  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e89b45;

  color: white;

  font-size: 11px;
  font-weight: 900;
}


.document-warning strong {

  color: #86520f;

  font-size: 9px;
}


.document-warning p,
.modal-warning p {

  margin: 3px 0 0;

  color: #805c2e;

  font-size: 8px;

  line-height: 1.5;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {

  padding: 55px 20px;

  text-align: center;
}


.empty-state-icon {

  width: 48px;
  height: 48px;

  margin: 0 auto 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 20px;
}


.empty-state h3 {

  margin: 0;

  color: var(--navy-900);

  font-size: 14px;
}


.empty-state p {

  margin: 6px 0 16px;

  color: var(--gray-500);

  font-size: 10px;
}


/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    rgba(5, 20, 30, 0.58);

  backdrop-filter: blur(2px);

  overflow-y: auto;
}


.modal {

  width: min(900px, 100%);

  max-height: calc(100vh - 50px);

  display: flex;
  flex-direction: column;

  background: white;

  border-radius: 14px;

  box-shadow: var(--shadow-lg);

  overflow: hidden;
}


.small-modal {

  width: min(570px, 100%);
}


.document-modal {

  width: min(760px, 100%);
}


.modal-header {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  padding: 20px 22px;

  border-bottom: 1px solid var(--gray-200);
}


.modal-header h2 {

  margin: 5px 0 4px;

  color: var(--navy-900);

  font-size: 18px;
}


.modal-header p {

  margin: 0;

  color: var(--gray-500);

  font-size: 10px;
}


.modal-close {

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border: 1px solid var(--gray-200);

  border-radius: 7px;

  background: white;

  color: var(--gray-600);

  font-size: 20px;
  line-height: 1;
}


.modal-close:hover {

  background: var(--gray-100);

  color: var(--red);
}


.modal-body {

  padding: 22px;

  overflow-y: auto;
}


.modal-footer {

  display: flex;
  justify-content: flex-end;

  gap: 8px;

  padding: 15px 22px;

  border-top: 1px solid var(--gray-200);

  background: var(--gray-50);
}


/* ============================================================
   SUMMARY GRID
   ============================================================ */

.summary-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  margin-bottom: 24px;

  border: 1px solid var(--gray-200);

  border-radius: 8px;

  overflow: hidden;
}


.summary-item {

  padding: 13px;

  border-right: 1px solid var(--gray-200);
}


.summary-item:last-child {
  border-right: 0;
}


.summary-item span {

  display: block;

  color: var(--gray-500);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.07em;
}


.summary-item strong {

  display: block;

  margin-top: 5px;

  color: var(--navy-900);

  font-size: 11px;
}


/* ============================================================
   MODAL SECTIONS
   ============================================================ */

.modal-section {

  margin-top: 22px;
}


.modal-section h3 {

  margin: 0 0 12px;

  color: var(--navy-900);

  font-size: 12px;
}


.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;
}


.form-grid label,
.full-field {

  display: flex;
  flex-direction: column;

  gap: 6px;

  color: var(--gray-700);

  font-size: 9px;
  font-weight: 800;
}


.form-grid label.full,
.full-field {

  grid-column: 1 / -1;
}


.form-grid input,
.form-grid select,
.form-grid textarea,
.full-field input,
.full-field textarea {

  width: 100%;

  min-height: 38px;

  padding: 9px 10px;

  border: 1px solid var(--gray-300);

  border-radius: 7px;

  background: white;

  color: var(--gray-800);

  font-size: 10px;

  resize: vertical;
}


.full-field {
  margin-top: 13px;
}


.form-grid textarea,
.full-field textarea {
  min-height: 80px;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.workflow-timeline {

  display: flex;
  flex-direction: column;

  border-left: 2px solid var(--gray-200);

  margin-left: 9px;
}


.timeline-item {

  position: relative;

  padding: 0 0 18px 20px;
}


.timeline-item::before {

  content: "";

  position: absolute;

  left: -7px;
  top: 2px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: white;

  border: 2px solid var(--gray-300);
}


.timeline-item.complete::before {

  background: var(--green);

  border-color: var(--green);
}


.timeline-item.current::before {

  background: var(--blue-600);

  border-color: var(--blue-600);

  box-shadow:
    0 0 0 4px rgba(22,132,194,0.12);
}


.timeline-item strong {

  color: var(--navy-900);

  font-size: 10px;
}


.timeline-item small {

  display: block;

  margin-top: 3px;

  color: var(--gray-500);

  font-size: 8px;
}


/* ============================================================
   PAYMENT HISTORY
   ============================================================ */

.payment-history {

  border: 1px solid var(--gray-200);

  border-radius: 8px;

  overflow: hidden;
}


.payment-row {

  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap: 10px;

  padding: 11px 13px;

  border-bottom: 1px solid var(--gray-150);
}


.payment-row:last-child {
  border-bottom: 0;
}


.payment-row span {

  color: var(--gray-500);

  font-size: 8px;
}


.payment-row strong {

  display: block;

  margin-top: 3px;

  color: var(--navy-900);

  font-size: 9px;
}


/* ============================================================
   SELECTED RECORD
   ============================================================ */

.selected-record {

  margin-bottom: 18px;

  padding: 13px;

  border-radius: 8px;

  background: var(--blue-100);

  border: 1px solid #c7e6f5;
}


.selected-record span {

  display: block;

  color: var(--blue-700);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.07em;
}


.selected-record strong {

  display: block;

  margin-top: 4px;

  color: var(--navy-900);

  font-size: 12px;
}


.selected-record small {

  display: block;

  margin-top: 3px;

  color: var(--gray-600);

  font-size: 8px;
}


/* ============================================================
   UPLOAD AREA
   ============================================================ */

.upload-area {

  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 17px;

  padding: 17px;

  border: 1px dashed var(--gray-300);

  border-radius: 9px;

  background: var(--gray-50);
}


.upload-icon {

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: var(--blue-100);

  color: var(--blue-700);

  font-size: 18px;
  font-weight: 900;
}


.upload-area strong {

  display: block;

  color: var(--navy-900);

  font-size: 10px;
}


.upload-area p {

  margin: 3px 0 8px;

  color: var(--gray-500);

  font-size: 8px;
}


.upload-area input[type="file"] {

  max-width: 100%;

  font-size: 9px;
}


.selected-file {

  margin-top: 9px;

  padding: 9px 11px;

  border-radius: 7px;

  background: var(--green-light);

  color: var(--green);

  font-size: 9px;
  font-weight: 700;
}


/* ============================================================
   TOAST
   ============================================================ */

.toast {

  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 800;

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 240px;

  padding: 12px 14px;

  background: var(--navy-900);

  color: white;

  border-radius: 9px;

  box-shadow: var(--shadow-lg);
}


.toast-icon {

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--green);

  font-size: 11px;
  font-weight: 900;
}


.toast strong {

  display: block;

  font-size: 10px;
}


.toast span {

  display: block;

  margin-top: 2px;

  color: rgba(255,255,255,0.65);

  font-size: 8px;
}


/* ============================================================
   RESPONSIVE: LARGE TABLETS
   ============================================================ */

@media (max-width: 1200px) {

  :root {
    --sidebar-width: 220px;
  }

  .content-area {
    padding: 22px;
  }

  .document-workspace {
    grid-template-columns:
      minmax(0, 1fr)
      260px;
  }

  .dashboard-stats,
  .document-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dashboard-stats.three {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================
   RESPONSIVE: TABLETS
   ============================================================ */

@media (max-width: 900px) {

  :root {
    --sidebar-width: 190px;
  }

  .brand {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-subtitle {
    font-size: 7px;
  }

  .nav-item {
    padding-left: 9px;
    padding-right: 9px;
  }

  .topbar {
    padding: 0 18px;
  }

  .content-area {
    padding: 18px;
  }

  .page-header {
    flex-direction: column;
  }

  .document-workspace {
    grid-template-columns: 1fr;
  }

  .document-rules-panel {
    order: 2;
  }

  .summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .summary-item:nth-child(2) {
    border-right: 0;
  }

  .summary-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--gray-200);
  }

  .dashboard-stats.three {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */

@media (max-width: 700px) {

  :root {
    --sidebar-width: 0px;
  }

  .sidebar {

    position: relative;

    width: 100%;

    height: auto;

    min-height: 0;

    max-height: none;

    flex-direction: column;
  }

  .app-shell {
    display: block;
  }

  .main-content {

    width: 100%;

    margin-left: 0;
  }

  .brand {
    min-height: 70px;
  }

  .main-nav {

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    padding: 10px;
  }

  .nav-item {
    min-height: 38px;
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {

    min-height: 64px;

    padding: 0 13px;
  }

  .topbar-title {
    display: none;
  }

  .topbar-right {
    gap: 5px;
  }

  .controls-button {
    display: none;
  }

  .content-area {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 25px;
  }

  .dashboard-stats,
  .dashboard-stats.three,
  .document-stats {
    grid-template-columns: 1fr;
  }

  .document-toolbar,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    max-width: none;
  }

  .toolbar select,
  .document-toolbar select {
    width: 100%;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid label.full,
  .full-field {
    grid-column: auto;
  }

  .workflow-pipeline {
    justify-content: flex-start;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal {
    max-height: calc(100vh - 20px);
  }

  .modal-body {
    padding: 16px;
  }

  .modal-header,
  .modal-footer {
    padding: 14px 16px;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-item {
    border-right: 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .summary-item:last-child {
    border-bottom: 0;
  }
}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 430px) {

  .main-nav {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .topbar-left {
    display: none;
  }

  .topbar {
    justify-content: flex-end;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .document-name-cell {
    min-width: 150px;
  }
}   width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .document-name-cell {
    min-width: 150px;
  }
}

/* ============================================================
   V1.0 UNIFIED APPLICATION ADDITIONS
   ============================================================ */
.content{padding:26px;max-width:1600px;width:100%;margin:0 auto;}
.page{padding-bottom:30px;}
.data-card,.panel{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden;}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;border-bottom:1px solid var(--gray-200);}
.panel-header h2,.panel-header h3{margin:0;color:var(--navy-900);font-size:14px;}
.panel-body{padding:20px;}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{padding:11px 13px;background:var(--gray-50);color:var(--gray-500);font-size:8px;text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--gray-200);}
.data-table td{padding:13px;border-bottom:1px solid var(--gray-150);font-size:10px;color:var(--gray-700);vertical-align:middle;}
.data-table tr:hover td{background:#fbfcfd;}
.empty-table{text-align:center;padding:35px!important;color:var(--gray-500)!important;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.form-grid-3 label,.form-grid-3 .full{display:flex;flex-direction:column;gap:6px;color:var(--gray-700);font-size:9px;font-weight:800;}
.form-grid-3 .full{grid-column:1/-1;}
.form-grid-3 input,.form-grid-3 select,.form-grid-3 textarea{width:100%;min-height:38px;padding:9px 10px;border:1px solid var(--gray-300);border-radius:7px;background:#fff;color:var(--gray-800);font-size:10px;}
.form-grid-3 textarea{min-height:90px;resize:vertical;}
.search-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px;}
.search-row input,.search-row select{min-height:38px;padding:8px 10px;border:1px solid var(--gray-300);border-radius:7px;background:#fff;font-size:10px;color:var(--gray-800);}
.search-row input{flex:1;min-width:220px;}
.metric-card{padding:18px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
.metric-label{font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--gray-500);text-transform:uppercase;}
.metric-value{font-size:25px;font-weight:800;color:var(--navy-900);margin-top:7px;}
.metric-note{font-size:9px;color:var(--gray-500);margin-top:5px;}
.action-link{border:0;background:none;color:var(--blue-700);font-size:10px;font-weight:800;cursor:pointer;padding:4px 6px;}
.action-link:hover{color:var(--blue-500);}
.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;}
.detail-item{padding:13px;border-right:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);}
.detail-item:nth-child(4n){border-right:0;}
.detail-item span{display:block;font-size:7px;font-weight:800;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;}
.detail-item strong{display:block;margin-top:5px;font-size:11px;color:var(--navy-900);}
.account-tabs{display:flex;gap:5px;padding:0 20px;border-bottom:1px solid var(--gray-200);overflow:auto;}
.account-tab{border:0;background:none;padding:12px 13px;font-size:10px;font-weight:800;color:var(--gray-500);border-bottom:2px solid transparent;white-space:nowrap;}
.account-tab.active{color:var(--blue-700);border-bottom-color:var(--blue-700);}
.relationship-card{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.relationship-box{padding:15px;border:1px solid var(--gray-200);border-radius:9px;background:var(--gray-50);}
.relationship-box h4{margin:0 0 7px;color:var(--navy-900);font-size:11px;}
.relationship-box p{margin:3px 0;color:var(--gray-600);font-size:9px;}
@media(max-width:1000px){.sidebar{width:205px}.main-content{margin-left:205px;width:calc(100% - 205px)}.summary-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3,.form-grid-3,.detail-grid{grid-template-columns:1fr 1fr}.detail-item:nth-child(4n){border-right:1px solid var(--gray-200)}.detail-item:nth-child(2n){border-right:0}}
@media(max-width:720px){.sidebar{position:relative;width:100%;height:auto;min-height:0}.app-shell{display:block}.main-content{margin-left:0;width:100%}.main-nav{display:grid;grid-template-columns:repeat(2,1fr)}.topbar{position:relative;padding:15px;align-items:flex-start}.content{padding:15px}.summary-grid,.grid-2,.grid-3,.form-grid-3,.detail-grid,.relationship-card{grid-template-columns:1fr}.detail-item{border-right:0!important}.page-header{flex-direction:column}.data-table{min-width:850px}.data-card{overflow-x:auto}.panel{overflow:hidden}}


/* ============================================================
   LIENTRACKIT V1.0 ADMIN LOGIN
   ============================================================ */
.lti-login-screen{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:38px 20px;background:radial-gradient(circle at 50% 20%,#ffffff 0,#f7f9fc 48%,#eef2f6 100%);position:relative;overflow:auto;}
.lti-login-screen:before,.lti-login-screen:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px);opacity:.35;}
.lti-login-screen:before{width:520px;height:520px;left:-260px;top:90px;border:1px solid #dce5ee;box-shadow:80px 80px 0 -79px #dce5ee,160px 160px 0 -159px #dce5ee;}
.lti-login-screen:after{width:680px;height:680px;right:-420px;bottom:-260px;border:1px solid #d8e3ec;box-shadow:-35px -35px 0 -34px #d8e3ec,-70px -70px 0 -69px #d8e3ec,-105px -105px 0 -104px #d8e3ec;}
.lti-login-wrap{width:min(100%,650px);position:relative;z-index:1;text-align:center;}
.lti-login-branding{margin-bottom:24px;}
.lti-login-logo{display:block;width:min(100%,560px);height:auto;max-height:210px;object-fit:contain;margin:0 auto 8px;}
.lti-login-tagline{display:flex;justify-content:center;align-items:center;gap:18px;font-weight:800;letter-spacing:.22em;font-size:13px;color:#0a2535;}
.lti-login-tagline i{width:2px;height:19px;background:#21845b;display:block;}
.lti-login-tagline .green{color:#21845b;}
.lti-login-rule{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:18px;color:#7b8794;font-size:12px;letter-spacing:.14em;font-weight:700;}
.lti-login-rule span{width:70px;height:1px;background:#a9b4bf;display:block;}
.lti-login-card{width:min(100%,500px);margin:0 auto;background:#fff;border:1px solid #dce2e8;border-radius:16px;box-shadow:0 14px 40px rgba(15,35,50,.15);padding:34px 34px 30px;text-align:left;}
.lti-login-card h1{margin:0;text-align:center;color:#0a2535;font-size:28px;line-height:1.2;}
.lti-login-card>p{text-align:center;color:#5d6874;margin:8px 0 26px;font-size:15px;}
.lti-login-card label{display:block;font-weight:700;color:#0a2535;font-size:14px;margin:0 0 7px;}
.lti-login-card input{display:block;width:100%;height:48px;border:1px solid #c7d0d9;border-radius:8px;padding:0 14px;margin:0 0 18px;background:#fff;color:#17212b;}
.lti-login-card input:focus{border-color:#1684c2;box-shadow:0 0 0 3px rgba(22,132,194,.12);outline:none;}
.lti-login-submit{width:100%;height:50px;border:0;border-radius:8px;background:linear-gradient(90deg,#0d4d80,#116da3);color:#fff;font-weight:800;letter-spacing:.08em;font-size:15px;cursor:pointer;box-shadow:0 4px 10px rgba(17,109,163,.22);margin-top:4px;}
.lti-login-submit:hover{filter:brightness(1.05);}
.lti-login-error{min-height:20px;color:#c94b4b;text-align:center;font-size:13px;font-weight:700;margin:-4px 0 8px;}
.lti-login-divider{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:#7b8794;font-size:11px;font-weight:700;letter-spacing:.12em;}
.lti-login-divider:before,.lti-login-divider:after{content:"";height:1px;background:#dce2e8;flex:1;}
.lti-login-divider span{white-space:nowrap;}
.lti-login-access{text-align:center;color:#5d6874;font-size:14px;}
.lti-login-footer{margin-top:24px;color:#0a2535;font-size:13px;font-weight:700;letter-spacing:.04em;}
.lti-login-footer .green-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#21845b;margin-right:7px;}
.lti-login-footer b{color:#a9b4bf;margin:0 10px;font-weight:400;}
.lti-locked{display:none!important;}
.user{display:flex;align-items:center;gap:10px;}
.lti-logout{margin-left:8px!important;white-space:nowrap;}
@media(max-width:700px){.lti-login-screen{padding:24px 14px}.lti-login-logo{max-height:145px}.lti-login-tagline{font-size:10px;gap:10px}.lti-login-rule{font-size:9px}.lti-login-rule span{width:35px}.lti-login-card{padding:26px 22px}.lti-login-card h1{font-size:24px}.lti-logout{margin-left:0!important;padding:8px 10px!important;font-size:11px!important}.user{gap:6px}.user small{display:none;}}