:root {
  --dmz-navy: #102a43;
  --dmz-navy-2: #183b56;
  --dmz-blue: #2f6fed;
  --dmz-blue-soft: #eaf1ff;
  --dmz-cyan: #0ea5a8;
  --dmz-green: #16856b;
  --dmz-amber: #b7791f;
  --dmz-red: #c0392b;
  --dmz-bg: #f4f7fb;
  --dmz-surface: #ffffff;
  --dmz-border: #e2e8f0;
  --dmz-text: #203040;
  --dmz-muted: #6b7c93;
  --dmz-radius: 14px;
  --dmz-shadow: 0 8px 28px rgba(16,42,67,.07);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.app-body, body { background: var(--dmz-bg); color: var(--dmz-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15.5px; }
a { text-underline-offset: 2px; }

/* Top navigation */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 66px;
  background: linear-gradient(100deg, var(--dmz-navy) 0%, #173c65 62%, #1e4d78 100%);
  box-shadow: 0 5px 20px rgba(15,39,66,.16);
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: .8rem;
}
.app-navbar .navbar-brand {
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.app-navbar .navbar-brand::before {
  content: "DMZ";
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.app-navbar > .d-flex { align-items: center; flex-wrap: wrap; }
.app-navbar .btn {
  border-radius: 9px;
  min-height: 36px;
  padding: .42rem .72rem;
  font-weight: 650;
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}
.app-navbar .btn-outline-light,
.app-navbar .btn-outline-info,
.app-navbar .btn-outline-warning,
.app-navbar .btn-outline-danger {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.app-navbar .btn-outline-danger:hover { background: #b42318; border-color: #b42318; }
.app-navbar .btn-info { background: #dff6ff; color: #075985; border-color: transparent; }
.app-navbar .btn-success { background: #1b8d72; border-color: #1b8d72; }
.app-navbar .btn-warning { background: #f4b740; border-color: #f4b740; color: #362300; }
.app-navbar .btn-primary { background: #3c78ef; border-color: #3c78ef; }

/* Main layout */
.app-page { max-width: 1500px; margin: 0 auto; }
.container.app-page, .container-fluid.app-page { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }
h1,h2,h3,h4,h5 { color: #17324d; font-weight: 760; letter-spacing: -.02em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.35rem; }
.text-muted { color: var(--dmz-muted) !important; }

/* Cards */
.card {
  border: 1px solid var(--dmz-border) !important;
  border-radius: var(--dmz-radius) !important;
  background: var(--dmz-surface);
  box-shadow: var(--dmz-shadow) !important;
  overflow: hidden;
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--dmz-border);
  padding: .95rem 1.15rem;
  color: #1d3550;
}
.card-header strong { font-size: .98rem; }
.card-body { padding: 1.15rem; }
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -28px;
  top: -28px;
  border-radius: 50%;
  background: rgba(47,111,237,.07);
}
.kpi .text-muted, .card .text-muted:first-child { font-size: .82rem; font-weight: 650; }
.display-6 { font-weight: 780; letter-spacing: -.04em; }

/* Filters and forms */
.form-label { font-size: .86rem; font-weight: 700; color: #40566d; margin-bottom: .4rem; }
.form-control, .form-select {
  min-height: 44px;
  border-radius: 9px;
  border-color: #d7e0ea;
  color: #203040;
  background-color: #fff;
  box-shadow: none;
}
.form-control:focus, .form-select:focus {
  border-color: #7aa2f7;
  box-shadow: 0 0 0 .2rem rgba(47,111,237,.11);
}
.form-control:disabled, .form-select:disabled, textarea:disabled {
  background: #f3f6f9;
  color: #5d6e80;
}
textarea.form-control { min-height: 100px; }
.input-group .btn { min-height: 44px; }
.form-check-input:checked { background-color: var(--dmz-blue); border-color: var(--dmz-blue); }

/* Buttons */
.btn { border-radius: 9px; font-weight: 650; min-height: 40px; }
.btn-sm { min-height: 34px; border-radius: 8px; }
.btn-lg { min-height: 48px; }
.btn-primary { background: var(--dmz-blue); border-color: var(--dmz-blue); }
.btn-primary:hover { background: #255cc9; border-color: #255cc9; }
.btn-success { background: var(--dmz-green); border-color: var(--dmz-green); }
.btn-light { background: #f1f5f9; border-color: #e2e8f0; color: #30475e; }
.btn-outline-primary { color: #2c64ce; border-color: #a9c0ef; }

/* Tables */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table { min-width: 760px; margin-bottom: 0; --bs-table-bg: transparent; }
.table thead th {
  background: #f7f9fc !important;
  color: #53657a;
  font-size: .77rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  font-weight: 760;
  border-bottom: 1px solid #dfe7ef;
  padding: .82rem .9rem;
  white-space: nowrap;
}
.table td { padding: .82rem .9rem; border-color: #edf1f5; vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8fbff; }
.table tbody tr:last-child td { border-bottom: 0; }

/* Badges and progress */
.badge { border-radius: 999px; padding: .38rem .6rem; font-weight: 700; letter-spacing: .01em; }
.progress { height: 9px; border-radius: 999px; background: #e8eef5; overflow: hidden; }
.progress-bar { border-radius: 999px; font-size: 0; background: linear-gradient(90deg,#2f6fed,#53a1ff); }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: 11px; box-shadow: none; }
.alert-success { background: #edf9f5; border-color: #c9eadf; color: #12664f; }
.alert-danger { background: #fff1f0; border-color: #f2d1cd; color: #9f2e22; }
.alert-info, .alert-primary { background: #eef5ff; border-color: #d1e1fb; color: #245da9; }
.alert-warning { background: #fff8e8; border-color: #f1e0b5; color: #835d10; }

/* List group */
.list-group-item { border-color: #edf1f5; padding: 1rem 1.1rem; }
.list-group-item:hover { background: #fafcff; }

/* Task directive timeline */
.directive-timeline { border-left: 2px solid #d7e3f2; margin-left: .55rem; padding-left: 1.35rem; }
.directive-item { position: relative; padding: .2rem 0 1.4rem; }
.directive-item::before { content: ""; position: absolute; left: -1.71rem; top: .45rem; width: .72rem; height: .72rem; border-radius: 50%; background: var(--dmz-blue); border: 3px solid #fff; box-shadow: 0 0 0 2px #9bb8ef; }
.directive-content { white-space: pre-wrap; background: #f7f9fc; border: 1px solid #e5ebf2; border-radius: 11px; padding: .9rem 1rem; color: #31465c; }

/* Login */
.login-page { background: radial-gradient(circle at 20% 15%, #e8f1ff 0, transparent 34%), linear-gradient(135deg,#f7faff 0%,#eef3f9 100%); }
.login-card { box-shadow: 0 20px 60px rgba(16,42,67,.14) !important; border: 1px solid rgba(255,255,255,.85) !important; }
.login-mark { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 1rem; background: linear-gradient(145deg,#143f69,#2f6fed); color: #fff; font-weight: 850; letter-spacing: .04em; box-shadow: 0 10px 25px rgba(47,111,237,.25); }
.login-eyebrow { display:inline-block; color:#2f6fed; background:#eaf1ff; border-radius:999px; padding:.28rem .65rem; font-size:.75rem; font-weight:750; margin-bottom:.7rem; }

/* Utility blocks */
.section-note { background: #f7f9fc; border: 1px solid var(--dmz-border); border-radius: 10px; padding: .8rem 1rem; }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--dmz-muted); }

/* Mobile */
@media (max-width: 991.98px) {
  .app-navbar { position: relative; padding: .8rem 12px !important; align-items: flex-start; }
  .app-navbar .navbar-brand { width: 100%; margin-right: 0; }
  .app-navbar > .d-flex { width: 100%; display: flex !important; gap: .45rem !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; scrollbar-width: thin; }
  .app-navbar > .d-flex > a, .app-navbar > .d-flex > form { flex: 0 0 auto; }
  .app-navbar .btn { white-space: nowrap; }
  .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  .card-body { padding: 1rem; }
}

@media (max-width: 767.98px) {
  body { font-size: 15px; }
  .container.app-page, .container-fluid.app-page { padding-top: 1rem !important; }
  h2 { font-size: 1.32rem; }
  h3 { font-size: 1.2rem; }
  .display-6 { font-size: 1.8rem; }
  .row.g-4 { --bs-gutter-y: 1rem; }
  .table { font-size: .87rem; min-width: 720px; }
  .table th, .table td { padding: .7rem .62rem; }
  .progress { min-width: 105px; }
  .card-header { padding: .85rem 1rem; }
  .btn-lg { font-size: 1rem; }
  .mobile-full, .d-grid .btn { width: 100%; }
}

@media (max-width: 420px) {
  .app-navbar .navbar-brand::before { width: 34px; height: 34px; }
  .btn { font-size: .92rem; }
}

/* Department chat */
.chat-layout { min-height: calc(100vh - 175px); }
.chat-groups-card { position: sticky; top: 86px; }
.chat-group-link { display:flex; align-items:center; gap:.8rem; min-height:68px; }
.chat-group-link.active { background: var(--dmz-blue-soft); color:#1e56b6; border-left:4px solid var(--dmz-blue); }
.chat-group-link small { display:block; color:var(--dmz-muted); margin-top:.15rem; font-size:.75rem; }
.chat-group-link.active small { color:#5577a9; }
.chat-group-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#eef3f8; color:#4c647d; flex:0 0 auto; }
.chat-group-link.active .chat-group-icon { background:#dbe8ff; color:#2f6fed; }
.chat-card { min-height:650px; display:flex; flex-direction:column; }
.chat-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.chat-live-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:#1f9d78; margin-right:.35rem; box-shadow:0 0 0 3px rgba(31,157,120,.12); }
.chat-user-chip { display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--dmz-border); border-radius:999px; padding:.5rem .8rem; box-shadow:var(--dmz-shadow); font-weight:700; }
.chat-user-chip i { color:var(--dmz-blue); }
.chat-user-chip small { color:var(--dmz-muted); font-weight:600; border-left:1px solid var(--dmz-border); padding-left:.55rem; }
.chat-messages { height:520px; overflow-y:auto; padding:1.25rem; background:linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%); scroll-behavior:smooth; }
.chat-message { display:flex; align-items:flex-end; gap:.65rem; margin-bottom:1rem; max-width:82%; }
.chat-message.mine { margin-left:auto; flex-direction:row-reverse; }
.chat-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#dfe8f2; color:#35506b; font-weight:800; flex:0 0 auto; border:2px solid #fff; box-shadow:0 2px 8px rgba(16,42,67,.12); }
.chat-message.mine .chat-avatar { background:#dce8ff; color:#245dc0; }
.chat-bubble-wrap { min-width:0; }
.chat-meta { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin:0 .2rem .28rem; font-size:.74rem; color:var(--dmz-muted); }
.chat-meta strong { color:#31485f; }
.chat-meta span { background:#edf2f7; border-radius:999px; padding:.1rem .42rem; font-size:.68rem; }
.chat-message.mine .chat-meta { justify-content:flex-end; }
.chat-bubble { background:#fff; border:1px solid #e1e8f0; box-shadow:0 3px 12px rgba(16,42,67,.05); padding:.72rem .9rem; border-radius:14px 14px 14px 4px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.chat-message.mine .chat-bubble { background:#2f6fed; border-color:#2f6fed; color:#fff; border-radius:14px 14px 4px 14px; }
.chat-compose { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:1rem 1rem .55rem; background:#fff; border-top:1px solid var(--dmz-border); }
.chat-compose textarea { resize:none; min-height:56px; max-height:150px; }
.chat-compose .btn { min-width:105px; }
.chat-compose-note { display:flex; justify-content:space-between; gap:1rem; padding:0 1rem .85rem; color:var(--dmz-muted); font-size:.75rem; background:#fff; }

@media (max-width: 991.98px) {
  .chat-groups-card { position:static; }
  .chat-groups-card .list-group { display:flex; flex-direction:row; overflow-x:auto; }
  .chat-group-link { min-width:180px; border-bottom:0; border-right:1px solid #edf1f5; }
  .chat-group-link.active { border-left:0; border-bottom:3px solid var(--dmz-blue); }
  .chat-card { min-height:calc(100vh - 260px); }
  .chat-messages { height:calc(100vh - 430px); min-height:360px; }
}
@media (max-width: 575.98px) {
  .chat-user-chip { width:100%; border-radius:12px; }
  .chat-user-chip small { margin-left:auto; }
  .chat-messages { padding:.8rem; height:calc(100vh - 390px); min-height:330px; }
  .chat-message { max-width:94%; gap:.45rem; }
  .chat-avatar { width:30px; height:30px; font-size:.8rem; }
  .chat-meta { font-size:.68rem; }
  .chat-meta span { display:none; }
  .chat-bubble { padding:.65rem .75rem; }
  .chat-compose { grid-template-columns:1fr; gap:.55rem; }
  .chat-compose .btn { width:100%; }
}

/* Private 1-to-1 chat */
.private-contact-search { padding-left:2.25rem; min-height:40px; }
.private-contact-search-icon { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:#8090a2; z-index:2; }
.private-contact-list { max-height:620px; overflow-y:auto; }
.private-contact-link { display:flex; align-items:center; gap:.75rem; min-height:72px; }
.private-contact-link.active { background:var(--dmz-blue-soft); color:#1e56b6; border-left:4px solid var(--dmz-blue); }
.private-contact-avatar, .private-chat-header-avatar { display:grid; place-items:center; flex:0 0 auto; border-radius:50%; font-weight:800; background:linear-gradient(145deg,#dce8ff,#c8dafd); color:#245dc0; border:2px solid #fff; box-shadow:0 2px 8px rgba(16,42,67,.12); }
.private-contact-avatar { width:42px; height:42px; }
.private-chat-header-avatar { width:48px; height:48px; font-size:1.05rem; }
.private-contact-info { min-width:0; display:block; }
.private-contact-info strong { display:block; color:#263f58; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.private-contact-info small { display:block; color:var(--dmz-muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.15rem; }
.private-contact-link.active .private-contact-info strong { color:#1e56b6; }
.private-contact-chevron { color:#9aa8b7; font-size:.8rem; }
.private-chat-header { min-height:76px; }
.private-chat-privacy-note { padding:.55rem 1rem; background:#f4f8fd; border-top:1px solid #e1e8f0; color:#617489; font-size:.78rem; text-align:center; }
.private-chat-empty-card { min-height:650px; display:grid; place-items:center; }
.private-chat-empty-card .empty-state { max-width:520px; }

@media (max-width: 991.98px) {
  .private-contacts-card .card-header { position:sticky; top:0; z-index:2; }
  .private-contact-list { display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; }
  .private-contact-link { min-width:230px; border-right:1px solid #edf1f5; border-bottom:0; }
  .private-contact-link.active { border-left:0; border-bottom:3px solid var(--dmz-blue); }
}
@media (max-width: 575.98px) {
  .private-contact-link { min-width:205px; padding:.72rem .8rem; }
  .private-contact-avatar { width:36px; height:36px; }
  .private-chat-header-avatar { width:42px; height:42px; }
  .private-chat-privacy-note { font-size:.72rem; }
}