/* ShipNiagara Portal — shared styles. Mirrors the brand colors used on
   the main marketing site (navy / teal / orange) but kept plain and
   utilitarian since this is an app, not a landing page. */
:root{
  --navy:#0F3D62; --navy-dark:#0A2C49; --teal:#12A594; --teal-dark:#0C7C6F;
  --orange:#F2994A; --ink:#152332; --gray-600:#5B6B7C; --gray-300:#D8E0E7;
  --gray-100:#F4F7F9; --white:#FFFFFF; --red:#B3261E; --red-bg:#FDECEA;
  --green-bg:#E7F8F4; --radius:12px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--gray-100);line-height:1.5;}
a{color:var(--teal-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{color:var(--navy-dark);margin:0 0 .4em;}
.container{max-width:1080px;margin:0 auto;padding:0 20px;}
.narrow{max-width:460px;margin:0 auto;padding:0 20px;}

.topbar{background:var(--navy-dark);color:#fff;padding:14px 0;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;}
.topbar .brand{font-weight:800;font-size:18px;color:#fff;text-decoration:none;}
.topbar .brand .accent{color:#7FE0D2;}
.topbar nav{display:flex;gap:18px;align-items:center;font-size:14px;flex-wrap:wrap;}
.topbar nav a{color:rgba(255,255,255,.85);}
.topbar nav a.active{color:#fff;font-weight:700;}
.topbar .btn-logout{color:rgba(255,255,255,.7);font-size:13px;}

.page{padding:36px 0 64px;}
.card{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:26px;margin-bottom:22px;box-shadow:0 6px 18px rgba(15,61,98,.06);}
.card h2{font-size:18px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:720px){.grid-2{grid-template-columns:1fr;}}

.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--navy-dark);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border-radius:8px;border:1.5px solid var(--gray-300);
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field .hint{font-size:12.5px;color:var(--gray-600);margin-top:5px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:14.5px;border:none;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:#DB7F2E;text-decoration:none;}
.btn-secondary{background:var(--navy);color:#fff;}
.btn-secondary:hover{background:var(--navy-dark);text-decoration:none;}
.btn-outline{background:#fff;color:var(--navy-dark);border:1.5px solid var(--gray-300);}
.btn-outline:hover{border-color:var(--navy);text-decoration:none;}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

.badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.badge-teal{background:var(--green-bg);color:var(--teal-dark);}
.badge-orange{background:#FDF1E4;color:#DB7F2E;}
.badge-gray{background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-300);}
.badge-red{background:var(--red-bg);color:var(--red);}

.alert{padding:13px 16px;border-radius:8px;font-size:14px;margin-bottom:18px;}
.alert-success{background:var(--green-bg);color:var(--teal-dark);}
.alert-error{background:var(--red-bg);color:var(--red);}
.alert-info{background:#EAF2FA;color:var(--navy);}

table.data{width:100%;border-collapse:collapse;font-size:14px;}
table.data th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-600);border-bottom:2px solid var(--gray-300);padding:9px 10px;}
table.data td{padding:11px 10px;border-bottom:1px solid var(--gray-300);vertical-align:middle;}
table.data tr:hover td{background:var(--gray-100);}
.pkg-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-300);}
.pkg-thumb-placeholder{width:52px;height:52px;border-radius:8px;background:var(--gray-100);border:1px solid var(--gray-300);display:flex;align-items:center;justify-content:center;color:var(--gray-600);font-size:11px;}

.empty-state{text-align:center;padding:44px 20px;color:var(--gray-600);}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
@media (max-width:720px){.stat-row{grid-template-columns:1fr;}}
.stat{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:18px 20px;}
.stat .num{font-size:26px;font-weight:800;color:var(--navy-dark);}
.stat .label{font-size:13px;color:var(--gray-600);}

.auth-card{background:#fff;border-radius:16px;padding:34px 30px;box-shadow:0 12px 34px rgba(15,61,98,.10);margin-top:48px;}
.auth-card h1{font-size:22px;}
.auth-card .sub{color:var(--gray-600);font-size:14px;margin-bottom:22px;}
.auth-links{margin-top:16px;font-size:13.5px;color:var(--gray-600);text-align:center;}

footer.portal-footer{padding:30px 0;text-align:center;font-size:12.5px;color:var(--gray-600);}