/* =========================================================
   FORM ELEMENTS
========================================================= */

form{
    width:100%;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:bold;
    color:white;
    font-size:14px;
}

/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:6px;
    background:#fff;
    color:#222;
    font-size:14px;
    font-family:inherit;
    transition:.2s;
}

textarea{
    min-height:120px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#0078d4;
    box-shadow:0 0 5px rgba(0,120,212,.25);
}

input[readonly],
textarea[readonly]{
    background:#f5f5f5;
}

input:disabled,
select:disabled,
textarea:disabled{
    background:#eee;
    color:#888;
    cursor:not-allowed;
}

/* =========================================================
   PLACEHOLDERS
========================================================= */

input::placeholder,
textarea::placeholder{
    color:#999;
}

/* =========================================================
   BUTTONS
========================================================= */

button{
    cursor:pointer;
    border:none;
    border-radius:6px;
    padding:10px 18px;
    font-size:14px;
    font-weight:bold;
    transition:.2s;
}

button:hover{
    opacity:.92;
}

button:disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* =========================================================
   STANDARD BUTTON COLOURS
========================================================= */

.btn{

    background:#0078d4;
    color:#fff;
}

.btn:hover{
    background:#0066b3;
}

.btn-save{
    background:#28a745;
    color:#fff;
}

.btn-save:hover{
    background:#218838;
}

.btn-update{
    background:#0078d4;
    color:#fff;
}

.btn-update:hover{
    background:#0069c0;
}

.btn-delete{
    background:#d9534f;
    color:#fff;
}

.btn-delete:hover{
    background:#c9302c;
}

.btn-warning{
    background:#ff9800;
    color:#fff;
}

.btn-warning:hover{
    background:#f57c00;
}

.btn-secondary{
    background:#666;
    color:#fff;
}

.btn-secondary:hover{
    background:#555;
}

/* =========================================================
   BUTTON GROUPS
========================================================= */

.button-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.button-row button{
    flex:1;
}

.button-group{
    display:flex;
    gap:8px;
    align-items:center;
}

/* =========================================================
   FORM ROWS
========================================================= */

.form-row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}

.form-col{
    flex:1;
}

.form-col-2{
    flex:2;
}

.form-col-3{
    flex:3;
}

/* =========================================================
   INLINE INPUTS
========================================================= */

.inline-input{
    display:flex;
    align-items:center;
    gap:10px;
}

.inline-input label{
    margin:0;
    white-space:nowrap;
}

/* =========================================================
   SEARCH BOXES
========================================================= */

.search-box{
    max-width:350px;
}

/* =========================================================
   CHECKBOXES
========================================================= */

.checkbox-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.checkbox-row input[type=checkbox]{
    width:auto;
}

/* =========================================================
   RADIO BUTTONS
========================================================= */

.radio-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.radio-row input[type=radio]{
    width:auto;
}

/* =========================================================
   FILE INPUT
========================================================= */

input[type=file]{
    padding:8px;
}

/* =========================================================
   PASSWORD WITH ICON
========================================================= */

.input-eye-wrap{
    position:relative;
}

.eye-input{
    padding-right:45px;
}

.toggle-eye{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
}

/* =========================================================
   VALIDATION
========================================================= */

.input-error{
    border-color:#d9534f !important;
}

.input-success{
    border-color:#28a745 !important;
}

.help-text{
    margin-top:5px;
    color:#777;
    font-size:12px;
}

.error-text{
    margin-top:5px;
    color:#d9534f;
    font-size:12px;
}

/* =========================================================
   REQUIRED LABEL
========================================================= */

.required::after{
    content:" *";
    color:#d9534f;
}

.form-grid-label{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:12px;
    align-items:center;
}

.input-button{
    display:flex;
    gap:10px;
}

.success-message{
    margin-top:15px;
    color:#8dff8d;
}

/* =========================================================
   INVOICE FORM INPUTS
========================================================= */

.invoice-module label{
    color:#fff;
}

.invoice-module input,
.invoice-module select,
.invoice-module textarea{
    color:#fff;
    background:#2a2a2a;
    border:1px solid #555;
}

.invoice-module input:focus,
.invoice-module select:focus,
.invoice-module textarea:focus{
    color:#fff;
    background:#333;
    border-color:#4caf50;
}

/* Placeholder text */
.invoice-module input::placeholder,
.invoice-module textarea::placeholder{
    color:#bdbdbd;
}

/* Readonly fields */
.invoice-module input[readonly],
.invoice-module textarea[readonly]{
    color:#fff;
    background:#3a3a3a;
}

/* Select dropdown text */
.invoice-module option{
    color:#fff;
    background:#2a2a2a;
}

/* =========================================================
   COMPANY DETAILS
========================================================= */

.invoice-title{
    color:#fff;
    font-size:30px;
    font-weight:700;
    margin-bottom:8px;
}

.invoice-address{
    color:#fff;
    font-size:15px;
    line-height:1.5;
}

.invoice-vat-note{
    color:#f0c040;
    font-weight:600;
    margin-top:10px;
}