/* ============================================================
   mobile.css — Responsive layer for invoicer.bg
   Loaded AFTER style.css / style_in.css, overrides only on
   screens narrower than 800px. Desktop is unchanged.
   ============================================================ */

/* --- Hamburger button (hidden on desktop) --- */
#hamburger {
    display: none;
    position: absolute;
    right: 15px;
    top: 30px;
    width: 30px;
    height: 24px;
    z-index: 100;
    text-decoration: none;
}
#hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    margin-bottom: 5px;
    border-radius: 2px;
    transition: all 0.3s;
}

/* --- Menu labels (hidden on desktop — icons only) --- */
.menu-label {
    display: none;
}

/* --- Table scroll wrapper (added via JS on mobile) --- */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 14px;
}
.table-scroll-wrap .table1 {
    margin-bottom: 0;
}


/* ============================================================
   BREAKPOINT: tablets and phones (max 800px)
   ============================================================ */
@media screen and (max-width: 800px) {

    /* --- Global overrides --- */
    body {
        font-size: 13px;
        -webkit-text-size-adjust: 100%;
    }
    #site {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* --- Header --- */
    #header {
        width: 100% !important;
        background-size: cover;
        background-color: #2168a3;
        height: auto !important;
        min-height: 60px;
        padding: 10px 0;
        position: relative;
        overflow: visible;
    }
    h1.logo {
        float: none;
    }
    h1.logo a {
        width: 180px;
        height: 50px;
        background-size: contain !important;
        background-repeat: no-repeat;
    }
    #texts {
        display: none;
    }

    /* --- Hamburger visible --- */
    #hamburger {
        display: block;
    }

    /* --- Menu: vertical dropdown --- */
    ul#menu {
        display: none;
        width: 100% !important;
        height: auto !important;
        padding: 0;
        margin: 0;
        border-bottom: 2px solid #377bb7;
        background: #2a6baa;
        position: relative;
        z-index: 90;
    }
    ul#menu.menu-open {
        display: block !important;
    }
    ul#menu li {
        float: none !important;
        width: 100% !important;
        margin: 0;
        border-bottom: 1px solid #3a7cc0;
    }
    ul#menu li a {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center;
        padding: 12px 15px;
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        box-sizing: border-box;
        background-position: 15px center !important;
        background-size: 28px 28px !important;
        padding-left: 55px;
    }
    .menu-label {
        display: inline !important;
        color: #fff;
    }

    /* --- Content area --- */
    #content {
        padding: 10px 0 0 0 !important;
        min-height: auto !important;
    }
    #content_main {
        padding: 20px 10px 0 !important;
        min-height: auto !important;
    }

    /* --- Footer --- */
    #footer {
        width: 100% !important;
        background-size: cover;
        background-color: #1a5590;
        height: auto !important;
        padding: 15px 10px !important;
        text-align: center;
        font-size: 11px;
    }

    /* --- Login form --- */
    #content_main table.login {
        width: 90% !important;
        max-width: 300px;
    }
    #content_main input.normal {
        width: 100% !important;
        box-sizing: border-box;
    }
    #content_main input.small {
        width: 60% !important;
        box-sizing: border-box;
    }
    .errormain {
        width: 90% !important;
        padding: 15px 10px !important;
        background-position: 10px center;
        box-sizing: border-box;
        margin: 0 auto 20px !important;
    }
    .height {
        height: 30px !important;
        margin-bottom: 15px !important;
    }

    /* --- Data tables: horizontal scroll --- */
    .table1 {
        width: 100% !important;
        min-width: 600px;
    }
    .table1 th, .table1 td {
        padding: 6px 5px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* --- Breadcrumb + pagination row --- */
    #brc {
        float: none !important;
        padding-bottom: 8px;
    }
    .pagination {
        float: none !important;
        text-align: left;
        padding: 0 0 8px 0 !important;
    }

    /* --- Invoice form (3-column → stacked) --- */
    #inv {
        width: 100% !important;
        display: block;
    }
    #inv > tbody {
        display: block;
    }
    #inv > tbody > tr {
        display: block;
    }
    #inv > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        border-left: 1px solid #4679bd;
        border-right: 1px solid #4679bd;
    }
    #inv .textline input,
    #inv .textline input.recipientcity,
    #inv .textline input.recipientstr,
    #inv .textline input.recipientmol,
    #inv .textline input.recipientin,
    #inv .textline input.recipientinzdds,
    #inv .textline input.recipientegn {
        width: 100% !important;
        box-sizing: border-box;
    }
    .chose {
        display: inline-block;
        margin-left: 5px;
    }

    /* --- Invoice items table --- */
    #continv {
        width: 100% !important;
        display: block;
    }
    #continv tbody {
        display: block;
    }
    #continv tr {
        display: block;
        margin-bottom: 2px;
    }
    #continv td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
    }
    #continv td input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }
    input.poluchilmol,
    input.osnovanieplashtane {
        width: 100% !important;
        box-sizing: border-box;
    }
    .dateizd {
        width: 100px !important;
    }

    /* --- Right-side action panel → below table --- */
    .itemlist {
        float: none !important;
        padding: 10px 0;
    }
    .tabb {
        float: none !important;
        width: 100% !important;
    }
    .legend {
        float: none !important;
        text-align: left;
        padding: 5px 0;
    }

    /* --- Buttons and action links --- */
    .zoom {
        float: none !important;
        display: inline-block;
        margin: 5px 0;
    }
    .btn2 {
        margin-bottom: 5px;
    }
    .buttons {
        float: none !important;
        padding: 10px 0;
    }
    .back {
        padding: 5px 0 !important;
    }

    /* --- Settings page (2-column → stacked) --- */
    .mainsettings, .mainsettings1 {
        float: none !important;
        width: 100% !important;
        border-right: 0 !important;
        margin-bottom: 15px;
    }
    table.settings input.normal {
        width: 100% !important;
        box-sizing: border-box;
    }
    table.settings input.small {
        width: 100% !important;
        box-sizing: border-box;
    }
    table.settings select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Clients/Items sidebar → stacked --- */
    table#clients, table#items {
        width: 100% !important;
    }

    /* --- Ok/Error messages --- */
    .errdiv, .okdiv {
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px 10px 15px 60px !important;
        background-size: 40px;
        background-position: 10px center;
    }

    /* --- Mailer page --- */
    .normaltextlines textarea,
    #maileri textarea {
        width: 100% !important;
        height: 300px !important;
        box-sizing: border-box;
    }
    #maileri input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Popup (blockUI) --- */
    #mainlink {
        width: 95% !important;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mainlink .table1 {
        min-width: 0;
        font-size: 11px;
    }

    /* --- Action icons row (edit/delete/pdf/xml) --- */
    .padin {
        padding: 0 5px 10px !important;
    }
    .padin .right {
        float: none !important;
        display: block;
        margin-bottom: 5px;
    }

    /* --- Select dropdowns --- */
    .normalsel, select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Spravki (reports) table --- */
    .table {
        width: 100%;
    }
    .table input.normal {
        width: 100% !important;
        box-sizing: border-box;
    }
    .table input.small {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Head-in.php user info on mobile --- */
    #header #texts {
        display: none;
    }

    /* --- Quick add expense form --- */
    #quick-add-box {
        padding: 10px !important;
    }
    #quick-add-box .table td {
        display: block !important;
        width: 100% !important;
        padding: 3px 0 !important;
    }
    #quick-add-box input.normal,
    #quick-add-box input.small,
    #quick-add-box input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 10px 8px !important;
        border: 1px solid #aac4e0;
        border-radius: 4px;
    }
    #quick-add-box select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 8px !important;
        box-sizing: border-box;
    }
    #dropZone {
        padding: 20px 10px !important;
    }
    .bigbutton {
        display: block !important;
        text-align: center !important;
        padding: 12px 10px !important;
        font-size: 16px !important;
    }

    /* --- Summary boxes (expenses) --- */
    #content > div[style*="display:flex"] {
        flex-direction: column !important;
    }
    #content > div[style*="display:flex"] > div {
        min-width: 0 !important;
    }

    /* --- Category manager --- */
    #catManager input[type="text"] {
        width: 100% !important;
        font-size: 14px !important;
        padding: 8px !important;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
    #catManager .btn2 {
        display: block;
        text-align: center;
        width: 100%;
    }

    /* --- Recurring section --- */
    #recExpSection .table1 {
        min-width: 500px;
    }

    /* --- Expenses table: card layout on mobile --- */
    #recieved_table {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    #recieved_table thead {
        display: none;
    }
    #recieved_table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    #recieved_table tbody td {
        display: block !important;
        white-space: normal !important;
        border: none !important;
        padding: 2px 0 !important;
        text-align: left !important;
        font-size: 12px !important;
        background: none !important;
    }
    /* Company — full width, bold title */
    #recieved_table td:nth-child(2) {
        order: -1;
        grid-column: 1 / -1;
        font-size: 14px !important;
        font-weight: bold;
        color: #333;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 4px;
    }
    /* Date */
    #recieved_table td:nth-child(1) {
        order: 1;
        color: #888;
        font-size: 11px !important;
    }
    #recieved_table td:nth-child(1)::before {
        content: '';
    }
    /* Category */
    #recieved_table td:nth-child(3) {
        order: 2;
        color: #4679bd;
        font-size: 11px !important;
        text-align: right !important;
    }
    /* Description — hidden on mobile */
    #recieved_table td:nth-child(4) {
        display: none !important;
    }
    /* Invoice number — hidden on mobile */
    #recieved_table td:nth-child(5) {
        display: none !important;
    }
    /* Amount */
    #recieved_table td:nth-child(6) {
        order: 3;
        font-weight: bold;
        color: #d9534f;
        font-size: 14px !important;
        padding-top: 4px !important;
    }
    /* VAT */
    #recieved_table td:nth-child(7) {
        order: 4;
        text-align: right !important;
        color: #999;
        font-size: 11px !important;
        padding-top: 6px !important;
    }
    #recieved_table td:nth-child(7)::before {
        content: 'ДДС: ';
    }
    /* File — important, must be visible */
    #recieved_table td:nth-child(8) {
        order: 5;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0;
        margin-top: 4px;
        font-size: 13px !important;
    }
    #recieved_table td:nth-child(8) a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 34px;
        font-size: 18px !important;
        background: #e8f4fd;
        border: 1px solid #aac4e0;
        border-radius: 6px;
        margin: 2px 4px 2px 0;
        text-decoration: none;
        padding: 0 8px !important;
    }
    /* Actions */
    #recieved_table td:nth-child(9) {
        order: 6;
        text-align: right !important;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0;
        margin-top: 4px;
        display: flex !important;
        justify-content: flex-end;
        gap: 6px;
    }
    #recieved_table td:nth-child(9) a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 34px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0 !important;
    }
    #recieved_table td:nth-child(9) a img {
        width: 20px !important;
        height: 20px !important;
    }
    #recieved_table td:nth-child(9) a span {
        font-size: 18px !important;
    }
    /* Empty state row */
    #recieved_table tbody tr td[colspan] {
        grid-column: 1 / -1;
    }

    /* --- Invoice list (#invoicer): card layout on mobile --- */
    #invoicer {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    #invoicer thead {
        display: none;
    }
    #invoicer tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    #invoicer tbody td {
        display: block !important;
        white-space: normal !important;
        border: none !important;
        padding: 2px 0 !important;
        text-align: left !important;
        font-size: 12px !important;
        background: none !important;
    }
    /* Client name (td:4) — full width bold title */
    #invoicer td:nth-child(4) {
        order: -1;
        grid-column: 1 / -1;
        font-size: 14px !important;
        font-weight: bold;
        color: #333;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 4px;
    }
    /* Number (td:2) */
    #invoicer td:nth-child(2) {
        order: 1;
        color: #4679bd;
        font-size: 12px !important;
        font-weight: bold;
    }
    #invoicer td:nth-child(2)::before {
        content: '№ ';
        color: #999;
        font-weight: normal;
    }
    /* Type (td:3) */
    #invoicer td:nth-child(3) {
        order: 2;
        text-align: right !important;
        color: #888;
        font-size: 11px !important;
    }
    /* Date (td:5) */
    #invoicer td:nth-child(5) {
        order: 3;
        color: #888;
        font-size: 11px !important;
    }
    /* Created by (td:6) — hidden on mobile */
    #invoicer td:nth-child(6) {
        display: none !important;
    }
    /* Amount with VAT (td:7) */
    #invoicer td:nth-child(7) {
        order: 4;
        text-align: right !important;
        font-weight: bold;
        color: #2a6baa;
        font-size: 15px !important;
        padding-top: 2px !important;
    }
    /* Actions (td:1) — bottom row */
    #invoicer td:nth-child(1) {
        order: 10;
        grid-column: 1 / -1;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0;
        margin-top: 6px;
        display: flex !important;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
    }
    #invoicer td:nth-child(1) a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 36px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0 6px !important;
    }
    #invoicer td:nth-child(1) a img {
        width: 20px !important;
        height: 20px !important;
    }
    /* Empty state row */
    #invoicer tbody tr td[colspan] {
        grid-column: 1 / -1;
    }

    /* --- Report filter form on mobile --- */
    #spravkiforma table.blue {
        width: 100% !important;
    }
    #spravkiforma table.blue td {
        display: block !important;
        width: 100% !important;
        padding: 3px 0 !important;
    }
    #spravkiforma table.blue th {
        display: block !important;
        text-align: left !important;
        padding: 8px 0 2px !important;
    }
    #spravkiforma input.small,
    #spravkiforma input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 10px 8px !important;
    }
    #spravkiforma select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Edit/New expense form --- */
    #formclient .table td {
        display: block !important;
        width: 100% !important;
        padding: 3px 0 !important;
    }
    #formclient input.normal,
    #formclient input.small,
    #formclient input[type="text"],
    #formclient input[type="file"] {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 10px 8px !important;
    }
    #formclient select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 8px !important;
        box-sizing: border-box;
    }
    #formclient .btn2 {
        display: inline-block;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   BREAKPOINT: phones only (max 480px)
   ============================================================ */
@media screen and (max-width: 480px) {

    body {
        font-size: 14px;
    }
    #site {
        padding: 0 5px;
    }
    h1.logo a {
        width: 140px;
        height: 40px;
    }
    #hamburger {
        top: 18px;
        right: 10px;
    }
    ul#menu li a {
        padding: 14px 15px 14px 55px;
        font-size: 15px;
    }

    /* Invoice list: card-like rows */
    .table1 th {
        font-size: 10px;
        padding: 4px 3px;
    }
    .table1 td {
        font-size: 11px;
        padding: 4px 3px;
    }
    .table1 td img {
        width: 16px;
        height: 16px;
    }

    /* Login */
    #content_main table.login {
        width: 95% !important;
    }

    /* Invoice form inputs bigger for touch */
    #inv .textline input,
    .dateizd,
    input.poluchilmol,
    input.osnovanieplashtane,
    #continv td input[type="text"] {
        font-size: 14px !important;
        padding: 6px 4px !important;
    }
    select {
        font-size: 16px !important;
        padding: 8px !important;
    }

    /* All form inputs bigger on phones */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="month"],
    textarea {
        font-size: 16px !important;
        padding: 10px 8px !important;
        border-radius: 4px;
    }

    /* Summary boxes stack vertically */
    div[style*="display:flex"] {
        flex-direction: column !important;
    }

    /* Bigger touch targets for action icons */
    .table1 td a {
        display: inline-block;
        padding: 4px;
        min-width: 28px;
        min-height: 28px;
    }
}