﻿    /* Requests */
    .req-item-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    .req-id-badge {
      font-size: 10px;
      color: var(--accent2);
      font-weight: 700;
    }

    .req-invoice-icon {
      color: #a78bfa !important;
    }

    .req-comment-badge {
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 10px !important;
      font-weight: 700;
      border: 1px solid rgba(165, 180, 252, .25);
      background: rgba(99, 102, 241, .14);
      color: #a5b4fc !important;
    }

    .req-comment-badge-unread {
      border-color: rgba(248, 113, 113, .3);
      background: rgba(248, 113, 113, .16);
      color: #fca5a5 !important;
    }

    .advance-tag-saq {
      background: #a36029;
      color: #fff !important;
      box-shadow: none;
    }

    .advance-tag-adv {
      background: #05798d;
      color: #fff !important;
      box-shadow: none;
    }

    .advance-tag-cons {
      background: #4d318b;
      color: #fff !important;
      box-shadow: none;
    }

    .advance-tag-online {
      background: #005f1b;
      color: #fff !important;
      box-shadow: none;
    }

    .badge-budget-compact {
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 4px;
    }

    .req-cell-qty {
      color: #94a3b8;
      text-align: right;
    }

    .req-cell-est {
      color: #64748b;
      text-align: right;
    }

    .req-cell-supplier {
      color: #64748b;
      font-size: 12px;
    }

    .req-cell-date {
      color: #475569;
      font-size: 11px;
      white-space: nowrap;
    }

    .requests-table .td-item .item-sub {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .req-date-line,
    .req-date-time {
      display: block;
    }

    .req-date-time {
      color: #64748b;
      font-size: 10px;
    }

    .req-empty-cell {
      padding: 48px;
      text-align: center;
      color: var(--muted);
    }

    .req-empty-icon {
      margin-bottom: 12px;
      opacity: 0.4;
    }

	    .req-filter-search {
	      flex: 0 0 170px;
	      width: 170px !important;
	      min-width: 170px;
	    }
	
	    .req-filter-status {
	      width: 130px !important;
	    }
	
	    .req-filter-dept {
	      flex: 1 1 122px;
	      width: auto !important;
	      min-width: 112px;
	    }
	
	    .req-filter-type {
	      flex: 1 1 130px;
	      width: auto !important;
	      min-width: 118px;
	    }
	
	    .req-filter-prio,
	    .req-filter-capex {
	      flex: .9 1 118px;
	      width: auto !important;
	      min-width: 108px;
	    }
	
	    .req-filter-period {
	      flex: 1.1 1 145px;
	      width: auto !important;
	      min-width: 128px;
	    }
	
	    .req-filter-object {
	      flex: 1 1 128px;
	      width: auto !important;
	      min-width: 116px;
	    }

    .req-page-size {
      width: 58px !important;
      min-height: 30px;
      height: 30px;
      padding: 4px 8px;
      font-size: 12px;
    }

    #req-pagination-bottom-wrap .toolbar-pagination {
      margin-top: 16px;
      margin-bottom: 0;
    }

    .price-none {
      color: var(--muted2);
      text-align: right;
    }

    .price-final {
      text-align: right;
    }


		    .toolbar-requests {
		      display: flex;
		      flex-direction: column;
		      align-items: stretch;
		      gap: 6px;
		    }
	
		    .req-toolbar-filter-row {
		      display: flex;
		      flex-wrap: wrap;
		      align-items: center;
		      gap: 6px;
		      max-width: 100%;
		      padding-right: 0;
		      overflow: visible;
		      scrollbar-width: none;
		    }

	    .req-toolbar-filter-row::-webkit-scrollbar {
	      display: none;
	    }

		    .req-toolbar-row {
		      display: contents;
		    }
	
	    .toolbar-requests .inp {
	      height: 32px;
	      min-height: 32px;
	      padding: 5px 8px;
	      font-size: 12px;
	    }

			    .req-toolbar-spacer {
	      display: none;
	    }

	    .req-toolbar-row-export {
	      margin-left: auto;
	    }

	    .req-filter-search {
	      flex: 0 0 204px;
	      width: 204px !important;
	      min-width: 204px;
	    }

	    .req-filter-status,
	    .req-filter-dept,
	    .req-filter-type,
	    .req-filter-prio,
	    .req-filter-capex,
	    .req-filter-period,
	    .req-filter-object,
	    .req-toolbar-row-dates {
	      flex: 0 0 136px;
	      width: 136px !important;
	      min-width: 136px;
	    }

	    .req-toolbar-row-dates {
	      display: block;
	      position: relative;
	    }

	    .req-date-range-btn {
	      display: flex;
	      align-items: center;
	      height: 32px;
	      min-height: 32px;
	      width: 100%;
	      padding: 5px 8px;
	      justify-content: flex-start;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	      font-family: 'Sora', sans-serif;
	      font-size: 12px;
	      font-weight: 500;
	      cursor: pointer;
	    }

	    .req-date-range-active {
	      color: var(--accent2);
	      border-color: rgba(96, 165, 250, .32);
	      background: rgba(37, 99, 235, .12);
	    }

	    .req-date-popover {
	      position: absolute;
	      left: 0;
	      top: calc(100% + 8px);
	      width: min(320px, calc(100vw - 32px));
	      padding: 12px;
	      border: 1px solid var(--border2);
	      border-radius: 10px;
	      background: var(--surface2);
	      box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
	      z-index: 1200;
	    }

	    .req-date-popover-grid {
	      display: grid;
	      grid-template-columns: 1fr 1fr;
	      gap: 10px;
	    }

	    .req-date-popover-input {
	      margin-top: 6px;
	    }

	    .req-date-apply-btn {
	      width: 100%;
	      justify-content: center;
	      margin-top: 12px;
	    }

	    .req-create-btn,
	    .req-export-btn {
	      flex: 0 0 auto;
	      min-height: 0;
	      height: 32px;
	      padding: 5px 8px;
	      font-size: 12px;
	    }
	
		    .req-export-btn {
	      flex: 0 0 58px;
	      width: 58px;
	    }
		
		    .req-create-btn {
		      flex: 0 0 204px;
		      width: 204px;
		      min-width: 204px;
		      height: 38px;
		      font-size: 13px;
		      font-weight: 700;
	    }
	
	    .req-toolbar-create-row {
	      flex: 0 0 100%;
	      display: flex;
	      justify-content: flex-start;
	      margin-top: 2px;
	    }
	
	    @media (min-width: 721px) and (max-width: 1024px) {
	      .req-toolbar-filter-row {
	        display: grid;
	        grid-template-columns: repeat(3, minmax(0, 1fr));
	        gap: 8px;
	      }

	      .req-toolbar-row {
	        display: contents;
	      }

	      .req-toolbar-row-dates {
	        display: block;
	        width: 100% !important;
	        min-width: 0;
	      }

	      .req-filter-search,
	      .req-filter-status,
	      .req-filter-dept,
	      .req-filter-type,
	      .req-filter-prio,
	      .req-filter-capex,
	      .req-filter-period,
	      .req-filter-object,
	      .req-date-range-btn {
	        width: 100% !important;
	        min-width: 0;
	        flex: 1 1 auto;
	      }

	      .req-export-btn {
	        width: 100%;
	        flex-basis: auto;
	        justify-content: center;
	      }
	    }

	    @media (max-width: 720px) {
	      .req-toolbar-filter-row {
	        display: grid;
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	        gap: 8px;
	        padding-right: 0;
	        overflow: visible;
	      }

	      .req-toolbar-row {
	        display: contents;
	      }

	      .req-toolbar-row-dates {
	        display: block;
	        width: 100% !important;
	        min-width: 0;
	      }

	      .req-filter-search,
	      .req-filter-status,
	      .req-filter-dept,
	      .req-filter-type,
	      .req-filter-prio,
	      .req-filter-capex,
	      .req-filter-period,
	      .req-filter-object,
	      .req-date-range-btn {
	        width: 100% !important;
	        min-width: 0;
	        flex: 1 1 auto;
	      }

	      .req-toolbar-row-export {
	        display: block;
	        margin-left: 0;
	      }

	      .req-export-btn {
	        width: 100%;
	        flex-basis: auto;
	        justify-content: center;
	      }

	      .req-toolbar-create-row {
	        margin-top: 4px;
	      }

	      .req-create-btn {
	        width: 100%;
	        min-width: 0;
	        flex-basis: auto;
	      }
	    }

    .req-page-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      min-width: 32px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--text);
    }

    .req-page-arrow {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }

    .req-page-btn:hover:not(:disabled) {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    .req-page-btn:disabled {
      opacity: .45;
      color: var(--muted);
    }

    [data-theme="light"] .req-page-btn {
      background: #ffffff;
      border-color: #cbd5e1;
      color: #0f172a;
    }

    [data-theme="light"] .req-page-btn:hover:not(:disabled) {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    .req-page-current,
    .req-page-range {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--border2);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      line-height: 1;
      background: var(--surface2);
      white-space: nowrap;
    }

    .req-page-current {
      min-width: 54px;
      color: var(--text);
      font-weight: 600;
    }

    .req-page-range {
      min-width: 92px;
    }

    [data-theme="light"] .req-page-current,
    [data-theme="light"] .req-page-range,
    [data-theme="light"] .req-page-size {
      background: #ffffff;
      border-color: #cbd5e1;
      color: #0f172a;
    }

    .req-toolbar-spacer {
      min-height: 1px;
      flex: 1 1 180px;
    }

    .table-wrap-requests {
      min-width: 0;
    }

    .req-row-card {
      scroll-margin-top: 84px;
    }

    .req-main-cell {
      min-width: 0;
    }

    .req-actions-cell {
      min-width: 0;
    }

    .req-actions-stack {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }

    .req-actions-primary,
    .req-actions-secondary {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
    }


    #page-requests.page {
      max-width: none;
      width: 100%;
      padding-left: 18px;
      padding-right: 18px;
    }
