/* =============================================================================
   CORE THEME (PrintVel light) — повний CSS з нуля
   Шрифти, кольори, хедер, меню, картки, таблиці, DataTables, форми, A4
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Cairo:wght@600;700&display=swap');

/* ---------- Палитра ---------- */
:root{
  --brand:#9a1915;           /* червоний шапки/акцентів */
  --brand-600:#7f1411;
  --ink:#222;                /* основний текст */
  --muted:#6b7280;           /* другорядний текст */
  --bg:#f5f6f8;              /* фон сторінки */
  --card:#ffffff;            /* фон карток/контенту */
  --brd:#e5e7eb;            /* бордер/дівайдер */
  --focus:rgba(0,123,255,.2);

  --primary:#007bff;
  --success:#2e7d32;
  --danger:#d32f2f;
  --warning:#f59e0b;
}

/* ---------- База ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Cairo', sans-serif; margin:0 0 .6rem}

/* ---------- Layout контейнер ---------- */
.main{
  width: min(100%, 95%);
  margin: 16px auto 24px;
  padding: 0 8px;
}

/* ---------- Хедер/меню ---------- */
.header{
  display:flex; align-items:center; gap:16px;
  background:var(--brand);
  color:#fff;
  padding:10px 12px;
  margin:0 0 16px;
}
.logo img{height:38px}
.menu-toggle{
  margin-left:auto;
  display:none;
  font-size:28px;
  line-height:1;
  background:none; border:0; color:#fff; cursor:pointer;
}
h1,h2{color:#111}

#supplier-details, #payer-details p{
    font-size: 0.65em;
    margin: 30px 0px;
}


/* Навігація */
.nav-menu{margin-left:auto}
.nav-menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:2px;
}
.nav-menu li{position:relative}
.nav-menu > ul > li > a{
  display:block; padding:10px 12px; border-radius:6px;
  color:#fff; transition:.2s;
}
.nav-menu > ul > li:hover > a{
  background:#fff; color:var(--brand); text-decoration:none;
}

/* Підменю */
.nav-menu .submenu{
  position:absolute; inset:calc(100% - 3px) auto auto 0;
  min-width:190px;
  background:#fff; color:var(--ink);
  border:1px solid var(--brd); border-radius:10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding:6px; display:none; z-index:50;
}
.nav-menu li:hover > .submenu{display:block}
.nav-menu .submenu li a{
  display:block; padding:10px 10px; border-radius:8px; color:#333;
}
.nav-menu .submenu li a:hover{background:#f3f4f6; color:var(--brand)}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  background:#f3f4f6; color:#111; cursor:pointer; transition:.2s; font-weight:600;
}
.btn:hover{filter:brightness(.98)}
.btn:focus{outline:none; box-shadow:0 0 0 3px var(--focus)}

.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn-primary:hover{filter:brightness(.95)}
.btn-success{background:var(--success); color:#fff; border-color:var(--success)}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-warning{background:var(--warning); color:#111; border-color:var(--warning)}
.btn-ghost{background:#fff; border-color:var(--brd); color:#111}
.btn-ghost:hover{background:#f9fafb}

/* Сумісність зі старими селекторами */
button[type="button"]{ @apply: none; }
button[type="button"]{ height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--brd); background:#fff; color:#111; cursor:pointer; transition:.2s; }
button[type="button"]:hover{ background:#f3f4f6 }
.btn-delete{ background:var(--danger); color:#fff; border-color:var(--danger) }
.btn-delete[disabled]{ background:#c7c7c7; color:#666; cursor:not-allowed }

/* ---------- Карти/секції ---------- */
.card{
  background:var(--card);
  border:1px solid var(--brd);
  border-radius:18px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:18px;
}

/* ---------- Форми ---------- */
label{display:block; font-weight:600; margin:0 0 6px; color:#222}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
input[type="date"],input[type="password"],select,textarea{
  width:100%;     min-height: 20px;
    padding: 5px;
  border:1px solid var(--brd); border-radius:10px; background:#fff; color:#111;
}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--focus)}

/* Компактна форма компаній (збережено існуючу структуру) */
#company-form{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; margin:16px 0 28px;
}
#company-form label, #company-form input{width:auto; min-width:210px}
#company-form input{min-height:40px}

/* ---------- Таблиці (універсально + під DataTables) ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden}
thead th{
  background:#fff; color:#111; text-align:left; font-weight:700;
  border-bottom:1px solid var(--brd);
  padding:12px 10px;
}
tbody td{
  padding:10px; border-bottom:1px solid var(--brd); color:#333;
}
tbody tr:nth-child(even){background:#fafafa}
tbody tr:hover{background:#f5f7ff}

/* Вузькі колонки, які не повинні ламатися */
th, td{white-space:nowrap}
@media (max-width: 1180px){
  /* Довгі колонки дозволяємо переносити (адреси, коментарі тощо): підбери індекси під свої таблиці */
  td:nth-child(3), td:nth-child(4), td:nth-child(8), td:nth-child(11){white-space:normal}
}

/* Специфічні ID-таблиці (залишив підтримку) */
#invoice-list-table, #expenditure-list-table, #act-list-table{table-layout:auto}
#invoice-list-table th, #expenditure-list-table th, #act-list-table th{background:#fff}
#invoice-list-table tr:nth-child(even), #expenditure-list-table tr:nth-child(even), #act-list-table tr:nth-child(even){background:#fafafa}

/* Дії в таблицях */
.actions{display:flex; gap:8px; align-items:center; justify-content:center}

/* ---------- DataTables ---------- */
.dataTables_wrapper{font-size:14px; color:#333; margin-top:10px}
.dataTables_length label, .dataTables_filter label{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.dataTables_length select, .dataTables_filter input{
  padding:6px 8px; border:1px solid var(--brd); border-radius:8px; min-height:38px;
}
.dataTables_info{margin-top:8px; font-size:13px; color:#555}
.dataTables_paginate{margin-top:10px; display:flex; justify-content:flex-end; align-items:center; gap:6px}
.dataTables_paginate a{
  padding:6px 10px; border:1px solid var(--brd); border-radius:8px; background:#fff; color:var(--primary); text-decoration:none; transition:.2s;
}
.dataTables_paginate a:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.dataTables_paginate .current{background:var(--primary); color:#fff; border-color:var(--primary)}

/* ---------- A4-контейнер (десктоп прев’ю + моб. адаптація) ---------- */
.a4-container{
  width: 825px; height: 1150px;
  margin: 15px auto; padding: 20px;
  background:#fff; border:1px solid var(--brd); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:auto; position:relative;
}
.a4-container .expenditure-section,
.a4-container .act-section{position:absolute; padding:5px}

/* ---------- Утиліти ---------- */
.hidden{display:none}

/* =============================================================================
   АДАПТИВ
   ========================================================================== */

/* ≤ 992px — дві колонки / компактні падінги */
@media (max-width: 992px){
  .main{width: min(1200px, 98vw)}
  .card{padding:16px}
}

/* ≤ 768px — мобільне меню, фул-від контент, таблиці скроляться всередині */
@media (max-width: 768px){
  /* меню */
  .menu-toggle{display:block}
  .nav-menu{width:100%}
  .nav-menu ul{display:none; flex-direction:column; gap:0; background:var(--brand); border-radius:10px; margin-top:8px}
  .nav-menu ul.active{display:flex}
  .nav-menu > ul > li > a{border-radius:0; padding:12px 14px}
  .nav-menu > ul > li:hover > a{background:rgba(255,255,255,.12); color:#fff}
  .nav-menu .submenu{position:static; display:none; box-shadow:none; border-radius:0; border:0; padding:0; background:#fff}
  .nav-menu .submenu.active{display:block}
  .nav-menu .submenu li a{color:#333}

  /* контент */
  .main{padding:0 10px}

  /* таблиці — горизонтальний скрол всередині блоку, не у всій сторінці */
  .table-wrap, .invoice-list-container, .expenditure-list-container, .act-list-container{
    overflow-x:auto; background:#fff; border:1px solid var(--brd); border-radius:10px; padding:6px;
  }
  #invoice-list-table, #expenditure-list-table, #act-list-table{min-width:720px}

  /* DataTables */
  .dataTables_length, .dataTables_filter{flex-wrap:wrap}
  .dataTables_filter input{width:100%}

  /* A4: перетворюємо в звичайний блок без абсолютів */
  .a4-container{
    width:100%; height:auto; padding:14px;
    border:0; border-radius:14px; box-shadow:none; overflow:visible;
  }
  .a4-container .expenditure-section, .a4-container .act-section{
    position:static !important; width:100% !important; height:auto !important; background:#fff; border:1px solid var(--brd); border-radius:10px; padding:12px !important; margin:10px 0 !important;
  }
  .a4-container form > div:last-child{position:static !important; margin:16px 0 !important}

  /* поля */
  .a4-container input, .a4-container select, .a4-container textarea{min-height:44px}
  .a4-container label{margin-bottom:6px}

  /* кнопки */
  .btn, button[type="button"]{width:100%}
}

/* ≤ 420px — дрібні доведення */
@media (max-width: 420px){
  .logo img{height:32px}
  .btn, button[type="button"]{height:42px}
  .dataTables_paginate{justify-content:center}
  #invoice-list-table, #expenditure-list-table, #act-list-table{min-width:680px}
}

/* =============================================================================
   КОМПОНЕНТИ СПИСКІВ (контейнери інвойсів/видаткових/актів)
   ========================================================================== */

.invoice-list-container, .expenditure-list-container, .act-list-container{
  margin: 16px 0 26px;
  padding: 16px;
  background:#fff; border:1px solid var(--brd); border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

/* Завантажити / Видалити — кнопки */
.invoice-list-container .btn-download,
.expenditure-list-container .btn-download,
.act-list-container .btn-download{ background:var(--success); color:#fff; border-color:var(--success) }
.invoice-list-container .btn-download:hover,
.expenditure-list-container .btn-download:hover,
.act-list-container .btn-download:hover{ filter:brightness(.95) }

.invoice-list-container .btn-delete,
.expenditure-list-container .btn-delete,
.act-list-container .btn-delete{ background:var(--danger); color:#fff; border-color:var(--danger) }
.invoice-list-container .btn-delete:hover,
.expenditure-list-container .btn-delete:hover,
.act-list-container .btn-delete:hover{ filter:brightness(.95) }

/* =============================================================================
   СУМІСНІСТЬ зі старими селекторами (мінімум змін у PHP/HTML)
   ========================================================================== */

#company2-name p, #company1-name p{margin:0}
table th, table td{vertical-align:middle}