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

body {
    font-family: Calibri, Aptos, "Segoe UI", sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.5;
    padding: 20px;
    font-size: 0.9rem;
}

h2 {
    margin-bottom: 15px;
}

a {
    color: #4a90e2;
}

a:hover {
    color: rgb(130,130,120);
    transition: background-color 0.3s ease;
}

/* Container for a spacious layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Navigation Menu */
#site_menu {
    background-color: rgb(130,130,120);
    margin-bottom: 20px;
    font-size: 1rem;
    padding: 12px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

#site_menu span {
    margin-right: 50px;
    padding: 9px 12px;
    background-color: rgb(180,180,160);
    color: rgb(230,230,225);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#site_menu a {
    font-weight: bold;
    margin-right: 15px;
    text-decoration: none;
    border-radius: 5px;
    color: rgb(220,220,200);
    padding: 9px 12px;
    transition: background-color 0.3s ease;
}

#site_menu a:hover {
    background-color: rgb(180,180,160);
    color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Active menu item */
#site_menu a.active, nav a.current {
    color: rgb(130,130,120);
    background-color: #f8f8f8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.error_msg, .success_msg {
    font-weight: bold;
    margin-bottom: 1em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 10px 15px;
}

.error_msg {
    background-color: rgb(255, 140, 110);
    
}
.success_msg {
    background-color: rgb(100, 215, 150);
}

/* Form styles */
form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: block;
}

form legend {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 20px;
    padding: 15px 20px;
    background-color: rgb(220,220,200);
    color: rgb(130,130,120);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form select,
form textarea {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    height: 2rem;
}

select[multiple]{
  height: 5em;
}

form textarea {
    height: 4rem;
}

form input[type="submit"],
form button {
    background-color: rgb(130,130,120);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

form input[type="submit"]:hover,
form button:hover {
    background-color: rgb(170,170,150);
}

fieldset {
    border: none;
    display: block;
    margin-top: 15px;
}

#btn_bulk_insert {
    margin-left: 15px;
}

#open_form {
    display: inline-block;
    padding: 9px 12px;
    border-radius: 4px;
    text-decoration: none;
    background-color: rgb(130,180,120);
    color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

#open_form:hover {
    color: rgb(255,255,255);
    background-color: rgb(70,120,70);
}

#form_field {
    display: none;
}

/* Table styles */
table, td {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border-style: solid;
    font-size: 0.8rem;
    border-width: 1px;
}

td {
    border-collapse: collapse;
    border-width: 0.5px;
    border-style: solid;
}

.docuTable, .dataTable {
    width: 100%;
}

table thead {
    background-color: rgb(130,130,120);
    color: rgb(255,255,255);
}

table thead th {
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

table tbody tr:nth-child(even) {
    background-color: rgb(230,230,225);
}

table tbody tr:nth-child(odd) {
    background-color: #fff;
}

table tbody td {
    padding: 12px;
    overflow-wrap: break-word;
}

table tbody tr.error_row {
    background-color: rgb(255, 140, 110);
}

.docuTable, .dataTable {
    table-layout: fixed;
    width: 100%;
}

.col_id {
    width: 6%;
}

.col_title {
    width: 18%;
}

.col_descr {
    width: 25%;
}

/* DataTables override for search inputs in table headers */
table.dataTable thead.filters input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dataTables_length, .dataTables_filter {
    margin-bottom: 5px;
}

td .source_url_line {
    border-top: dashed 1px rgb(0,0,0);
    margin-top: 12px;
    margin-bottom: 3px;
    display: block;
}

td .source_url {
    display: block;
    overflow-wrap: anywhere;
    padding: 3px 5px;
    border-radius: 4px;
    margin: 2px 0px 3px 0px;
    text-decoration: none;
    background-color: rgb(130,180,120);
    color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

td .copy-btn {
    display: inline-block;
    padding: 3px 20px;
    border-radius: 4px;
    margin: 5px 0 10px 0;
    text-decoration: none;
    background-color: rgb(130,180,120);
    color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

td .btn_delete, td .btn_edit {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 4px;
    margin: 3px;
    text-decoration: none;
    background-color: rgb(130,180,120);
    color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

td .source_url:hover, td .btn_edit:hover {
    color: rgb(255,255,255);
    background-color: rgb(70,120,70);
}

td .btn_delete {
    background-color: rgb(160,110,100);
}

td .btn_delete:hover {
    background-color: rgb(100,50,50);
}

.doc_relev_1 {
    background-color: rgb(150,200,200);
}

.doc_relev_2 {
    background-color: rgb(200,230,230);
}

.doc_codstatus_1 {
    background-color: rgb(240,175,175);
}

.doc_codstatus_2 {
    background-color: rgb(240,240,155);
}

.doc_codstatus_3 {
    background-color: rgb(160,210,150);
}

.doc_codstatus_4 {
    background-color: rgb(205,205,200);
}

.docu_id, .docu_title {
    padding: 10px 15px;
    display: block;
    float: left;
}

.docu_id {
    width: 100%;
}

.docu_title {
  display: none;
}

.docu_id:hover + .docu_title {
  display: block; /* or block if you want it to behave as a block element */
  position: absolute;
  left: 6%;
  z-index: 999;
  width: 20%;
  background-color: rgb(240,240,155);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  border-radius: 5px;
  padding: 15px 15px;
}

.dt-paging {
    margin-top: 8px;
    margin-bottom: 30px;
    padding: 8px;
    background-color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.dt-input {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    height: 2rem;
}

.dt-info {
    padding: 12px;
    margin-bottom: 17px;
}

.dt-layout-start, .dt-layout-end {
    display: block;
    margin-bottom: 10px;
    
}

.dt-layout-start label {
    margin-left: 7px;
}

.dt-layout-end label {
    margin-right: 7px;
}

.dt-layout-start {
    float:left;
    width: 40%;
}

.dt-layout-end {
    float:right;
    width: 60%;
}

.dt-search {
    float: right;
}

/* Highlight any column‐search input that is not empty */
.dt-search-highlight {
  background-color: rgb(160, 250, 200);
  border: none;
  padding: 3px;
}

.dt-paging nav button {
    padding: 12px;
    margin-right: 3px;
}

.dt-paging nav span {
    padding: 12px;
    margin-right: 3px;
}

/* Spacing utility */
.mt-20 {
    margin-top: 20px;
}