/* Additions for the Laravel version. Loaded after dairy.css / feed.css; keeps the original look. */
a.tab-btn, a.btn { text-decoration: none; display: inline-block; }
a.tab-btn { color: #1a202c; }
.tabs a.tab-btn.active { color: #fff; }
.tab-btn.reports-tab.active { background: #2b6cb0; }
.tab-btn.admin-tab.active { background: #4a5568; }
.ltr { direction: ltr; unicode-bidi: embed; font-family: Arial, sans-serif; }
.muted { color: #718096; font-weight: normal; }
.text-red { color: #c53030; } .text-green { color: #276749; }
.hidden { display: none !important; }

/* header tools: notifications + user menu */
.nav-tools { display: inline-flex; gap: 6px; align-items: center; position: relative; }
.dropdown { position: relative; display: inline-block; }
.dropdown-panel { display: none; position: absolute; top: 110%; left: 0; min-width: 300px; max-width: 92vw; background: #fff; color: #1a202c; border: 2px solid #1a365d; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.25); z-index: 1500; text-align: right; font-size: 13px; }
.dropdown.open .dropdown-panel { display: block; }
.dropdown-panel a { color: #1a365d; text-decoration: none; display: block; padding: 8px 12px; border-bottom: 1px solid #edf2f7; }
.dropdown-panel a:hover { background: #f7fafc; }
.dropdown-panel .dp-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f7fafc; border-bottom: 2px solid #e2e8f0; }
.dropdown-panel form { margin: 0; }
.dropdown-panel .link-btn { background: none; border: none; color: #2b6cb0; cursor: pointer; font-family: inherit; font-weight: bold; padding: 8px 12px; width: 100%; text-align: right; }
.notif-item.unread { background: #fffbea; }
.notif-item small { display: block; color: #718096; font-weight: normal; }
.badge-count { background: #e53e3e; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-right: 3px; }
.btn-tool { background: #2c5282; }

/* forms (modal & edit pages) */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; text-align: right; }
.form-grid .full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 13px; color: #1a365d; margin-bottom: 3px; }
.form-field .req { color: #e53e3e; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 8px; border: 2px solid #cbd5e0; border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: bold; box-sizing: border-box; background: #fff; text-align: right; }
.form-field input[type="number"], .form-field input[type="date"], .form-field input[type="month"], .form-field .ltr { direction: ltr; text-align: center; font-family: Arial, sans-serif; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #3182ce; outline: none; }
.form-field input[readonly] { background: #f0fff4; color: #276749; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #e53e3e; background: #fff5f5; }
.field-error { color: #c53030; font-size: 12px; margin-top: 3px; }
.form-field .desc-wrapper input { flex: 1; }
.form-hint { font-size: 12px; color: #718096; font-weight: normal; margin-top: 3px; }
.form-card { background: #fff; border: 2px solid #1a365d; border-radius: 10px; padding: 18px; max-width: 900px; margin: 0 auto 15px; }
.form-card h3 { margin-top: 0; color: #1a365d; text-align: center; }
.form-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.form-actions .btn { padding: 10px 26px; font-size: 15px; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.check-row input { width: 18px; height: 18px; accent-color: #2f855a; }
.modal-box.wide { max-width: 860px; }
.modal-box .form-grid { margin-top: 10px; }

/* filters */
.filter-bar input[type="date"] { flex: 0 1 150px; min-width: 130px; direction: ltr; text-align: center; font-family: Arial, sans-serif; }
.filter-bar select { width: auto; min-width: 120px; padding: 5px 8px; border: 1px solid #f6ad55; border-radius: 4px; font-family: inherit; }
.filter-bar .btn { padding: 5px 12px; font-size: 13px; }
.filter-bar a.clear-btn { text-decoration: none; }

/* tables */
.row-actions { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.row-actions form { display: inline; margin: 0; }
.row-actions .btn { margin: 0; }
td.num, th.num { direction: ltr; font-family: Arial, sans-serif; }
.empty-state { text-align: center; color: #a0aec0; padding: 22px !important; font-size: 14px; }
.data-table { table-layout: auto; }
.data-table td { text-align: center; }
.data-table td.right { text-align: right; }
.thumb { max-width: 100%; max-height: 36px; border-radius: 3px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.pill.green { background: #c6f6d5; color: #22543d; } .pill.red { background: #fed7d7; color: #742a2a; }
.pill.yellow { background: #fefcbf; color: #744210; } .pill.gray { background: #e2e8f0; color: #4a5568; }
.pill.blue { background: #bee3f8; color: #2a4365; }
.stock-low td { background: #fff5f5 !important; }

/* pagination */
.pagination { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 10px 0; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-block; padding: 4px 10px; border: 1px solid #cbd5e0; border-radius: 4px; text-decoration: none; color: #1a365d; font-family: Arial, sans-serif; font-size: 13px; background: #fff; }
.pagination .active span { background: #1a365d; color: #fff; border-color: #1a365d; }
.pagination .disabled span { color: #a0aec0; }
.page-info { text-align: center; color: #718096; font-size: 12px; font-weight: normal; }

/* admin sub navigation */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.subnav a { padding: 6px 12px; background: #edf2f7; border-radius: 6px; text-decoration: none; color: #1a365d; font-size: 13px; }
.subnav a.active { background: #4a5568; color: #fff; }
.perm-table td, .perm-table th { font-size: 12px; }
.perm-table input { width: 18px; height: 18px; accent-color: #2f855a; }
pre.trace { direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; font-family: Consolas, monospace; font-size: 11px; background: #1a202c; color: #e2e8f0; padding: 12px; border-radius: 6px; max-height: 480px; overflow: auto; font-weight: normal; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: #718096; } .kv dd { margin: 0; }

/* loading indicator */
#pageLoading { position: fixed; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, #f6e05e, #38a169, #3182ce); z-index: 3000; display: none; animation: loadbar 1s linear infinite; background-size: 200% 100%; }
body.is-loading #pageLoading { display: block; }
@keyframes loadbar { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* feed module helpers (feed.css has no form styles) */
.feed-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: #f8f9fa; padding: 10px; border-radius: 8px; border: 1px solid #e9ecef; margin-bottom: 12px; }
.feed-form .form-field { min-width: 140px; flex: 1; }
.feed-form .form-field input, .feed-form .form-field select { padding: 6px; }
.step-action input[type="text"], .step-action input[type="number"] { width: auto; min-width: 120px; }

/* mobile */
@media (max-width: 760px) {
  body { padding: 6px !important; }
  .container { padding: 8px; }
  .table-wrap table { min-width: 760px; }
  .header { flex-direction: column; gap: 6px; }
  .header h1 { font-size: 17px; }
  .tab-btn { padding: 8px 9px; font-size: 12px; }
  .dropdown-panel { left: auto; right: -60px; }
  .kv { grid-template-columns: 1fr; }
}

@media print {
  .no-print, .nav-tools, .pagination, .page-info, .subnav, #pageLoading, .row-actions, .filter-bar, .modal-overlay { display: none !important; }
}
a.export-option-btn { text-decoration: none; box-sizing: border-box; text-align: center; }
.desc-wrapper { display: flex; align-items: center; gap: 2px; width: 100%; }
@media print { .print-step-page, .dash-print-page { page-break-after: always; } .print-step-page:last-child, .dash-print-page:last-child { page-break-after: auto; } }

/* ---------- row action icons ---------- */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 1px;
       border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit;
       transition: background-color .15s, color .15s, transform .1s, box-shadow .15s; }
.act:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.act:active { transform: translateY(0); }
.act:focus-visible { outline: 3px solid #f6e05e; outline-offset: 1px; }
.act-view, .act-open, .act-ledger { background: #ebf8ff; color: #2b6cb0; border-color: #bee3f8; }
.act-view:hover, .act-open:hover, .act-ledger:hover { background: #2b6cb0; color: #fff; }
.act-edit, .act-permissions { background: #fffaf0; color: #c05621; border-color: #fbd38d; }
.act-edit:hover, .act-permissions:hover { background: #dd6b20; color: #fff; }
.act-delete, .act-delete-forever, .act-danger { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
.act-delete:hover, .act-delete-forever:hover, .act-danger:hover { background: #e53e3e; color: #fff; }
.act-restore, .act-salary, .act-download { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
.act-restore:hover, .act-salary:hover, .act-download:hover { background: #2f855a; color: #fff; }
.act-file { background: #faf5ff; color: #6b46c1; border-color: #e9d8fd; }
.act-file:hover { background: #805ad5; color: #fff; }
.row-actions { gap: 4px; align-items: center; }
.btn-icon-text { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px !important; font-size: 14px !important; }
.act-label { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 0 10px; font-size: 12px; font-weight: bold; }
.cat-list-item .act { width: 28px; height: 28px; }
.cat-list-item form { margin: 0; }
@media (max-width: 760px) { .act { width: 36px; height: 36px; } }   /* bigger touch targets on phones */
@media print { .act { display: none !important; } }
.cat-list-item .act-delete { background: #fff5f5; color: #c53030; padding: 0; }
.cat-list-item .act-delete:hover { background: #e53e3e; color: #fff; }