:root {
  --p-color-bg: #f1f2f4;
  --p-color-bg-surface: #ffffff;
  --p-color-bg-surface-hover: #f7f7f7;
  --p-color-bg-surface-active: #ebebeb;
  --p-color-text: #202223;
  --p-color-text-subdued: #6d7175;
  --p-color-border: #8c9196;
  --p-color-border-subdued: #c9cccf;
  --p-color-icon: #5c5f62;
  
  --p-color-button: #ffffff;
  --p-color-button-hover: #f6f6f7;
  --p-color-button-border: #c9cccf;
  
  --p-color-primary: #000000;
  --p-color-primary-hover: #333333;
  
  --font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--p-color-bg);
  color: var(--p-color-text);
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.app-header {
  height: 56px;
  background-color: #1a1a1a;
  color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 19px; color: white; letter-spacing: -0.5px; }
.header-search { display: flex; align-items: center; }
.header-search input {
  height: 32px;
  background: #303030;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  padding: 0 12px 0 32px;
  width: 480px;
  color: white;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}
.header-search input:hover { background: #3a3a3a; }
.header-search input:focus { background: #1a1a1a; border-color: #ffffff; box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }
.header-user { display: flex; align-items: center; gap: 16px; font-weight: 500; font-size: 13px; color: white; }
.header-user-avatar { background-color: #2c6ecb; color: #FFF; padding: 4px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; letter-spacing: 0.5px;}

/* Layout */
.app-container { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.app-sidebar {
  width: 240px;
  background-color: #ebebeb;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; padding: 6px 12px;
  color: #303030; text-decoration: none;
  border-radius: 6px; margin-bottom: 2px; font-weight: 500;
  font-size: 13px;
  transition: background-color 0.1s;
}
.nav-item:hover { background-color: rgba(0,0,0,0.05); }
.nav-item.active { background-color: #FFFFFF; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.nav-item i { margin-right: 12px; width: 16px; text-align: center; font-size: 14px; color: var(--p-color-icon); opacity: 0.8; }
.nav-item.active i { color: #202223; opacity: 1; }

/* Main Content Wrapper */
.app-main { flex: 1; padding: 24px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.app-content { width: 100%; max-width: 100%; padding: 0 16px; margin: 0 auto; }

/* Typography */
h1.page-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: #202223; }
.page-title i { font-size: 16px; color: var(--p-color-icon); }

/* Cards & Elements */
.card { background-color: var(--p-color-bg-surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin-bottom: 20px; overflow: hidden; }
.card-header { padding: 16px; border-bottom: 1px solid #f0f0f0; font-weight: 600; font-size: 14px; background: #FFFFFF; display: flex; justify-content: space-between; align-items: center;}
.card-body { padding: 16px; }

/* Tables */
.table-responsive { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 16px; text-align: left; border-bottom: #f0f0f0; }
.table th { font-weight: 600; color: #303030; border-bottom: 1px solid #f0f0f0; font-size: 12px; }
.table tr:hover td { background-color: var(--p-color-bg-surface-hover); }

/* Badges */
.badge { display: inline-flex; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; background-color: #e4e5e7; color: #202223; }
.badge.safe, .badge.success { background-color: #aee9d1; color: #005e46; }
.badge.medium, .badge.warning { background-color: #ffea8a; color: #8a6116; }
.badge.high, .badge.danger { background-color: #fed3d1; color: #8c2626; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid var(--p-color-button-border); background-color: var(--p-color-button); color: var(--p-color-text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: background 0.1s;}
.btn:hover { background-color: var(--p-color-button-hover); }
.btn:active { background-color: #e3e5e7; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }

.btn-primary { background-color: var(--p-color-primary); border-color: var(--p-color-primary); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-primary:hover { background-color: var(--p-color-primary-hover); border-color: var(--p-color-primary-hover); color: white; }
.btn-primary:active { background-color: #000000; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }

/* Utility */
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.text-right { text-align: right; }
.text-success { color: #005E46; }
.text-danger { color: #8C2626; }
.text-subdued { color: var(--p-color-text-subdued); }

/* Checkbox */
.p-checkbox { width: 16px; height: 16px; border: 1px solid #8c9196; border-radius: 3px; cursor: pointer; }

/* Dashboard Cards */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px;}
.summary-card { background: white; padding: 16px; border-radius: 8px;  box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.summary-card-title { color: var(--p-color-text-subdued); font-size: 13px; margin-bottom: 8px; font-weight: 500; }
.summary-card-value { font-size: 24px; font-weight: 600; margin-bottom: 4px; color: #202223;}
.summary-card-insight { font-size: 12px; color: var(--p-color-text-subdued); }

/* Overlay, Drawers & Modals */
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: none; }
.overlay.active { display: block; }

.drawer { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; z-index: 1001; box-shadow: -2px 0 8px rgba(0,0,0,0.1); transition: right 0.2s ease; display: flex; flex-direction: column; }
.drawer.open { right: 0; }
.drawer-header { padding: 16px; border-bottom: 1px solid var(--p-color-border-subdued); display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600;}
.drawer-body { padding: 16px; flex: 1; overflow-y: auto; }
.drawer-footer { padding: 16px; border-top: 1px solid var(--p-color-border-subdued); display: flex; justify-content: flex-end; gap: 8px; background: #f9fafb;}

.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: white; width: 500px; border-radius: 8px; z-index: 1001; box-shadow: 0 4px 16px rgba(0,0,0,0.15); display: none; flex-direction: column; border: 1px solid #c9cccf;}
.modal.active { display: flex; transform: translate(-50%, -50%) scale(1); transition: transform 0.15s ease; }
.modal-header, .modal-footer { padding: 16px; }
.modal-header { border-bottom: 1px solid var(--p-color-border-subdued); font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 16px; font-size: 14px; }
.modal-footer { border-top: 1px solid var(--p-color-border-subdued); display: flex; justify-content: flex-end; gap: 8px; background: #f9fafb; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}