/* Minimal Styles for ProfilePicGen */

:root {
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --text: #111111;
  --text-muted: #4a4a4a;
  --border: #e5e5e5;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-subtle);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; }
p, .text-muted { color: var(--text-muted) !important; }

.navbar {
  border-bottom: 1px solid var(--border);
}

.btn { border-radius: 10px; font-weight: 600; padding: 0.75rem 1.25rem; border: 1px solid var(--border); }
.btn-dark { background: #111; color: #fff; border-color: #111; }
.btn-outline-dark { background: transparent; color: #111; border-color: #111; }
.btn:hover { opacity: 0.9; }

.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; }
.card-body { padding: 1.25rem; }

.form-control, .form-select { border-radius: 10px; border: 1px solid var(--border); padding: 0.75rem 1rem; }
.form-control:focus, .form-select:focus { box-shadow: none; border-color: #111; }

.table { background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.table thead th { background: #fff; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 700; }
.table tbody td { border-bottom: 1px solid var(--border); }

.alert { border-radius: 10px; border: 1px solid var(--border); color: var(--text); background: #fff; }

/* Pictures grid */
.pictures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.picture-card { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.picture-card img { width: 100%; height: 180px; object-fit: cover; background: var(--bg-subtle); }
.picture-card .content { padding: 12px; }
.picture-card .title { font-weight: 700; margin-bottom: 4px; }
.picture-card .desc { color: var(--text-muted); font-size: 0.95rem; }
.picture-card .actions { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

/* Utilities */
.text-muted { color: var(--text-muted) !important; }
.bg-white { background: #fff !important; } 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */