/* Compact UI tweaks */
html, body {
  font-size: 0.9rem; /* reduce base font size */
}

.content-wrapper {
  font-size: 0.92rem;
}

.navbar, .main-sidebar, .nav-link, .brand-text {
  font-size: 0.92rem;
}

.card-title {
  font-size: 1rem;
  margin: 0;
}

.table {
  font-size: 0.85rem;
}
.table td, .table th {
  padding: .25rem .5rem;
}

.form-control {
  padding: .25rem .5rem;
  font-size: 0.85rem;
}

.btn {
  padding: .2rem .5rem;
  font-size: 0.85rem;
}

.badge {
  font-size: 75%;
}

/* PON column: left-aligned, compact */
.table th.col-pon,
.table td.col-pon {
  width: 48px;
  text-align: left;
  padding-left: .25rem;
  padding-right: .25rem;
}

/* Dashboard improvements */
.small-box .inner h3 { font-size: 1.6rem; }
.small-box .inner p { margin: 0; }
#tbl-cats th, #tbl-cats td { padding: .4rem .5rem; }
#tbl-cats tbody tr.empty-row { opacity: .6; }

/* Reduce header/footer paddings for cards */
.card-header, .card-footer {
  padding: .4rem .75rem;
}

/* Sidebar nav spacing */
.nav-sidebar .nav-item > .nav-link {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Navbar & sidebar menu font adjustments (bold + +1px) */
.navbar-nav .nav-link, .nav-sidebar .nav-link {
  font-weight: 600; /* semi-bold */
  font-size: 0.98rem; /* previously 0.92rem (~+1px) */
}

/* Brand enhancements */
.brand-link-enhanced {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.brand-link-enhanced .brand-logo-icon {
  font-size: 1.6rem;
  color: #17a2b8; /* info tone */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.app-brand-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #f8f9fa !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
@media (min-width: 1400px) {
  .app-brand-title { font-size: 1.25rem !important; }
}

/* Colored nav icons subtle glow */
.nav-sidebar .nav-link .nav-icon.text-info { text-shadow: 0 0 4px rgba(23,162,184,.4); }
.nav-sidebar .nav-link .nav-icon.text-success { text-shadow: 0 0 4px rgba(40,167,69,.35); }
.nav-sidebar .nav-link .nav-icon.text-warning { text-shadow: 0 0 4px rgba(255,193,7,.4); }
.nav-sidebar .nav-link .nav-icon.text-primary { text-shadow: 0 0 4px rgba(0,123,255,.4); }
.nav-sidebar .nav-link .nav-icon.text-danger { text-shadow: 0 0 4px rgba(220,53,69,.45); }
.nav-sidebar .nav-link .nav-icon.text-secondary { text-shadow: 0 0 4px rgba(108,117,125,.4); }
.nav-sidebar .nav-link .nav-icon.text-light { text-shadow: 0 0 4px rgba(248,249,250,.35); }
.nav-sidebar .nav-link .nav-icon.text-teal { color: #20c997; text-shadow: 0 0 4px rgba(32,201,151,.45); }
/* Specific Recovery & Users icons */
.nav-sidebar .nav-link .nav-icon.icon-recovery { color: #ffc107; text-shadow: 0 0 6px rgba(255,193,7,.55); }
.nav-sidebar .nav-link .nav-icon.icon-users { color: #e83e8c; text-shadow: 0 0 6px rgba(232,62,140,.55); }

/* ================= Dashboard Redesign ================= */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.stat-card { background:#ffffff; border-radius:18px; padding:1.1rem 1.25rem; display:flex; align-items:center; gap:1rem; position:relative; box-shadow:0 4px 14px -6px rgba(0,0,0,.18); transition:box-shadow .25s ease, transform .25s ease; }
.stat-card:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,.0),rgba(0,0,0,.03)); pointer-events:none; }
.stat-card:hover { box-shadow:0 8px 26px -8px rgba(0,0,0,.28); transform:translateY(-3px); }
.stat-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.65rem; color:#fff; flex-shrink:0; box-shadow:0 4px 10px -4px rgba(0,0,0,.35); }
.stat-info { display:flex; flex-direction:column; }
.stat-value { font-size:1.55rem; font-weight:700; letter-spacing:.5px; margin:0; }
.stat-label { font-size:.85rem; font-weight:500; margin-top:.15rem; }
.bg-total { background:linear-gradient(145deg,#ff8050,#ff996d); }
.bg-used { background:linear-gradient(145deg,#1d72ff,#3393ff); }
.bg-free { background:linear-gradient(145deg,#ffb300,#ffc43d); }
.bg-util { background:linear-gradient(145deg,#16a34a,#22c55e); }
@media (max-width:640px){ .stat-icon { width:54px; height:54px; font-size:1.4rem; } .stat-value { font-size:1.35rem; } }
@media (prefers-reduced-motion:reduce){ .stat-card { transition:none; } }
.dashboard-metrics-grid {
  --metric-columns: 4;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 1.25rem;
}
.metric-card {
  position: relative;
  background: linear-gradient(135deg,#1d2733,#232f3d);
  border-radius: 18px;
  padding: .95rem 1rem .95rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.5);
  transition: transform .25s ease, box-shadow .25s ease, background .35s ease;
}
.metric-card:before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.metric-card:hover { transform: translateY(-4px); box-shadow:0 8px 24px -6px rgba(0,0,0,.55); }
.metric-card .metric-icon { font-size:2.1rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.metric-card .metric-value { font-size:1.55rem; font-weight:700; margin:0; letter-spacing:.5px; }
.metric-card .metric-label { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; opacity:.85; font-weight:600; }
.metric-card.metric-total { background:linear-gradient(140deg,#007bff,#0096c7); color:#f8f9fa; }
.metric-card.metric-used { background:linear-gradient(140deg,#c9184a,#ff4d6d); color:#fff; }
.metric-card.metric-free { background:linear-gradient(140deg,#128f46,#1fb369); color:#fff; }
.metric-card.metric-util { background:linear-gradient(140deg,#d79a06,#ffba08); color:#2d2d2d; }
.metric-card.metric-util .metric-value { color:#2d2d2d; }
.metric-card.metric-util .metric-label { color:#3b3b3b; }

/* Top categories grid */
.topcats-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.topcat-card { position:relative; background:#198754; color:#fff; border-radius:16px; padding: .85rem .9rem .85rem 3.25rem; overflow:hidden; min-height:122px; box-shadow:0 4px 12px -3px rgba(0,0,0,.45); transition:transform .25s ease, box-shadow .25s ease; }
.topcat-card:before { content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); pointer-events:none; }
.topcat-card:hover { transform:translateY(-4px); box-shadow:0 10px 26px -6px rgba(0,0,0,.6); }
.topcat-card .topcat-icon { position:absolute; left:12px; top:14px; font-size:2.3rem; opacity:.25; }
.topcat-card .topcat-name { font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topcat-card .topcat-ratio { font-size:.95rem; }
.topcat-card .progress { height:6px; border-radius:4px; background:rgba(255,255,255,.25); }
.topcat-card .progress-bar { border-radius:4px; }
.topcat-card .topcat-meta { font-size:.72rem; }
.topcat-card .btn.stretched-link { position:relative; z-index:2; padding:.15rem .55rem; font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; backdrop-filter:blur(2px); }
.topcat-card .btn-outline-light { --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.55); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:rgba(255,255,255,.18); --bs-btn-hover-border-color:#fff; }

/* --- Top Categories Donut Variant --- */
.topcats-donuts { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.topcats-donuts .donut-item { text-decoration:none; position:relative; display:flex; flex-direction:column; align-items:center; font-size:.72rem; color:#2d2d2d; padding:.25rem 0 .35rem; border-radius:12px; transition:background .25s ease, box-shadow .25s ease, transform .25s ease; }
.topcats-donuts .donut-item:hover { background:#f5f7fa; box-shadow:0 4px 14px -4px rgba(0,0,0,.25); transform:translateY(-4px); }
.topcats-donuts .donut-chart { --size:100px; width:var(--size); height:var(--size); position:relative; border-radius:50%; background:
  conic-gradient(var(--donut-color-start), var(--donut-color-end) calc(var(--donut-pct)*1%), #e5e7eb calc(var(--donut-pct)*1%));
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px -4px rgba(0,0,0,.35), inset 0 0 0 6px #fff; }
.topcats-donuts .donut-chart:after { content:""; position:absolute; inset:10px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.topcats-donuts .donut-center { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 .35rem; }
.topcats-donuts .donut-value { font-weight:700; font-size:.95rem; line-height:1.1; }
.topcats-donuts .donut-label { margin-top:.45rem; font-weight:600; max-width:100%; }
.topcats-donuts .donut-sub { line-height:1; }
@media (max-width: 576px) { .topcats-donuts .donut-chart { --size:86px; } }

@media (max-width: 576px) {
  .metric-card { padding:.85rem .85rem; }
  .metric-card .metric-value { font-size:1.35rem; }
  .metric-card .metric-icon { font-size:1.75rem; }
  .topcat-card { padding:.75rem .8rem .75rem 3rem; }
  .topcat-card .topcat-icon { font-size:2rem; top:12px; left:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card, .topcat-card { transition:none; }
}


/* Modal refinements */
.modal-content { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal-header { border-bottom: 1px solid #e9ecef; }
.modal-footer { border-top: 1px solid #e9ecef; }
.modal-title { font-weight: 600; font-size: 1.05rem; }
/* Standardize modal forms: left-aligned and bold labels */
.modal .modal-body { text-align: left; }
.modal .form-group label,
.modal label { font-weight: 700; margin-bottom: .25rem; text-align: left; }
.modal .form-check-label { font-weight: 700; text-align: left; }
.modal .form-text { font-size: .75rem; }
.modal .form-control::placeholder { color: #9aa0a6; }
.modal .alert[data-role="form-error"] { margin-bottom: .5rem; padding: .4rem .6rem; }

/* Blocks list: decouple actions from child indentation */
#blocks-tree { --actions-col: 280px; }
#blocks-tree .list-group-item { position: relative; }
#blocks-tree .list-group-item > .row-inner { position: relative; padding-right: calc(var(--actions-col) + 1rem); }
#blocks-tree .list-group-item .item-main { min-width: 0; padding-left: var(--indent, 0); padding-right: 0; }
#blocks-tree .list-group-item .row-inner .actions { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; white-space: nowrap; }
/* extra spacing for child block list under each row */
#blocks-tree .list-group.list-group-flush { margin-left: 0; }
#blocks-tree .list-group-item .actions .btn-group.btn-group-sm > .btn { padding-left: .5rem; padding-right: .5rem; }


@media (max-width: 768px) {
  /* Stack content and remove reserved right column on small screens */
  #blocks-tree { --actions-col: 100%; }
  #blocks-tree .list-group-item { padding-left: .5rem; padding-right: .5rem; }
  #blocks-tree .list-group-item > .row-inner { padding-right: 0; flex-direction: column; align-items: flex-start; width: 100%; }
  #blocks-tree .list-group-item .item-main {
    padding-right: 0;
    white-space: normal; word-break: break-word; overflow-wrap: anywhere;
    width: 100%;
  }
  #blocks-tree .list-group-item .actions {
    position: static; transform: none;
    margin-top: .35rem; justify-content: flex-start;
    width: 100%; display: flex; flex-wrap: wrap; gap: .25rem;
  }
  #blocks-tree .list-group-item .actions .btn-group { display: flex; flex-wrap: wrap; width: 100%; gap: .25rem; }
  #blocks-tree .list-group-item .actions .btn-group > .btn { flex: 1 1 48%; min-width: 96px; }
  #blocks-tree .list-group-item .actions .btn { padding: .2rem .45rem; font-size: .82rem; }
  #blocks-tree .list-group-item .item-main input[type="checkbox"] { margin-right: .4rem; }
}

/* Portrait phones: single-column actions and extra spacing */
@media (max-width: 768px) and (orientation: portrait) {
  #blocks-tree .list-group-item .item-main { margin-bottom: .3rem; }
  #blocks-tree .list-group-item .actions { gap: .35rem; }
  #blocks-tree .list-group-item .actions .btn-group { gap: .35rem; }
  #blocks-tree .list-group-item .actions .btn-group > .btn { flex: 1 1 100%; min-width: 0; }
  #blocks-tree .list-group-item .item-main .badge { display: inline-block; margin-top: .15rem; }
}

/* Very small phones: soften tree connectors and allow more wrapping */
@media (max-width: 480px) {
  #blocks-tree .list-group-item.is-child .item-main:before {
    left: calc(var(--indent, 0) - 8px);
    top: -4px; bottom: -4px; border-left-width: 1px;
  }
  #blocks-tree .list-group-item.is-child .item-main:after {
    left: calc(var(--indent, 0) - 8px);
    top: 10px; width: 8px; border-top-width: 1px;
  }
}
#blocks-tree .list-group-item.is-child { position: relative; }
#blocks-tree .list-group-item.is-child .item-main { position: relative; }
#blocks-tree .list-group-item.is-child .item-main:before {
  content: "";
  position: absolute;
  left: calc(var(--indent, 0) - 12px);
  top: -8px;
  bottom: -8px;
  width: 0;
  border-left: 1px solid #f39c12; /* orange */
}
#blocks-tree .list-group-item.is-child .item-main:after {
  content: "";
  position: absolute;
  left: calc(var(--indent, 0) - 12px);
  top: 12px;
  width: 12px;
  border-top: 1px solid #f39c12; /* orange */
}