/* ===================================================================
   MOBILE RESPONSIVE CSS - Mobilna optimizacija za sve stranice
   =================================================================== */

/* === VIEWPORT & BASE === */
@media (max-width: 768px) {
  
  /* Container - manje padding na mobilnom */
  .container {
    max-width: 100%;
    margin: 12px auto;
    padding: 0 12px;
  }
  
  /* Povećaj font za čitljivost */
  html, body {
    font-size: 15px;
    line-height: 1.5;
  }
  
  /* Cards - manje padding i shadow */
  .card {
    border-radius: 12px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  
  .rim {
    padding: 12px 14px;
  }
  
  /* === HEADER === */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .header > div {
    width: 100%;
  }
  
  .header .flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* === GRID LAYOUTS === */
  
  /* Grid 2 columns → 1 column */
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Grid 3 columns → 1 column */
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid {
    gap: 10px;
  }
  
  /* === ITEM ROWS === */
  
  /* Item row - stack vertically */
  .item-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 10px;
  }
  
  /* Actions column - full width */
  .item-row .actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  
  /* === ELEMENTI SECTION === */
  
  /* Worker list collapsible */
  .worker-list-collapsible {
    width: 100%;
  }
  
  .worker-list-toggle {
    padding: 10px;
    font-size: 14px;
  }
  
  .worker-selected-badges {
    margin-top: 6px;
    gap: 4px;
  }
  
  .badge-small {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  /* Name cell for ELEMENTI */
  .name-cell {
    width: 100%;
  }
  
  .name-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .name-row input {
    flex: 1;
  }
  
  .badges-inline {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  /* === BUTTONS === */
  
  .btn {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 8px;
    width: 100%;
    text-align: center;
  }
  
  .btn.icon {
    width: auto;
    padding: 10px 12px;
  }
  
  /* Section actions - stack buttons */
  .section-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  
  .section-actions .btn {
    width: 100%;
  }
  
  /* === INPUTS === */
  
  .input {
    padding: 12px;
    font-size: 15px;
    border-radius: 8px;
  }
  
  label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  /* === TABLES === */
  
  .table {
    font-size: 13px;
  }
  
  .table th,
  .table td {
    padding: 8px 6px;
  }
  
  /* Scroll horizontally if needed */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* === BADGES === */
  
  .badge {
    font-size: 11px;
    padding: 3px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
  
  /* === SECTIONS === */
  
  .section {
    border-radius: 10px;
    padding: 10px;
  }
  
  .section legend {
    font-size: 15px;
    padding: 0 6px;
  }
  
  /* === FLEX LAYOUTS === */
  
  .flex {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* === DASHBOARD SPECIFIC === */
  
  /* Client cards on dashboard */
  .client-card {
    padding: 12px;
  }
  
  .client-card .flex {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* === LOGIN PAGE === */
  
  .login-wrap {
    padding: 20px;
  }
  
  .login-card {
    max-width: 100%;
    padding: 20px;
  }
  
  .brand {
    font-size: 20px;
  }
  
  .logo {
    width: 100px;
    height: 100px;
  }
  
  .login-logo img {
    width: 120px;
  }
  
  /* === COLLAPSIBLE SECTIONS === */
  
  /* H2/H3 with arrows */
  h2, h3 {
    font-size: 18px;
    line-height: 1.3;
  }
  
  h2 span[id$='-arrow'],
  h3 span[id$='-arrow'] {
    font-size: 12px;
  }
  
  /* === FORMS === */
  
  /* Form rows */
  form .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* === WORKERS SECTION === */
  
  .worker-list {
    padding: 8px;
  }
  
  .wrow {
    padding: 6px 0;
    gap: 8px;
  }
  
  /* === FILES SECTION === */
  
  /* File upload form */
  form[enctype="multipart/form-data"].flex {
    flex-direction: column;
    align-items: stretch;
  }
  
  form[enctype="multipart/form-data"].flex .input {
    width: 100%;
  }
  
  form[enctype="multipart/form-data"].flex .btn {
    width: 100%;
  }
  
  /* === LOGS === */
  
  .log {
    padding-left: 16px;
  }
  
  .log li {
    font-size: 13px;
    margin-bottom: 8px;
    word-wrap: break-word;
  }
  
  /* === UTILITIES === */
  
  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
  
  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }
  
  /* Text alignment */
  .text-center-mobile {
    text-align: center;
  }
  
  /* === TOUCH IMPROVEMENTS === */
  
  /* Larger tap targets */
  a, button, .btn, input[type="checkbox"], select {
    min-height: 44px;
    min-width: 44px;
  }
  
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  
  /* Better spacing for touch */
  .item-row > * {
    margin-bottom: 4px;
  }
  
  /* === SECTION TITLE === */
  
  .section-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  /* === SMALL TEXT === */
  
  .small {
    font-size: 12px;
  }
}

/* === EXTRA SMALL DEVICES (< 480px) === */
@media (max-width: 480px) {
  
  .container {
    padding: 0 8px;
  }
  
  .card {
    padding: 10px;
    margin: 10px 0;
  }
  
  h1 {
    font-size: 20px;
  }
  
  h2 {
    font-size: 17px;
  }
  
  h3 {
    font-size: 16px;
  }
  
  .btn {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .input {
    padding: 10px;
    font-size: 14px;
  }
  
  .table {
    font-size: 12px;
  }
  
  .table th,
  .table td {
    padding: 6px 4px;
  }
}

/* === LANDSCAPE MODE ON MOBILE === */
@media (max-width: 768px) and (orientation: landscape) {
  
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .header .flex {
    flex-direction: row;
  }
}

/* === TABLET (768px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
  
  .container {
    max-width: 100%;
    padding: 0 20px;
  }
  
  /* Keep 2 columns on tablet for some layouts */
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  
  /* But stack item rows */
  .item-row {
    grid-template-columns: 1fr 1fr !important;
  }
}