/* =============================================
   DESIGN SYSTEM — soft_usite
   Primary: #8eb02f  |  Secondary: #1e293b
   ============================================= */

:root {
  --color-primary:        #8eb02f;
  --color-primary-dark:   #6d8c24;
  --color-primary-light:  #b5d94a;
  --color-secondary:      #1e293b;
  --color-secondary-light:#334155;
  --color-bg:             #f1f5f9;
  --color-card:           #ffffff;
  --color-text:           #1e293b;
  --color-muted:          #64748b;
  --color-border:         #e2e8f0;
  --color-danger:         #ef4444;
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --radius:               0.5rem;
  --radius-lg:            0.75rem;
  --shadow-sm:            0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:               0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:            0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

/* === Transitions (Alpine.js) === */
.fade-enter-active, .fade-leave-active { transition: opacity .2s ease; }
.fade-enter, .fade-leave-active         { opacity: 0; }

/* === Sidebar scrollbar === */
.sidebar-scroll                             { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-scroll::-webkit-scrollbar         { display: none; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  line-height: 1.25rem; transition: all .15s ease; cursor: pointer; border: none; outline: none;
}
.btn:focus-visible                          { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary                                { background: var(--color-primary); color: #fff; }
.btn-primary:hover                          { background: var(--color-primary-dark); }
.btn-primary:disabled                       { opacity: .6; cursor: not-allowed; }
.btn-secondary                              { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover                        { background: var(--color-secondary-light); }
.btn-ghost                                  { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.btn-ghost:hover                            { background: var(--color-bg); color: var(--color-text); }
.btn-danger                                 { background: #fee2e2; color: var(--color-danger); }
.btn-danger:hover                           { background: var(--color-danger); color: #fff; }
.btn-sm                                     { padding: .25rem .625rem; font-size: .75rem; }
.btn-icon                                   { padding: .375rem; border-radius: .375rem; }

/* === Cards === */
.card                                       { background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.card-header                                { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-body                                  { padding: 1.5rem; }

/* === Data Tables === */
.data-table                                 { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table thead tr                        { background: #f8fafc; border-bottom: 2px solid var(--color-border); }
.data-table thead th                        { padding: .75rem 1rem; text-align: left; font-weight: 600; color: var(--color-secondary); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.data-table tbody tr                        { border-bottom: 1px solid var(--color-border); transition: background .1s ease; }
.data-table tbody tr:hover                  { background: #f8fafc; }
.data-table td                              { padding: .875rem 1rem; color: var(--color-text); vertical-align: middle; }

/* === Form Inputs === */
.form-label                                 { display: block; font-size: .875rem; font-weight: 500; color: var(--color-text); margin-bottom: .375rem; }
.form-input {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: .875rem; color: var(--color-text);
  background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus                           { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(142,176,47,.15); }
.form-input::placeholder                    { color: #94a3b8; }

/* === Badges === */
.badge                                      { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; line-height: 1.25rem; }
.badge-success                              { background: #dcfce7; color: #16a34a; }
.badge-danger                               { background: #fee2e2; color: #dc2626; }
.badge-warning                              { background: #fef3c7; color: #d97706; }
.badge-info                                 { background: #dbeafe; color: #2563eb; }
.badge-muted                                { background: #f1f5f9; color: #64748b; }

/* === Modals === */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.modal-card                                 { background: #fff; border-radius: calc(var(--radius) * 1.5); box-shadow: var(--shadow-lg); width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header                               { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.modal-body                                 { padding: 1.5rem; }
.modal-footer                               { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: .75rem; }

/* === Avatar === */
.ui-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem; color: #fff;
  background: var(--color-primary); text-transform: uppercase; flex-shrink: 0;
}
.ui-avatar-lg                               { width: 2.25rem; height: 2.25rem; font-size: .875rem; }

/* === Page Header === */
.page-header                                { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-title                                 { font-size: 1.125rem; font-weight: 700; color: var(--color-text); line-height: 1.75rem; }
.page-subtitle                              { font-size: .875rem; color: var(--color-muted); margin-top: .125rem; }

/* === Search Wrapper === */
.search-wrapper                             { position: relative; }
.search-wrapper .search-icon               { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.search-wrapper input                       { padding-left: 2.25rem; }
