/* ===== SUPPLIES (Автоброни) PAGE STYLES ===== */
/* Перенесены и адаптированы идеи из redistribution.css под префикс supplies__ */

/* ===== CSS VARIABLES ===== */
:root {
  --supplies-card-bg: var(--redistribution-card-bg, #1a1a2e);
  --supplies-border: var(--redistribution-border, rgba(255,255,255,0.1));
  --supplies-overlay: var(--redistribution-overlay, rgba(255,255,255,0.03));
  --supplies-shadow: var(--redistribution-shadow, 0 8px 24px rgba(0,0,0,0.15));
  --supplies-shadow-hover: var(--redistribution-shadow-hover, 0 12px 32px rgba(0,0,0,0.2));
  --supplies-transition: var(--redistribution-transition, all .3s ease);
}

.supplies { padding: 0; margin: 0; }
.supplies__content { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Header */
.supplies__header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; padding: 1.5rem; background: var(--supplies-card-bg); border: 1px solid var(--supplies-border); border-radius: 20px; box-shadow: var(--supplies-shadow); }
.supplies__balance { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.supplies__balance-card { background: var(--supplies-overlay); border: 1px solid var(--supplies-border); border-radius: 16px; padding: 1.25rem; display:flex; align-items:center; gap:1rem; transition: var(--supplies-transition); flex:1; min-width:260px; }
.supplies__balance-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }
.supplies__balance-icon { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background: rgba(59,130,246,0.1); color:#3b82f6; }
.supplies__balance-icon--frozen { background: rgba(168,85,247,0.1); color:#a855f7; }
.supplies__balance-info{ flex:1; }
.supplies__balance-value{ font-size:2rem; font-weight:700; color:var(--text-primary); line-height:1.2; }
.supplies__balance-label{ font-size:.875rem; color:var(--text-secondary); font-weight:500; }

.supplies__header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:flex-end; }
.supplies__stats { display:flex; gap:1rem; }
.supplies__stat { text-align:center; padding:.75rem 1rem; background: var(--supplies-overlay); border:1px solid var(--supplies-border); border-radius:12px; min-width:80px; }
.supplies__stat-value{ font-size:1.5rem; font-weight:700; color:var(--text-primary); }
.supplies__stat-label{ font-size:.75rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

.supplies__actions { display:flex; gap:.75rem; }
.supplies__create-btn, .supplies__transfer-btn { border:none; border-radius:16px; padding:1rem 1.5rem; font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.5rem; cursor:pointer; transition: var(--supplies-transition); position:relative; overflow:hidden; white-space:nowrap; }
.supplies__create-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color:#fff; box-shadow:0 6px 16px rgba(102,126,234,0.3); }
.supplies__transfer-btn { background: var(--supplies-overlay); color: var(--text-primary); border:1px solid var(--supplies-border); }
.supplies__create-btn:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(102,126,234,0.4); }
.supplies__transfer-btn:hover{ background: rgba(255,255,255,0.06); }

/* Tabs */
.supplies__tabs { display:flex; gap:.5rem; margin:2rem 0 1.5rem; padding:.375rem; background: var(--supplies-overlay); border:1px solid var(--supplies-border); border-radius:16px; box-shadow: var(--supplies-shadow); }
.supplies__tab{ display:flex; align-items:center; gap:.5rem; padding:.875rem 1.25rem; background:transparent; border:none; border-radius:12px; color:var(--text-secondary); font-size:.875rem; font-weight:500; cursor:pointer; transition: var(--supplies-transition); flex:1; justify-content:center; position:relative; }
.supplies__tab:hover{ background: rgba(255,255,255,0.05); color:var(--text-primary); }
.supplies__tab--active{ background: var(--primary); color:#fff; box-shadow:0 4px 12px rgba(59,130,246,0.3); }
.supplies__tab-count{ background: rgba(255,255,255,0.2); color:inherit; padding:.25rem .5rem; border-radius:8px; font-size:.75rem; font-weight:600; min-width:24px; text-align:center; }
.supplies__tab--active .supplies__tab-count{ background: rgba(255,255,255,0.25); }

/* Tab content */
.supplies__tab-content{ display:none; min-height:60vh; max-height:80vh; overflow-y:auto; overflow-x:hidden; padding-right:.5rem; margin-right:-.5rem; }
.supplies__tab-content--active{ display:block; }
.supplies__tab-content::-webkit-scrollbar{ width:6px; }
.supplies__tab-content::-webkit-scrollbar-track{ background: var(--supplies-overlay); border-radius:3px; }
.supplies__tab-content::-webkit-scrollbar-thumb{ background: var(--supplies-border); border-radius:3px; }
.supplies__tab-content::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.15); }

/* Loading & empty */
.supplies__loading, .supplies__empty{ display:flex; align-items:center; justify-content:center; padding:3rem 1rem; text-align:center; flex:1; flex-direction:column; gap:1rem; }
.supplies__loading-spinner{ width:40px; height:40px; border:3px solid var(--supplies-overlay); border-top:3px solid var(--primary); border-radius:50%; animation: supplies-spin 1s linear infinite; }
.supplies__loading-text{ font-size:.875rem; color:var(--text-secondary); font-weight:500; }
.supplies__empty-icon{ width:64px; height:64px; background: var(--supplies-overlay); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--text-secondary); }
.supplies__empty-title{ font-size:1.125rem; font-weight:600; color:var(--text-primary); }
.supplies__empty-subtitle{ font-size:.875rem; color:var(--text-secondary); }

@keyframes supplies-spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Grid */
.supplies__requests-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:1.5rem; padding:1rem 0; align-items:start; }

/* Card */
.supplies__request{ background: var(--supplies-card-bg); border:1px solid var(--supplies-border); border-radius:16px; padding:1.5rem; transition: var(--supplies-transition); box-shadow: var(--supplies-shadow); position:relative; overflow:visible; }
.supplies__request:hover{ border-color: rgba(255,255,255,0.15); transform: translateY(-2px); box-shadow: var(--supplies-shadow-hover); }
.supplies__request--active{ border-left:4px solid #3b82f6; }
.supplies__request--completed{ border-left:4px solid #10b981; }
.supplies__request--cancelled{ border-left:4px solid #ef4444; }

.supplies__request-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.supplies__request-title{ font-size:1.125rem; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:.5rem; margin:0; }
.supplies__request-article{ font-size:1.0625rem; color:var(--text-primary); font-weight:700; display:flex; align-items:center; gap:.5rem; }
.supplies__request-article i{ font-size:1rem; color:var(--primary); }
.supplies__request-article i.fa-exchange-alt{ color:#f59e0b; }
.supplies__request-article i.fa-plus-circle{ color:#10b981; }
.supplies__request-meta{ display:flex; align-items:center; gap:.75rem; }
.supplies__request-status{ padding:.375rem .75rem; border-radius:8px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.supplies__request-status--draft{ background: rgba(245,158,11,0.12); color:#f59e0b; }
.supplies__request-status--created{ background: rgba(59,130,246,0.12); color:#3b82f6; }
.supplies__request-status--wb{ background: rgba(147,51,234,0.12); color:#9333ea; }
.supplies__request-status--completed{ background: rgba(34,197,94,0.12); color:#22c55e; }
.supplies__request-status--cancelled{ background: rgba(239,68,68,0.12); color:#ef4444; }

.supplies__request-actions{ position:relative; }
.supplies__request-menu{ width:32px; height:32px; background: var(--supplies-overlay); border:1px solid var(--supplies-border); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); }
.supplies__request-dropdown{ position:absolute; top:calc(100% + 8px); right:0; background: var(--supplies-card-bg); border:1px solid var(--supplies-border); border-radius:12px; box-shadow: var(--supplies-shadow); min-width:160px; opacity:0; visibility:hidden; transform: translateY(-8px); transition: var(--supplies-transition); pointer-events:none; z-index:9999; }
.supplies__request-dropdown.show{ opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto; }
.supplies__request-dropdown-item{ display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; color:var(--text-primary); font-size:.875rem; font-weight:500; cursor:pointer; background:none; border:none; width:100%; text-align:left; }
.supplies__request-dropdown-item:hover{ background: var(--supplies-overlay); color: var(--primary); }
.supplies__request-dropdown-item--danger{ color:#ef4444; }
.supplies__request-dropdown-item--danger:hover{ background: rgba(239,68,68,0.1); color:#ef4444; }

.supplies__request-body{ display:grid; grid-template-columns: 1fr auto; gap:1.25rem; margin-bottom:1rem; }
.supplies__request-info{ display:flex; flex-direction:column; gap:.5rem; }
.supplies__request-fields{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
.supplies__request-field{ display:flex; flex-direction:column; gap:.25rem; min-width:140px; }
.supplies__request-field-label{ font-size:.75rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.supplies__request-field-value{ font-size:.875rem; color:var(--text-primary); font-weight:500; overflow-wrap:anywhere; }

.supplies__request-quantity{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; }
.supplies__request-expand{ display:flex; align-items:center; gap:.5rem; color:var(--text-secondary); font-size:.875rem; font-weight:500; cursor:pointer; background:none; border:none; padding:.75rem 1rem; border-radius:8px; align-self:flex-start; transition: var(--supplies-transition); }
.supplies__request-expand:hover{ color: var(--primary); background: var(--supplies-overlay); }
.supplies__request-expand.expanded{ color: var(--primary); }
.supplies__request-expand.expanded i{ transform: rotate(180deg); }

/* Детали заявки */
.supplies__request-details{ display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--supplies-border); }
.supplies__request-details.show{ display:block; }
.supplies__request-details-fields{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
.supplies__request-details-field{ display:flex; flex-direction:column; gap:.25rem; min-width:140px; }
.supplies__request-details-field-label{ font-size:.75rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.supplies__request-details-field-value{ font-size:.875rem; color:var(--text-primary); font-weight:500; overflow-wrap:anywhere; }

/* Toggle like in redistribution */
.supplies__toggle { display:flex; align-items:center; gap:.5rem; }
.supplies__toggle-switch { position:relative; display:inline-block; width:44px; height:24px; }
.supplies__toggle-switch input{ opacity:0; width:0; height:0; }
.supplies__toggle-slider{ position:absolute; cursor:pointer; inset:0; background:#dc3545; transition: var(--supplies-transition); border-radius:24px; }
.supplies__toggle-slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition: var(--supplies-transition); box-shadow:0 2px 4px rgba(0,0,0,0.1); }
input:checked + .supplies__toggle-slider{ background:#28a745; }
input:checked + .supplies__toggle-slider:before{ transform: translateX(20px); }

/* Footer */
.supplies__request-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--supplies-border); margin-top:1rem; }
.supplies__request-date{ font-size:.75rem; color:var(--text-secondary); font-weight:500; }
.supplies__request-id{ font-size:.875rem; color: rgba(255,255,255,0.75); }
.supplies__request-id span{ color:#fff; font-weight:600; }

/* Pagination loading */
.supplies__pagination-loading{ display:flex; align-items:center; justify-content:center; gap:.75rem; padding:1rem; background: var(--supplies-overlay); border:1px solid var(--supplies-border); border-radius:12px; margin-top:1rem; }
.supplies__pagination-spinner{ width:20px; height:20px; border:2px solid var(--supplies-overlay); border-top:2px solid var(--primary); border-radius:50%; animation: supplies-spin 1s linear infinite; }
.supplies__pagination-text{ font-size:.875rem; color:var(--text-secondary); font-weight:500; }

/* Responsive */
@media (max-width: 1400px) { 
  .supplies__header { 
    grid-template-columns: 1fr; 
    align-items: start; 
  } 
}

@media (max-width: 1199px) {
  .supplies__content{ padding:1.25rem; }
  .supplies__request-body{ grid-template-columns:1fr; }
}

@media (max-width: 992px) {
  .supplies__requests-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 768px) {
  .supplies__content{ padding:1rem; }
  .supplies__requests-grid{ grid-template-columns: 1fr; gap:1rem; }
  
  .supplies__header{ 
    padding:1rem; 
    gap:1rem; 
    flex-direction: column;
    align-items: stretch;
  }
  
  .supplies__balance{ 
    flex-direction: column; 
    gap:0.75rem; 
    justify-content: center; 
  }
  
  .supplies__balance-card{ 
    min-width: auto; 
    padding:1rem; 
  }
  
  .supplies__header-actions{ 
    width:100%; 
    flex-direction: column;
    gap:1rem;
  }
  
  .supplies__stats{ 
    justify-content: center; 
    gap:1rem; 
  }
  
  .supplies__stat{ 
    min-width:70px; 
    padding:0.625rem 0.75rem; 
  }
  
  .supplies__stat-value{ 
    font-size:1.25rem; 
  }
  
  .supplies__actions{ 
    width:100%; 
    flex-direction: column;
    gap:0.75rem;
  }
  
  .supplies__create-btn, .supplies__transfer-btn{ 
    width:100%; 
    justify-content:center; 
    padding:1rem 1.5rem;
  }
}
/* Mobile */
@media (max-width: 480px) {
  .supplies__content{ padding:0.75rem; }
  
  .supplies__header{ 
    padding:0.75rem; 
    gap:0.75rem; 
    border-radius:12px;
  }
  
  .supplies__balance-card{ 
    padding:0.75rem; 
    border-radius:12px; 
  }
  
  .supplies__balance-icon{ 
    width:40px; 
    height:40px; 
    font-size:1.125rem; 
  }
  
  .supplies__balance-value{ 
    font-size:1.25rem; 
  }
  
  .supplies__stat{ 
    min-width:60px; 
    padding:0.5rem 0.625rem; 
  }
  
  .supplies__stat-value{ 
    font-size:1rem; 
  }
  
  .supplies__create-btn, .supplies__transfer-btn{ 
    padding:0.875rem 1rem; 
    font-size:0.875rem; 
  }
  
  .supplies__request{ 
    padding:1rem; 
    border-radius:12px; 
  }
  
  .supplies__tab{ 
    padding:.75rem .5rem; 
    font-size:.75rem; 
    min-height:56px; 
    flex-direction:column; 
    gap:.25rem; 
  }
  
  .supplies__tab-count{ 
    font-size:.625rem; 
    padding:.125rem .375rem; 
  }
}