/* ============================================
   TIMOLOGISI ERP v3.7.0 - RESPONSIVE CSS
   PWA & Mobile Responsive Overrides
   Loaded AFTER all other CSS files.
   3 Breakpoints: 991.98px, 767.98px, 575.98px
   + Touch target improvements (pointer: coarse)
   ============================================ */

/* ============================================
   BREAKPOINT: max-width 991.98px (TABLET)
   Sidebar already hidden via Bootstrap d-lg-none
   ============================================ */
@media (max-width: 991.98px) {

    /* --- HEADER BAR: Hide company name --- */
    .header-company {
        display: none !important;
    }

    /* --- DASHBOARD: Grid tables to 2-column flex --- */
    .dash-grid {
        display: block !important;
        width: 100% !important;
    }

    .dash-grid > tbody {
        display: block !important;
    }

    .dash-grid > tbody > tr,
    .dash-grid > tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .dash-cell {
        display: block !important;
        width: 50% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Dashboard year selector - wrap text */
    .dash-year-selector {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* --- FORM PAGES: Action bar wrapping --- */
    /* Target the action bars in form pages (Save/Cancel/Delete buttons) */
    div[style*="justify-content:space-between"][style*="border-bottom:1px solid #e0e0e0"][style*="padding:15px"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* --- ENTITY LIST: Table horizontal scroll --- */
    .entity-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- FINANCIALS: Tab buttons wrap --- */
    .financials-tabs {
        flex-wrap: wrap;
    }

    /* --- Form content: reduce padding --- */
    div[style*="padding:20px"][style*="max-height:calc"] {
        padding: 15px 10px !important;
    }
}

/* ============================================
   BREAKPOINT: max-width 767.98px (PHONE LANDSCAPE)
   ============================================ */
@media (max-width: 767.98px) {

    /* --- HEADER: Further reduction --- */
    .app-header {
        height: 48px;
    }

    .app-header .app-title img {
        height: 28px !important;
    }

    /* Hide updates link and website link */
    .user-info a[href="/updates"],
    .user-info a[href*="timologisi.net"] {
        display: none !important;
    }

    /* Hide separator line */
    .user-info > span[style*="border-left"] {
        display: none !important;
    }

    /* --- DASHBOARD: Single column --- */
    .dash-cell {
        width: 100% !important;
    }

    /* Dashboard year selector center */
    .dash-year-selector {
        justify-content: center !important;
        text-align: center;
    }

    .dash-year-selector > span {
        font-size: 12px !important;
        text-align: center;
        width: 100%;
    }

    /* --- FORM PAGES: Fields stack vertically --- */
    /* Target flex rows in forms (field groups) */
    div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:15px"],
    div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"],
    div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:20px"] {
        flex-direction: column !important;
    }

    /* Override fixed flex-basis on form fields */
    div[style*="display:flex"][style*="flex-wrap:wrap"] > div[style*="flex:0 0"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    div[style*="display:flex"][style*="flex-wrap:wrap"] > div[style*="flex:1"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Two-column product layout (form + image) to single column */
    div[style*="display:flex"][style*="gap:20px"] > div[style*="flex:1"] {
        flex: 1 1 100% !important;
    }

    /* --- LOGIN PAGE: Stack panels vertically --- */
    div[style*="min-height:100vh"][style*="display:flex"][style*="flex-direction:row"] {
        flex-direction: column !important;
    }

    /* Left brand panel: reduce height */
    div[style*="min-height:100vh"] > div[style*="flex:1"][style*="background:var(--t-login-gradient)"] {
        flex: 0 0 auto !important;
        padding: 30px 20px !important;
        min-height: auto !important;
    }

    /* Hide decorative circles on mobile login */
    div[style*="min-height:100vh"] > div[style*="background:var(--t-login-gradient)"] > div[style*="position:absolute"] {
        display: none !important;
    }

    /* Login right panel: allow natural width */
    div[style*="min-height:100vh"] > div[style*="min-width:380px"] {
        min-width: auto !important;
        padding: 30px 20px !important;
    }

    /* --- ENTITY LIST: Footer wraps --- */
    .entity-list-footer {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .footer-left, .footer-right {
        width: 100%;
        justify-content: center;
    }

    /* Footer totals stack */
    .footer-totals {
        flex-wrap: wrap;
        gap: 10px !important;
        justify-content: center;
    }

    /* --- Invoice line items: smaller font in tables --- */
    div[style*="overflow-x:auto"] table,
    div[style*="overflow-y:auto"] table {
        font-size: 12px;
    }
}

/* ============================================
   BREAKPOINT: max-width 575.98px (PHONE PORTRAIT)
   ============================================ */
@media (max-width: 575.98px) {

    /* --- HEADER: Minimal --- */
    .app-header {
        padding: 0 5px;
        height: 44px;
    }

    .app-header .app-title img {
        height: 24px !important;
    }

    /* Hide warehouse dropdown on very small screens */
    .header-warehouse {
        display: none !important;
    }

    /* Logout button: compact icon only */
    .user-info button[title] {
        padding: 4px 8px;
        font-size: 0;
    }
    .user-info button[title] i {
        font-size: 14px;
    }

    /* --- DASHBOARD: Tighter padding --- */
    .dashboard-container {
        padding: 5px !important;
    }

    /* Dashboard card amounts smaller */
    .dash-cell span[style*="font-size:24px"] {
        font-size: 18px !important;
    }

    .dash-cell span[style*="font-size:28px"] {
        font-size: 22px !important;
    }

    /* Dashboard inner card padding reduction */
    .dash-cell > div > div[style*="padding:20px"] {
        padding: 12px !important;
    }

    .dash-cell > div > div[style*="padding:15px"] {
        padding: 10px !important;
    }

    /* --- FORM PAGES: Maximum compaction --- */
    div[style*="padding:20px"][style*="max-height:calc"],
    div[style*="padding:20px"][style*="overflow-y:auto"] {
        padding: 10px 8px !important;
    }

    /* Form action bar: stack vertically */
    div[style*="justify-content:space-between"][style*="border-bottom:1px solid #e0e0e0"][style*="padding:15px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
    }

    div[style*="justify-content:space-between"][style*="border-bottom:1px solid #e0e0e0"][style*="padding:15px"] > div {
        justify-content: center !important;
    }

    /* Form section headers smaller */
    h5[style*="margin-bottom:15px"] {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Form labels smaller */
    label[style*="font-size:13px"] {
        font-size: 12px !important;
    }

    /* --- ENTITY LIST TOOLBAR: Compact --- */
    .entity-list-toolbar {
        padding: 8px 10px;
    }

    .search-container {
        max-width: 100%;
        margin: 0 8px;
    }

    /* Hide "Εργασίες" text in actions button */
    .btn-actions span {
        display: none;
    }

    /* --- MyData: Compact header --- */
    .mydata-header {
        padding: 8px 10px !important;
    }

    .btn-send {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* --- Reports: Date preset buttons wrap --- */
    .btn-group.btn-group-sm {
        flex-wrap: wrap;
    }

    /* --- Settings: Tab text smaller --- */
    .nav-tabs .nav-link {
        font-size: 12px;
        padding: 6px 10px;
    }

    .nav-tabs .nav-link i {
        margin-right: 4px !important;
    }
}

/* ============================================
   TOUCH TARGETS: Improve for touch devices
   ============================================ */
@media (pointer: coarse) {
    /* Sidebar menu items: minimum 44px touch target */
    .sidebar-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Pagination buttons: larger touch area */
    .btn-page {
        min-width: 36px;
        min-height: 36px;
    }

    /* Icon buttons: larger touch area */
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Checkboxes larger on touch */
    input[type="checkbox"] {
        min-width: 18px;
        min-height: 18px;
    }

    /* Quick filter buttons: better touch spacing */
    .quick-filter-btn {
        min-height: 36px;
        padding: 8px 14px;
    }

    /* Action buttons in entity lists */
    .action-btn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Tab pills in mydata */
    .tab-pill {
        min-height: 36px;
    }

    /* Date preset buttons */
    .date-preset-btn {
        min-height: 36px;
        padding: 8px 14px;
    }
}

/* ============================================
   PWA: Standalone mode adjustments
   When running as installed PWA, no browser chrome
   ============================================ */
@media (display-mode: standalone) {
    /* Safe area padding for notched devices (iPhone X+) */
    .app-header {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
    }

    .dashboard-container {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    /* Remove body margin/padding if browser added any */
    body {
        margin: 0;
        padding: 0;
    }
}