/* =====================================================
   GLOBAL ADMIN DARK THEME
===================================================== */
:root {
  --main-background: #06141F;
  --primary-blue: #2563EB;
  --accent-glow: #43A8DE;
  --sidebar: #091A27;
  --hover-highlight: #38BDF8;
  --panel: rgba(9, 26, 39, 0.95);
  --panel-soft: rgba(9, 26, 39, 0.85);
  --surface: #0F2B3A;
  --border-soft: rgba(67, 168, 222, 0.45);
}

body {
  background:
    radial-gradient(circle at top left, rgba(67, 168, 222, 0.16), transparent 25%),
    radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.15), transparent 30%),
    linear-gradient(135deg, var(--main-background), var(--sidebar), var(--main-background));
  color: #e6f2f8;
}

/* =====================================================
   HEADER
===================================================== */
#header {
  background: var(--sidebar);
  border-bottom: 1px solid var(--accent-glow);
  box-shadow: 0 0 24px rgba(67, 168, 222, 0.18);
}

/* =====================================================
   CONTENT WRAPPER
===================================================== */
#content {
  background: transparent;
}

/* =====================================================
   CARDS / MODULES
===================================================== */
.module,
.inline-group {
  background: var(--panel);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border-soft);
}

/* =====================================================
   INPUTS
===================================================== */
input,
select,
textarea {
  background: var(--surface);
  color: #ffffff;
  border: 1px solid rgba(67, 168, 222, 0.35);
  border-radius: 8px;
  padding: 8px;
}

/* =====================================================
   BUTTONS
===================================================== */
.button,
input[type="submit"],
.default {
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-glow));
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px 16px;
  box-shadow: 0 0 18px rgba(67, 168, 222, 0.25);
}

/* =====================================================
   LINKS
===================================================== */
a {
  color: var(--hover-highlight);
}

/* =====================================================
   FILTER SIDEBAR
===================================================== */
#changelist-filter {
  background: var(--sidebar);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--border-soft);
}

/* =====================================================
   BREADCRUMBS
===================================================== */
.breadcrumbs {
  background: transparent;
  color: #9ec3d8;
}

/* =====================================================
   FOOTER
===================================================== */
#footer {
  background: transparent;
}

/* =====================================================
   GLOBAL TABLE STYLING (CLEANED)
===================================================== */
table {
  color: #e6f2f8;
}

table thead th {
  color: #cfe7f5;
  background: var(--surface);
  border-bottom: 1px solid var(--accent-glow);
}

table tbody td {
  color: #e6f2f8;
}

/* Zebra rows */
table tbody tr:nth-child(odd) {
  background-color: var(--panel-soft);
}

table tbody tr:nth-child(even) {
  background-color: rgba(15, 43, 58, 0.85);
}

/* Hover */
table tbody tr:hover {
  background-color: rgba(56, 189, 248, 0.18);
}

/* Selected */
table tbody tr.selected {
  background-color: rgba(37, 99, 235, 0.28);
}

/* Borders */
table td,
table th {
  border-color: rgba(67, 168, 222, 0.25);
}

/* Links in tables */
table a {
  color: var(--hover-highlight);
}

/* =====================================================
   ADMIN APP LIST (FIX OVERLAPPING TEXT)
===================================================== */

/* Apply to all admin app sections */
.app-payroll table,
.app-auth table,
.app-contenttypes table,
.app-admin table {
  width: 100%;
  table-layout: fixed;
}

/* Model name column */
.app-payroll table th {
  width: 60%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  vertical-align: top;
  line-height: 1.35;
  padding-right: 10px;
}

/* Action columns */
.app-payroll table td {
  width: 20%;
  white-space: nowrap;
  vertical-align: top;
}

/* Model link behavior */
.app-payroll table th a {
  display: inline-block;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.35;
}

/* Action links */
.app-payroll table td a {
  white-space: nowrap;
}

/* Better spacing */
.app-payroll tr th,
.app-payroll tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Optional: improve Payroll Management wrapping */
.app-payroll tr.model-payrollmanagement th a {
  max-width: 130px;
}

/* =====================================================
   LEFT SIDEBAR WIDTH FIX
===================================================== */

/* Make left admin navigation wider */
#nav-sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border-soft);
  width: 280px !important;
  min-width: 280px !important;
}

/* App list table inside sidebar */
#nav-sidebar .app-payroll table {
  width: 100%;
  table-layout: fixed;
}

/* Model name column */
#nav-sidebar .app-payroll table th {
  width: 70%;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: top;
  line-height: 1.35;
  padding-right: 8px;
}

/* Action columns */
#nav-sidebar .app-payroll table td {
  width: 15%;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

/* Links in first column */
#nav-sidebar .app-payroll table th a {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  line-height: 1.35;
}

#nav-sidebar .app-payroll tr.model-dailywageattendance th a,
#nav-sidebar .app-payroll tr.model-employeepaymentadjustment th a,
#nav-sidebar .app-payroll tr.model-payrollmanagement th a,
#nav-sidebar .app-payroll tr.model-paycomponent th a,
#nav-sidebar .app-payroll_setup tr.model-paycomponent th a,
#nav-sidebar .app-payroll_setup tr.model-loanproduct th a,
#nav-sidebar .app-payroll_setup tr.model-employeecomponent th a,
#nav-sidebar .app-payroll_setup tr.model-employeeloan th a {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#nav-sidebar .app-payroll tr.model-dailywageattendance .sidebar-link-line,
#nav-sidebar .app-payroll tr.model-employeepaymentadjustment .sidebar-link-line,
#nav-sidebar .app-payroll tr.model-payrollmanagement .sidebar-link-line,
#nav-sidebar .app-payroll tr.model-paycomponent .sidebar-link-line,
#nav-sidebar .app-payroll_setup tr.model-paycomponent .sidebar-link-line,
#nav-sidebar .app-payroll_setup tr.model-loanproduct .sidebar-link-line,
#nav-sidebar .app-payroll_setup tr.model-employeecomponent .sidebar-link-line,
#nav-sidebar .app-payroll_setup tr.model-employeeloan .sidebar-link-line {
  display: block;
  white-space: nowrap;
}

/* Add / Change / Open links */
#nav-sidebar .app-payroll table td a {
  white-space: nowrap;
  display: inline-block;
}

/* Optional: cleaner row spacing */
#nav-sidebar .app-payroll tr th,
#nav-sidebar .app-payroll tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}