/* ============================================================================
   Tema CRM - aspect dens si plat, de aplicatie de gestiune.
   Incarcata global din layouts/app.blade.php, DUPA bundle-ul Vite (altfel tema
   Soft UI ar câștiga la specificitate egala), si delimitata de clasa
   `.crm-theme` de pe <body>: scoaterea acelei singure clase readuce aspectul
   dinainte, fara sa fie nevoie de vreo alta modificare.

   Paleta si denumirile sunt ale noastre. Direcția (densitate mare, borduri de
   1px, colturi aproape drepte, antet de tabel colorat) e ceea ce face un
   program de contabilitate sa arate ca un program de contabilitate; nu e
   preluat cod, foi de stil sau nume de clase din niciun produs terț.

   Nu se atinge nimic care sa poata rupe aranjarea in pagina: doar culori,
   borduri, raze, dimensiuni de font si spatiere interioara. Fara display,
   fara position, fara latimi.
   ========================================================================= */

.crm-theme {
    --crm-accent: #12667f;          /* accent: albastru-petrol */
    --crm-accent-soft: #eaf1f6;
    --crm-ink: #333a45;             /* text tare / crom inchis */
    --crm-muted: #6f7684;
    --crm-line: #d5dbe4;            /* bordura de control */
    --crm-line-soft: #e7ecf3;
    --crm-head: #eef2f8;            /* antet de tabel */
    --crm-row: #f4f8fc;             /* rand sub cursor */
    --crm-edit: #e8850c;            /* rand in editare */
    --crm-radius: 3px;

    /* Text mai mic si rânduri mai scunde, ca intr-un program de gestiune.
       Se merge pe variabilele Bootstrap-ului, nu pe `html { font-size }`:
       aceea ar scala si fiecare padding, margine si latime scrisa in rem,
       inclusiv bara laterala, si ar muta aranjarea in pagina. Asa se schimba
       doar textul si spatierea pe care le cerem. */
    --bs-body-font-size: .8125rem;   /* 13px, de la 16px */
    --bs-body-line-height: 1.4;
}

/* ------------------------------------------------------------ densitate text */
.crm-theme .form-control,
.crm-theme .form-select { font-size: .8rem; padding: .25rem .5rem; min-height: 31px; }
.crm-theme textarea.form-control { min-height: 0; }
.crm-theme .btn {
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .65rem;
}
.crm-theme .form-label,
.crm-theme .form-check-label { font-size: .78rem; margin-bottom: .15rem; }

/* --------------------------------------------------- rânduri de tabel scunde
   Tema aducea .75rem/1.5rem pe antet si .5rem pe celule, adica un rand de
   ~48px. Cu valorile de mai jos rândul intra in ~30px, deci pe ecran incap de
   o data si jumatate mai multe linii. */
.crm-theme .table { font-size: .78rem; }
.crm-theme .table thead th { padding: .4rem .6rem !important; }
.crm-theme .table > :not(caption) > * > * { padding: .3rem .6rem; }
.crm-theme .table td,
.crm-theme .table th { line-height: 1.3; vertical-align: middle; }
/* controalele din interiorul unui tabel sunt si mai strânse */
.crm-theme .table .form-control,
.crm-theme .table .form-select { font-size: .76rem; padding: .15rem .4rem; min-height: 27px; }
.crm-theme .table .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .74rem; }

/* ------------------------------------------------------------------ tipografie */
.crm-theme h1, .crm-theme h2, .crm-theme h3,
.crm-theme h4, .crm-theme h5, .crm-theme h6 { color: var(--crm-ink); letter-spacing: .01em; }
.crm-theme h4 { font-size: 1.05rem; font-weight: 600; }
.crm-theme h5 { font-size: .95rem; font-weight: 600; }

/* ----------------------------------------------------------------------- carduri */
/* plate: aplicatiile de gestiune nu folosesc umbre, iar umbra pe fiecare card
   face pagina sa para de doua ori mai lunga decât e */
.crm-theme .card {
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    box-shadow: none;
}
.crm-theme .card-header { background: #fff; border-bottom: 1px solid var(--crm-line-soft); }

/* ------------------------------------------------------------------------ tabele */
.crm-theme .table > thead > tr > th {
    background: var(--crm-head);
    color: var(--crm-accent);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--crm-line);
    vertical-align: middle;
}
.crm-theme .table > tbody > tr > td { border-bottom: 1px solid var(--crm-line-soft); }
.crm-theme .table > tbody > tr:hover { background: var(--crm-row); }
/* rândul in care se scrie chiar acum */
.crm-theme .table > tbody > tr:focus-within { background: #fff8ef; box-shadow: inset 3px 0 0 var(--crm-edit); }

/* --------------------------------------------------------------------- controale */
.crm-theme .form-control,
.crm-theme .form-select {
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    color: var(--crm-ink);
}
.crm-theme .form-control:focus,
.crm-theme .form-select:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 1px rgba(18, 102, 127, .25);
}
/* doar etichetele de formular, nu orice <label>: un `label` global stingea si
   textele din alte componente */
.crm-theme .form-label,
.crm-theme .form-check-label { color: var(--crm-muted); font-weight: 600; }
.crm-theme .form-text { color: var(--crm-muted); }

/* select2 e folosit ad-hoc in proiect, deci se aliniaza la aceleasi borduri */
.crm-theme .select2-container--default .select2-selection--single,
.crm-theme .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--crm-line) !important;
    border-radius: var(--crm-radius) !important;
}
.crm-theme .select2-container--default.select2-container--focus .select2-selection--multiple,
.crm-theme .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--crm-accent) !important;
}
.crm-theme .select2-results__option--highlighted[aria-selected] { background: var(--crm-accent) !important; }

/* --------------------------------------------------------------------- butoane */
/* Butoanele se ating NUMAI prin variabilele Bootstrap-ului (--bs-btn-*), nu
   prin proprietati directe. Motivul e o regresie reala: o regula scrisa direct
   pe `color` bate pe cea a componentei si ii fura culoarea textului, iar la
   :hover specificitatile ajung egale si câștiga ultima din fisier - de unde
   butoane palide si text invizibil. Cu variabile, fiecare varianta
   (btn-success, btn-danger, cele outline) isi pastreaza culorile ei. */
.crm-theme .btn { border-radius: var(--crm-radius); font-weight: 600; }
.crm-theme .btn-sm { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .55rem; }

.crm-theme .btn-primary {
    --bs-btn-bg: var(--crm-accent);
    --bs-btn-border-color: var(--crm-accent);
    --bs-btn-hover-bg: #0f5568;
    --bs-btn-hover-border-color: #0f5568;
    --bs-btn-active-bg: #0f5568;
    --bs-btn-active-border-color: #0f5568;
}

.crm-theme .btn-outline-primary {
    --bs-btn-color: var(--crm-accent);
    --bs-btn-border-color: var(--crm-accent);
    --bs-btn-hover-bg: var(--crm-accent);
    --bs-btn-hover-border-color: var(--crm-accent);
    --bs-btn-active-bg: var(--crm-accent);
    --bs-btn-active-border-color: var(--crm-accent);
}

/* ---------------------------------------------------------------------- diverse */
.crm-theme .badge { border-radius: var(--crm-radius); font-weight: 600; }
.crm-theme .nav-tabs .nav-link.active { color: var(--crm-accent); border-bottom-color: var(--crm-accent); }
.crm-theme .page-link { color: var(--crm-accent); border-radius: var(--crm-radius); }
.crm-theme .page-item.active .page-link { background-color: var(--crm-accent); border-color: var(--crm-accent); }
.crm-theme .alert { border-radius: var(--crm-radius); }
.crm-theme .modal-content { border-radius: var(--crm-radius); }
.crm-theme .modal-header { background: var(--crm-accent-soft); border-bottom: 1px solid var(--crm-line); }
/* Linkurile obisnuite iau accentul, dar NU cele care sunt in fapt componente:
   butoane, elemente de meniu, de paginare sau badge-uri isi duc singure
   culoarea. Prima versiune recolora orice <a> si apoi incerca sa repare
   butoanele cu `color: inherit` - ceea ce le lasa textul sa ia culoarea
   pariniului, deci invizibil pe un buton colorat. */
.crm-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not([class*="badge-"]) {
    color: var(--crm-accent);
}

/* ------------------------------------------------- antetul unui document
   Cardul cu seria, numarul, data, gestiunea si partenerul. Etichetele mici cu
   majuscule si controalele scunde incap pe doua rânduri in loc de patru, ceea
   ce conteaza pe o pagina care are si un tabel de linii dedesubt.
   Se activeaza prin clasa `doc-head` pe cardul respectiv. */
.crm-theme .doc-head { background: #fbfcfe !important; border-radius: var(--crm-radius) !important; box-shadow: none !important; }
.crm-theme .doc-head .form-label {
    font-size: .69rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--crm-muted); font-weight: 600; margin-bottom: .1rem;
}
.crm-theme .doc-head .form-control,
.crm-theme .doc-head .form-select { font-size: .8rem; padding: .2rem .5rem; min-height: 0; height: 30px; }
.crm-theme .doc-head .select2-container--default .select2-selection--single { min-height: 30px; }
.crm-theme .doc-head .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px; font-size: .8rem;
}

/* ------------------------------------------------- listele de documente
   Randurile din /invoices/client si /invoices/supplier aveau celule cu doua
   sau trei elemente de tip bloc unul sub altul (tip + data, valoare + curs,
   nume + email), fiecare cu marginile lui - de aici inaltimea. Nu se scoate
   nicio informatie: se strang liniile si se anuleaza marginile dintre ele.

   Numele partenerului se scrie de la stanga: e text, nu o cifra. In lista de
   ieșiri era centrat de un `justify-content-center`, scos acum din Blade. */
.crm-theme .crm-doc-list > tbody > tr > td { line-height: 1.2; }
.crm-theme .crm-doc-list > tbody > tr > td > div,
.crm-theme .crm-doc-list > tbody > tr > td > p,
.crm-theme .crm-doc-list > tbody > tr > td > span { margin-bottom: 0; }
.crm-theme .crm-doc-list h6,
.crm-theme .crm-doc-list p { margin-bottom: 0; line-height: 1.2; }
.crm-theme .crm-doc-list .btn-icon { padding: .2rem .35rem; }