/* ==========================================================================
   estonecrm — shared table theme

   All table styling for the app lives in this one file. It is linked from
   layouts/app.blade.php AFTER jquery.dataTables.min.css and
   buttons.dataTables.min.css, which is what lets it override the library
   defaults without needing !important on nearly everything.

   The table rules that used to sit in customStyles.css and customColors.css
   (the beige header, the tan gridlines, the 0.85rem header type) have been
   removed from those files and folded in here.

   To change the header colour, edit --tbl-head-bg below. Nothing else.
   ========================================================================== */

:root {
    --tbl-head-bg:    #1e79af;  /* same blue as .bg-primary in customColors.css */
    --tbl-head-ink:   #ffffff;
    --tbl-row-rule:   #eef0f2;  /* the horizontal separator between rows */
    --tbl-row-hover:  #f5f9fb;
    --tbl-ink:        #3f4a5a;  /* cell text */
    --tbl-link:       #007bff;
    --tbl-ctl-border: #d6dbe1;  /* search box, length menu, export buttons */
    --tbl-excel:      #5a6472;  /* the Excel export button */
    --tbl-excel-dark: #48505c;
}

/* --------------------------------------------------------------------------
   Table shell
   Separate borders (rather than collapsed) so the header can carry a radius.
   -------------------------------------------------------------------------- */

.table,
table.dataTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--tbl-ink);
}

.table-bordered,
.table.cc_table {
    border: none;
}

/* --------------------------------------------------------------------------
   Header — solid fill, white bold text, no gridlines
   -------------------------------------------------------------------------- */

.table thead th,
.table thead td,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--tbl-head-bg);
    color: var(--tbl-head-ink);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
    padding: 14px 16px;
    border: none;
    white-space: nowrap;
}

/* The coloured header is always the LAST row in thead. When a page clones the
   header to build a search row, the clone is appended and keeps the column
   titles, while the original row above it becomes the filter row. So the
   radius goes on the last row, which rounds both ends of the coloured block
   whether the table has one header row or two. */
.table thead tr:last-child th:first-child,
table.dataTable thead tr:last-child th:first-child { border-radius: 4px 0 0 4px; }

.table thead tr:last-child th:last-child,
table.dataTable thead tr:last-child th:last-child  { border-radius: 0 4px 4px 0; }

/* --------------------------------------------------------------------------
   The per-column search row

   Any header row that is not the last one is a filter row rather than a title
   row, so it drops the header colour and sits on white. A table with a single
   header row is untouched, because that row is also its last row.
   -------------------------------------------------------------------------- */

.table thead tr:not(:last-child) th,
.table thead tr:not(:last-child) td,
table.dataTable thead tr:not(:last-child) th,
table.dataTable thead tr:not(:last-child) td {
    background: #ffffff;
    padding: 10px 12px;
    border: none;
    border-radius: 0;
}

/* No sort chevrons on a filter row — it carries inputs, not column titles. */
table.dataTable thead tr:not(:last-child) th:before,
table.dataTable thead tr:not(:last-child) th:after {
    content: none;
}

/* --------------------------------------------------------------------------
   Body — horizontal rules only, no vertical gridlines
   -------------------------------------------------------------------------- */

.table tbody td,
table.dataTable tbody td,
.table tbody th,
table.dataTable tbody th {
    background: #ffffff;
    color: var(--tbl-ink);
    font-size: 0.85rem;
    padding: 15px 16px;
    border: none;
    border-bottom: 1px solid var(--tbl-row-rule);
    vertical-align: middle;
}

.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background: var(--tbl-row-hover);
}

.table a,
table.dataTable tbody a {
    color: var(--tbl-link);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.table a:hover,
table.dataTable tbody a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sort indicators

   DataTables ships these as near-black PNG sprites, which disappear against
   a coloured header, so they are redrawn as stacked white chevrons — the
   same treatment the DataTables Bootstrap 4 build uses.
   -------------------------------------------------------------------------- */

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-image: none;
    cursor: pointer;
    position: relative;
    padding-right: 30px;
}

/* The resting pair — a column that can be sorted but is not the one being
   sorted on. At 7px and 55% opacity these were white-on-blue to the point of
   invisibility, so a table looked as though only its sorted column offered
   the control. Big enough and solid enough to see now, while still quieter
   than the arrow on the active column below. */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
    content: "\25B2";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px;
    font-size: 8px;
    color: var(--tbl-head-ink);
    opacity: 0.85;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    content: "\25BC";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: 1px;
    font-size: 8px;
    color: var(--tbl-head-ink);
    opacity: 0.85;
}

table.dataTable thead th.sorting_asc:before  { opacity: 1; }
table.dataTable thead th.sorting_asc:after   { opacity: 0.3; }
table.dataTable thead th.sorting_desc:before { opacity: 0.3; }
table.dataTable thead th.sorting_desc:after  { opacity: 1; }

/* --------------------------------------------------------------------------
   Per-column search inputs

   These sit in the white filter row above the coloured header. They keep no
   background of their own — just an outline — so the row shows through.
   -------------------------------------------------------------------------- */

/* The search box fills its column, and the column is sized by its content.

   An <input> carries an intrinsic preferred width from its default size
   attribute, roughly 20 characters. In an auto-layout table that becomes a
   floor for the whole column, and since every column holds an identical
   input, every column inherited the same floor — which is why the boxes all
   came out the same width regardless of the data in them.

   Replacing that with an explicit 70px floor keeps the widths content-driven
   (Client Name and Source Of Enquiry get real room, Priority stays compact)
   while guaranteeing every box is still wide enough to read "Search".

   box-sizing keeps the padding and border inside the 100%, so the box fills
   its column exactly instead of spilling past it. */
table.dataTable thead th input[type="text"] {
    width: 100%;
    min-width: 70px;
    box-sizing: border-box;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--tbl-ink);
    background: transparent;
    border: 1px solid var(--tbl-ctl-border);
    border-radius: 3px;
}

table.dataTable thead th input[type="text"]::placeholder {
    color: #9aa3b2;
    font-weight: 400;
}

table.dataTable thead th input[type="text"]:focus {
    outline: none;
    border-color: var(--tbl-head-bg);
}

/* The search row is not a sortable column header, so it takes no chevrons. */
table.dataTable thead tr:first-child th.sorting:before,
table.dataTable thead tr:first-child th.sorting:after {
    content: none;
}

/* --------------------------------------------------------------------------
   Length menu, search box and info line
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 0.85rem;
    padding-bottom: 16px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--tbl-ctl-border);
    border-radius: 4px;
    padding: 5px 10px;
    background: #ffffff;
    color: var(--tbl-ink);
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 8px;
    min-width: 220px;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--tbl-head-bg);
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.85rem;
    color: #6b7684;
    padding-top: 18px;
}

/* --------------------------------------------------------------------------
   Export buttons

   .dt-buttons / .dt-button are the classes the Buttons extension emits.
   buttons.dataTables.min.css gives them a grey gradient; this flattens them.
   -------------------------------------------------------------------------- */

.dt-buttons {
    display: inline-flex;
    gap: 6px;
    margin-left: 10px;
    vertical-align: middle;
}

button.dt-button,
div.dt-button,
a.dt-button {
    background: #ffffff;
    background-image: none;
    color: #4a5568;
    border: 1px solid var(--tbl-ctl-border);
    border-radius: 4px;
    padding: 5px 14px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

button.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover {
    background: #f4f6f9;
    background-image: none;
    border-color: #b9c1cb;
    color: #2d3748;
}

/* The Excel export is the one export button in the app, and a plain white
   button gave no clue it was an action at all. A solid grey fill separates
   it from the length menu and search box it sits beside without adding
   another accent colour to the page. The extra class beats the generic
   .dt-button rules above without needing !important. */

button.dt-button.buttons-excel,
div.dt-button.buttons-excel,
a.dt-button.buttons-excel {
    background: var(--tbl-excel);
    background-image: none;
    color: #ffffff;
    border-color: var(--tbl-excel);
}

button.dt-button.buttons-excel:hover,
div.dt-button.buttons-excel:hover,
a.dt-button.buttons-excel:hover {
    background: var(--tbl-excel-dark);
    background-image: none;
    color: #ffffff;
    border-color: var(--tbl-excel-dark);
}

button.dt-button.buttons-excel:focus,
div.dt-button.buttons-excel:focus,
a.dt-button.buttons-excel:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(90, 100, 114, 0.35);
}

/* --------------------------------------------------------------------------
   Pagination

   DataTables sets colour with !important on these, so the overrides have to
   match it. The result reads as a Bootstrap pagination group without needing
   the Bootstrap 4 integration build.
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    padding: 6px 11px;
    margin: 0 0 0 -1px;
    font-size: 0.85rem;
    color: #4a5568 !important;
    background: #ffffff;
    border: 1px solid #dfe3e9;
    border-radius: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:first-child {
    border-radius: 4px 0 0 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
    border-radius: 0 4px 4px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f4f6f9;
    background-image: none;
    border: 1px solid #dfe3e9;
    color: #2d3748 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #f4f6f9;
    background-image: none;
    border: 1px solid #dfe3e9;
    color: #2d3748 !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #ffffff;
    background-image: none;
    border: 1px solid #dfe3e9;
    color: #b3bac3 !important;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Card wrapper the tables sit in
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Breathing room down the left and right of the table.

   customStyles.css:193 sets .card-body to a flat 10px, which leaves the
   table almost touching the card border. Widening the horizontal padding
   insets the whole DataTables block together — length menu, search box,
   the table itself, the info line and the pagination — rather than just
   the table, which would leave the controls hanging off the edge.

   The padding sits outside .table-responsive, so it stays visible on a
   wide table that scrolls sideways. */
.card-body {
    padding: 16px 24px;
}

@media (max-width: 767px) {
    .card-body {
        padding: 12px;
    }
}

/* --------------------------------------------------------------------------
   Small screens

   customStyles.css forces 9px 27px padding and a black header rule inside a
   360-767px media query; neutralised here so the theme holds on mobile too.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 360px) and (max-width: 767px) {
    table.dataTable thead th,
    table.dataTable thead td {
        padding: 12px 14px !important;
        border-bottom: none !important;
    }
}